test_pointerPreserves3DClip.html (1470B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Test for pointer events with preserve-3d and clips</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 7 <style type="text/css"> 8 .outer { 9 transform-style: preserve-3d; 10 } 11 .container { 12 overflow-y: scroll; 13 overflow-x: hidden; 14 width: 200px; 15 height: 300px; 16 } 17 .content { 18 width: 200px; 19 height: 1000px; 20 transform-style: preserve-3d; 21 } 22 #container1 { 23 background-color: green; 24 transform: translateZ(2px); 25 } 26 #container2 { 27 height: 100px; 28 transform: translateY(-200px) translateZ(10px); 29 background-color: red; 30 } 31 </style> 32 </head> 33 <body onload="runTest();"> 34 <div class="outer" id="outer"> 35 <div class="container" id="container1"> 36 <div class="content"></div> 37 </div> 38 <div class="container" id="container2"> 39 <div class="content"></div> 40 </div> 41 </div> 42 <script class="testbody" type="text/javascript"> 43 function runTest() { 44 var outer = document.getElementById("outer"); 45 var x = outer.offsetLeft; 46 var y = outer.offsetTop; 47 var target = document.elementFromPoint(x + 100, y + 250); 48 ok(target.parentNode == document.getElementById("container1"), "Find the right target."); 49 SimpleTest.finish(); 50 } 51 52 SimpleTest.waitForExplicitFinish(); 53 </script> 54 </body> 55 </html>