3d-point-mapping-3.html (2510B)
1 <!DOCTYPE html> 2 <title>Point mapping through 3D transform hierarchies</title> 3 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <style type="text/css" media="screen"> 8 #scene { 9 position: absolute; 10 border: 1px solid black; 11 height: 400px; 12 width: 400px; 13 perspective: 600px; 14 transform-style: preserve-3d; 15 } 16 17 #container { 18 position: absolute; 19 height: 300px; 20 width: 300px; 21 margin: 50px; 22 border: 1px solid blue; 23 transform-style: preserve-3d; 24 } 25 26 #card { 27 position: absolute; 28 top: 50px; 29 left: 50px; 30 height: 200px; 31 width: 200px; 32 background-color: #81AA8A; 33 transform-origin: right top; 34 transform: rotateY(45deg); 35 } 36 37 #card:hover { 38 background-color: orange; 39 } 40 </style> 41 42 <body> 43 <div id="scene"> 44 <div id="container"> 45 <div id="card"></div> 46 </div> 47 </div> 48 </body> 49 50 <script> 51 class Point { 52 constructor(x, y) { 53 this.x = x; 54 this.y = y; 55 } 56 }; 57 const tests = [{ 58 expectedElemId: 'card', 59 // Points inside the 3D-transformed element 60 insidePoints: [ 61 new Point(160, 85), // Top-left 62 new Point(306, 113), // Top-right 63 new Point(160, 335), // Bottom-left 64 new Point(307, 307), // Bottom-right 65 ], 66 // Points outside the 3D-transformed element 67 outsidePoints: [ 68 new Point(115, 115), // Inside top-left when untransformed 69 new Point(115, 300), // Inside bottom-left when untransformed 70 ] 71 } 72 ]; 73 74 tests.forEach(testcase => { 75 test(t => { 76 const expectedElem = document.getElementById(testcase.expectedElemId); 77 // Test points that should hit the element 78 for (const point of testcase.insidePoints) { 79 const hitElem = document.elementFromPoint(point.x, point.y); 80 assert_equals(hitElem, expectedElem, 81 `point (${point.x}, ${point.y}) should be inside element ${testcase.expectedElemId}`); 82 } 83 // Test points that should NOT hit the element 84 for (const point of testcase.outsidePoints) { 85 const hitElem = document.elementFromPoint(point.x, point.y); 86 assert_not_equals(hitElem, expectedElem, 87 `point (${point.x}, ${point.y}) should be outside element ${testcase.expectedElemId}`); 88 } 89 }, `${document.title}, hittesting ${testcase.expectedElemId})`); 90 }); 91 </script> 92 93 </html>