preserve3d-backface-hit-test-1.html (1371B)
1 <!DOCTYPE html> 2 <title>Hit test back face hidden preserve3d</title> 3 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#backface-visibility-property"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <style> 8 body { 9 margin: 0; 10 } 11 12 .container { 13 position: absolute; 14 top: 50px; 15 left: 50px; 16 perspective: 600px; 17 width: 200px; 18 height: 200px; 19 } 20 21 .rotatetoback { 22 width: 100%; 23 height: 100%; 24 transform-style: preserve-3d; 25 transform: rotateY(-180deg); 26 } 27 28 .hideback { 29 position: absolute; 30 width: 100%; 31 height: 100%; 32 backface-visibility: hidden; 33 } 34 35 .rotatetofront { 36 transform: rotateY(180deg); 37 } 38 </style> 39 40 <body> 41 42 <div class="container"> 43 <div class="rotatetoback" > 44 <div id="target" class="hideback rotatetofront" style="background: blue"> 45 </div> 46 <div class="hideback" style="background: green;"> 47 </div> 48 </div> 49 </div> 50 51 </body> 52 53 <script> 54 55 test(t => { 56 const expectedElemId = "target"; 57 const expectedElem = document.getElementById(expectedElemId); 58 const x = 150; 59 const y = 150; 60 const hitElem = document.elementFromPoint(x, y); 61 assert_equals(hitElem, expectedElem, 62 `point (${x}, ${y}) is inside element ${expectedElemId}`); 63 }, `${document.title}, hittesting`); 64 65 </script> 66 67 </html>