| <!DOCTYPE html> |
| <script src="../resources/js-test.js"></script> |
| <script> |
| var centerX; |
| var centerY; |
| function hitTestCenterOfElement(elementID, expectedID) |
| { |
| var element = document.getElementById(elementID); |
| var rect = element.getBoundingClientRect(); |
| centerX = rect.left + (rect.width / 2); |
| centerY = rect.top + (rect.height / 2); |
| shouldBe("document.elementFromPoint(centerX, centerY).id", "'" + expectedID + "'"); |
| } |
| |
| function test() { |
| hitTestCenterOfElement("containTransform", "containTransform"); |
| hitTestCenterOfElement("containAbsolute", "containAbsolute"); |
| hitTestCenterOfElement("containFixed", "containFixed"); |
| |
| hitTestCenterOfElement("transform", "body"); |
| hitTestCenterOfElement("absolute", "body"); |
| hitTestCenterOfElement("fixed", "body"); |
| } |
| </script> |
| <style> |
| div { |
| width: 100px; |
| height: 100px; |
| background-color: green; |
| } |
| div > div { |
| background-color: red; |
| } |
| .paintContainment { |
| contain: paint; |
| margin: 10px; |
| } |
| #transform { |
| transform: translateZ(0) translateX(100px); |
| } |
| #absolute { |
| position: absolute; |
| top: 0px; |
| left: 100px; |
| } |
| #fixed { |
| position: fixed; |
| top: 0px; |
| left: 100px; |
| } |
| </style> |
| <body onload="test()" id="body"> |
| <p>Hit testing should respect clips established by contain: paint.</p> |
| <div id="containTransform" class="paintContainment"> |
| <div id="transform"></div> |
| </div> |
| <div id="containAbsolute" class="paintContainment"> |
| <div id="absolute"></div> |
| </div> |
| <div id="containFixed" class="paintContainment"> |
| <div id="fixed"></div> |
| </div> |
| <pre id="console"></pre> |
