| <!doctype html> |
| <script src="../../resources/js-test.js"></script> |
| <style> |
| #left { |
| position: absolute; |
| top: 0; |
| left: 0; |
| } |
| #right { |
| position: absolute; |
| top: 0; |
| left: 200px; |
| } |
| #button { |
| margin: 0; |
| width: 50px; |
| height: 50px; |
| } |
| #button:before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 50px; |
| height: 50px; |
| background: rgba(0, 255, 0, 0.3); |
| } |
| #div { |
| margin: 0; |
| width: 50px; |
| height: 50px; |
| border: 1px solid blue; |
| } |
| #div:before { |
| content: 'BEFORE'; |
| display: table-cell; |
| will-change: position; |
| padding: 25px; |
| background: rgba(0, 255, 0, 0.3); |
| } |
| #console { |
| position: absolute; |
| top: 200px; |
| } |
| </style> |
| |
| <div id='left'> |
| <button id='button'>Button Test</button> |
| </div> |
| <div id='right'> |
| <div id='div'>Div Test</div> |
| </div> |
| |
| <div id='console'></div> |
| |
| <script> |
| shouldBe('document.elementFromPoint(25, 25).id', "'button'"); |
| shouldBe('document.elementFromPoint(225, 25).id', "'div'"); |
| </script> |
