preserve3d-backface-hit-test-2.html (1486B)
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 39 .yellow100 { 40 width: 100%; 41 height: 100%; 42 background: yellow; 43 } 44 </style> 45 46 <body> 47 48 <div class="container"> 49 <div class="rotatetoback" > 50 <div class="hideback rotatetofront" style="background: blue"> 51 </div> 52 <div class="hideback" style="background: green;"> 53 <div id="target" class="yellow100"></div> 54 </div> 55 </div> 56 </div> 57 58 </body> 59 60 <script> 61 62 test(t => { 63 const expectedElemId = "target"; 64 const expectedElem = document.getElementById(expectedElemId); 65 const x = 150; 66 const y = 150; 67 const hitElem = document.elementFromPoint(x, y); 68 assert_equals(hitElem, expectedElem, 69 `point (${x}, ${y}) is inside element ${expectedElemId}`); 70 }, `${document.title}, hittesting`); 71 72 </script> 73 74 </html>