hittest-preserve-3d.html (1508B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="help" href="https://issuetracker.google.com/issues/41380554"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-actions.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <style> 11 html, body { margin: 0; padding: 0; } 12 #parent { 13 width: 300px; 14 height: 300px; 15 background-color: rgba(0, 0, 255, 0.5); 16 transform-style: preserve-3d; 17 } 18 #child1 { 19 width: 200px; 20 height: 100px; 21 background-color: red; 22 transform: translateZ(-10px); 23 } 24 #child2 { 25 width: 200px; 26 height: 100px; 27 background-color: green; 28 transform: translateZ(10px); 29 } 30 </style> 31 </head> 32 <body> 33 <div id="parent"> 34 <div id="child1"></div> 35 <div id="child2"></div> 36 </div> 37 <script> 38 async function hit_test(x, y, target_id) { 39 const promise = new Promise(resolve => { 40 document.addEventListener("click", function (event) { 41 assert_equals(event.target.id, target_id, `Click should be on ${target_id}`); 42 resolve(); 43 }, { once: true }); 44 }); 45 let click = new test_driver.Actions() 46 .pointerMove(x, y) 47 .pointerDown() 48 .pointerUp(); 49 await click.send(); 50 await promise; 51 } 52 53 promise_test(async () => { 54 await hit_test(50, 50, "parent"); 55 await hit_test(50, 150, "child2"); 56 await hit_test(50, 250, "parent"); 57 }, "Hit test preserve-3d descendant"); 58 </script> 59 </body> 60 </html>