| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></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 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> |
| <script> |
| function hitTestCenterOfElement(elementID) |
| { |
| var element = document.getElementById(elementID); |
| var rect = element.getBoundingClientRect(); |
| var centerX = rect.left + (rect.width / 2); |
| var centerY = rect.top + (rect.height / 2); |
| return document.elementFromPoint(centerX, centerY).id; |
| } |
| |
| test(function(t) |
| { |
| assert_equals(hitTestCenterOfElement("containTransform"), "containTransform"); |
| assert_equals(hitTestCenterOfElement("containAbsolute"), "containAbsolute"); |
| assert_equals(hitTestCenterOfElement("containFixed"), "containFixed"); |
| |
| assert_equals(hitTestCenterOfElement("transform"), "body"); |
| assert_equals(hitTestCenterOfElement("absolute"), "body"); |
| assert_equals(hitTestCenterOfElement("fixed"), "body"); |
| }, "Hit testing should respect clips established by contain: paint."); |
| </script> |
