3d-point-mapping.html (5149B)
1 <!DOCTYPE html> 2 <title>Point mapping through 3D transforms</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 body { 9 margin: 0; 10 } 11 12 .test { 13 position: absolute; 14 height: 200px; 15 width: 200px; 16 border: 1px solid black; 17 margin: 20px; 18 } 19 20 .test.one { top: 1px; left: 1px; } 21 .test.two { top: 1px; left: 247px; } 22 .test.three { top: 247px; left: 1px; } 23 .test.four { top: 247px; left: 247px; } 24 25 #box1, #box5, #box8, #box11 { 26 height: 140px; 27 width: 140px; 28 margin: 20px; 29 background-color: #DDD; 30 border: 1px solid black; 31 box-sizing: border-box; 32 perspective: 400px; 33 } 34 35 #box2, #box6, #box9, #box12 { 36 position: relative; 37 height: 100px; 38 width: 100px; 39 padding: 20px; 40 margin: 20px; 41 background-color: #AAA; 42 box-sizing: border-box; 43 transform: translateZ(100px) rotateY(-40deg); 44 border: 1px solid black; 45 } 46 47 #box7, #box10, #box13, #box14 { 48 height: 100px; 49 width: 100px; 50 background-color: blue; 51 border: 1px solid black; 52 box-sizing: border-box; 53 } 54 55 #box10, #box14 { 56 position: relative; 57 } 58 59 #box13 { 60 padding: 20px; 61 background-color: #C0D69E; 62 } 63 64 [id^="box"]:hover { 65 outline: 3px solid orange; 66 } 67 68 </style> 69 70 <body> 71 72 <div class="test one"> 73 <!-- Simple transformed div in perspective --> 74 <div id="box1"> 75 <div id="box2"> 76 </div> 77 </div> 78 </div> 79 80 <div class="test two"> 81 <!-- Transformed div in perspective with non-layer child --> 82 <div id="box5"> 83 <div id="box6"> 84 <div id="box7"> 85 </div> 86 </div> 87 </div> 88 </div> 89 90 <div class="test three"> 91 <!-- Transformed div in perspective with layer child --> 92 <div id="box8"> 93 <div id="box9"> 94 <div id="box10"> 95 </div> 96 </div> 97 </div> 98 </div> 99 100 <div class="test four"> 101 <!-- Transformed div in perspective with child having layer child --> 102 <div id="box11"> 103 <div id="box12"> 104 <div id="box13"> 105 <div id="box14"> 106 </div> 107 </div> 108 </div> 109 </div> 110 </div> 111 </body> 112 113 <script> 114 class Point { 115 constructor(x, y) { 116 this.x = x; 117 this.y = y; 118 } 119 }; 120 // Each test case defines four test points near the corners of an element. 121 // - Point 1: Top-left 122 // - Point 2: Top-right 123 // - Point 3: Bottom-left 124 // - Point 4: Bottom-right 125 const tests = [{ 126 expectedElemId: 'box1', 127 points: [ 128 new Point(50, 45), 129 new Point(175, 45), 130 new Point(50, 175), 131 new Point(175, 175), 132 ] 133 }, 134 { 135 expectedElemId: 'box2', 136 points: [ 137 new Point(75, 55), 138 new Point(166, 41), 139 new Point(70, 167), 140 new Point(165, 183), 141 ] 142 }, 143 { 144 expectedElemId: 'box5', 145 points: [ 146 new Point(292, 45), 147 new Point(422, 46), 148 new Point(294, 175), 149 new Point(323, 176), 150 ] 151 }, 152 { 153 expectedElemId: 'box6', 154 points: [ 155 new Point(316, 53), 156 new Point(412, 41), 157 new Point(318, 167), 158 new Point(326, 171), 159 ] 160 }, 161 { 162 expectedElemId: 'box7', 163 points: [ 164 new Point(336, 77), 165 new Point(438, 74), 166 new Point(338, 192), 167 new Point(439, 213), 168 ] 169 }, 170 { 171 expectedElemId: 'box8', 172 points: [ 173 new Point(47, 291), 174 new Point(177, 295), 175 new Point(49, 421), 176 new Point(80, 424), 177 ] 178 }, 179 { 180 expectedElemId: 'box9', 181 points: [ 182 new Point(72, 302), 183 new Point(165, 290), 184 new Point(72, 414), 185 new Point(82, 417), 186 ] 187 }, 188 { 189 expectedElemId: 'box10', 190 points: [ 191 new Point(91, 326), 192 new Point(194, 318), 193 new Point(88, 445), 194 new Point(195, 469), 195 ] 196 }, 197 { 198 expectedElemId: 'box11', 199 points: [ 200 new Point(294, 292), 201 new Point(422, 292), 202 new Point(293, 424), 203 new Point(327, 425), 204 ] 205 }, 206 { 207 expectedElemId: 'box12', 208 points: [ 209 new Point(318, 302), 210 new Point(413, 288), 211 new Point(317, 416), 212 new Point(329, 417), 213 ] 214 }, 215 { 216 expectedElemId: 'box13', 217 points: [ 218 new Point(335, 325), 219 new Point(440, 319), 220 new Point(336, 444), 221 new Point(349, 448), 222 ] 223 }, 224 { 225 expectedElemId: 'box14', 226 points: [ 227 new Point(355, 351), 228 new Point(468, 354), 229 new Point(356, 475), 230 new Point(473, 506), 231 ] 232 } 233 ]; 234 235 tests.forEach(testcase => { 236 test(t => { 237 const expectedElem = document.getElementById(testcase.expectedElemId); 238 for (const point of testcase.points) { 239 const hitElem = document.elementFromPoint(point.x, point.y); 240 assert_equals(hitElem, expectedElem, 241 `point (${point.x}, ${point.y}) is inside element ${testcase.expectedElemId}`); 242 } 243 }, `${document.title}, hittesting ${testcase.expectedElemId})`); 244 }); 245 </script> 246 247 </html>