| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Test: document.elementFromPoint() for overlapping, positioned regions with non-auto z-index</title> |
| <link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com"> |
| <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property"> |
| <link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from"> |
| <meta name="flags" content="ahem"> |
| <meta name="assert" content="Test checks that document.elementFromPoint() returns the correct |
| region when multiple regions are absolutely positioned, overlap and have non-auto z-index."> |
| <style> |
| html, body { |
| margin: 0; |
| } |
| #content { |
| font-family: Ahem; |
| font-size: 20px; |
| line-height: 1em; |
| color: lime; |
| flow-into: f; |
| } |
| |
| .region { |
| position: absolute; |
| top: 50px; |
| left: 50px; |
| width: 100px; |
| height: 100px; |
| border-left: 20px solid lightblue; |
| background-color: green; |
| flow-from: f; |
| } |
| .region p { |
| height: 50%; |
| background-color: red; |
| } |
| |
| .front { |
| z-index: 42; |
| border-left-color: orange; |
| } |
| .middle { |
| z-index: 32; |
| border-left-color: lightblue; |
| } |
| .back { |
| z-index: 16; |
| border-left-color: yellow; |
| } |
| |
| .left { |
| top: 50px; |
| left: 50px; |
| } |
| .center { |
| top: 90px; |
| left: 100px; |
| } |
| .right { |
| top: 130px; |
| left: 150px; |
| } |
| |
| #log { |
| margin-top: 250px; |
| } |
| </style> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| <div id="content"> |
| <div id="block1"> |
| xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx |
| </div> |
| <div id="block2"> |
| xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx |
| </div> |
| <div id="block3"> |
| xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx |
| </div> |
| </div> |
| <div class="region"> |
| <p> </p> |
| </div> |
| <div class="region"> |
| <p> </p> |
| </div> |
| <div class="region"> |
| <p> </p> |
| </div> |
| <div id="log"></div> |
| <script> |
| function applyClasses(selector, classes) { |
| var elements = document.querySelectorAll(selector), |
| length = elements.length; |
| for (var i = 0; i < length; i++) { |
| elements[i].className = "region " + classes[i]; |
| } |
| document.body.offsetTop; |
| } |
| |
| function runTests() { |
| var regionsEnabled = document.querySelector(".region p").getBoundingClientRect().width == 0; |
| |
| test(function() { |
| applyClasses(".region", [ "middle", "front", "back" ]); |
| |
| assert_true(regionsEnabled, "Regions is enabled"); |
| assert_equals(document.elementFromPoint(60, 100), document.querySelector(".front")); |
| }, "document.elementFromPoint() for point on region border, with all regions overlapping with non-auto z-index"); |
| |
| test(function() { |
| applyClasses(".region", [ "right middle", "left front", " center back" ]); |
| |
| assert_true(regionsEnabled, "Regions is enabled"); |
| assert_equals(document.elementFromPoint(60, 100), document.querySelector(".front")); |
| }, "document.elementFromPoint() for point on region border, with regions partially overlapping with non-auto z-index"); |
| |
| test(function() { |
| applyClasses(".region", [ "right middle", "center front", " left back" ]); |
| |
| assert_true(regionsEnabled, "Regions is enabled"); |
| //we're checking the "right middle" region, inside it |
| assert_equals(document.elementFromPoint(180, 210), document.querySelector("#block1")); |
| }, "document.elementFromPoint() for point inside region (effectively, content node), with regions partially overlapping with non-auto z-index"); |
| } |
| |
| runTests(); |
| </script> |
| </body> |
| </html> |
