elementFromPoint-003.html (1617B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Checking whether dynamic changes to visibility interact correctly with 4 table anonymous boxes</title> 5 <script src=/resources/testharness.js></script> 6 <script src=/resources/testharnessreport.js></script> 7 <style> 8 #overlay { 9 display: table; 10 position: absolute; 11 top: 0; 12 left: 0; 13 width: 100%; 14 height: 100%; 15 background: white; 16 z-index: 999 17 } 18 19 #wrapper { position: relative; } 20 </style> 21 <div id=log></div> 22 <div id="wrapper"> 23 <div id="overlay"><div></div></div> 24 <div id="target">Some text</div> 25 </div> 26 <script> 27 test(function() { 28 // Make sure we have boxes constructed already. 29 document.body.offsetWidth; 30 var overlay = document.querySelector("#overlay"); 31 overlay.insertBefore(document.createElement("div"), overlay.firstChild); 32 overlay.appendChild(document.createElement("div")); 33 // Make sure we have boxes constructed for those inserts/appends 34 document.body.offsetWidth; 35 overlay.firstChild.nextSibling.remove(); 36 var t = document.querySelector("#target"); 37 var rect = t.getBoundingClientRect(); 38 var hit = document.elementFromPoint(rect.x + rect.width/2, 39 rect.y + rect.height/2); 40 assert_equals(hit, t.previousElementSibling, 41 "Should hit the overlay first."); 42 t.previousElementSibling.style.visibility = "hidden"; 43 hit = document.elementFromPoint(rect.x + rect.width/2, 44 rect.y + rect.height/2); 45 assert_equals(hit, t, 46 "Should hit our target now that the overlay is hidden."); 47 }); 48 </script>