test_bug1313753.html (1614B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Test for bug 1313753</title> 4 <script src="/tests/SimpleTest/SimpleTest.js"></script> 5 <div id="log"></div> 6 <script> 7 function runTest() { 8 // Change visible region of |closure| element. 9 document.getElementById("target").classList.add("rotate"); 10 window.setTimeout(function() { 11 var target = document.getElementById("target"); 12 var bounds = target.getBoundingClientRect(); 13 var x = bounds.x + bounds.width / 2; 14 var y = bounds.y + bounds.height / 2; 15 is(document.elementFromPoint(x, y).id, target.id, 16 "it should be |target| element if visible regions of closure is correct"); 17 SimpleTest.finish(); 18 }, 0); 19 } 20 21 SimpleTest.waitForExplicitFinish(); 22 SimpleTest.waitForFocus(runTest); 23 </script> 24 25 <style> 26 .panel { 27 transform: rotateX(-150deg); 28 backface-visibility: hidden; 29 transform-origin: 0px 0px; 30 position: absolute; 31 display: block; 32 width: 100px; 33 height: 100px; 34 background-color: green; 35 } 36 #closure .rotate { 37 transform: rotateX(0deg); 38 } 39 #closure { 40 perspective: 100px; 41 width: 200px; 42 z-index: 1; 43 } 44 #outer { 45 height: 400px; 46 width: 200px; 47 } 48 </style> 49 <div id="outer"> 50 <div id="closure"> 51 <div style="transform-style: preserve-3d;"> 52 <div style="transform-style: preserve-3d; background-color: blue;"> 53 <ul style="transform-style: preserve-3d;"> 54 <li style="transform-style:preserve-3d;"> 55 <div style="display: contents"> 56 <div id="target" class="panel"></div> 57 </div> 58 </li> 59 </ul> 60 </div> 61 </div> 62 </div> 63 </div>