transform-hit-testing.html (3935B)
1 <!DOCTYPE HTML> 2 <title>CSS Test (Transforms): Hit Testing</title> 3 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 4 <link rel="author" title="Google" href="http://www.google.com/"> 5 <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#transform-property"> 6 <link rel="help" href="https://www.w3.org/TR/css-transforms-2/#individual-transforms"> 7 <meta name="flags" content="dom"> 8 <style> 9 10 html, body { 11 height: 100%; 12 width: 100%; 13 margin: 0; 14 padding: 0; 15 border: none; 16 } 17 18 body { margin: 50px; } 19 20 </style> 21 <script> 22 23 let body_x_margin = 50; 24 let body_y_margin = 50; 25 26 </script> 27 <script src="/resources/testharness.js"></script> 28 <script src="/resources/testharnessreport.js"></script> 29 30 <body> 31 <script> 32 33 class Point { 34 constructor(x, y) { 35 this.x = x; 36 this.y = y; 37 } 38 } 39 40 let simple_tests = [ 41 // In this list of tests, test_points_inside and test_points_outside 42 // are relative to the element's untransformed origin (top, left). 43 { 44 description: "rectangle with 'translate' and 'rotate'", 45 styles: "width: 100px; height: 50px; translate: 30px; rotate: 20deg;", 46 test_points_inside: [ 47 new Point(28, 32), 48 new Point(44, -10), 49 new Point(133, 22), 50 new Point(117, 64), 51 new Point(65, 27), 52 ], 53 test_points_outside: [ 54 new Point(30, 5), 55 new Point(28, 37), 56 new Point(100, 2), 57 new Point(124, 58), 58 ], 59 }, 60 { 61 description: "rectangle with 'transform'", 62 styles: "width: 100px; height: 50px; transform: translate(30px) rotate(20deg);", 63 test_points_inside: [ 64 new Point(28, 32), 65 new Point(44, -10), 66 new Point(133, 22), 67 new Point(117, 64), 68 new Point(65, 27), 69 ], 70 test_points_outside: [ 71 new Point(30, 5), 72 new Point(28, 37), 73 new Point(100, 2), 74 new Point(124, 58), 75 ], 76 }, 77 { 78 description: "rectangle with 'translate' and 'rotate' and 'scale' and 'transform'", 79 styles: "width: 100px; height: 50px; translate: 30px; rotate: 40deg; scale: 2; transform: rotate(-20deg) scale(0.5)", 80 test_points_inside: [ 81 new Point(28, 32), 82 new Point(44, -10), 83 new Point(133, 22), 84 new Point(117, 64), 85 new Point(65, 27), 86 ], 87 test_points_outside: [ 88 new Point(30, 5), 89 new Point(28, 37), 90 new Point(100, 2), 91 new Point(124, 58), 92 ], 93 }, 94 { 95 description: "square with 'rotate'", 96 styles: "width: 10px; height: 10px; rotate: 90deg; transform-origin: 0 10px", 97 test_points_inside: [ 98 new Point(1, 11), 99 new Point(9, 11), 100 new Point(1, 19), 101 new Point(9, 19), 102 ], 103 test_points_outside: [ 104 new Point(1, 9), 105 new Point(9, 9), 106 ], 107 }, 108 { 109 description: "square with 'scale'", 110 styles: "width: 10px; height: 10px; scale: 0.2;", 111 test_points_inside: [ 112 new Point(4, 4), 113 new Point(5, 4), 114 new Point(4, 5), 115 new Point(5, 5), 116 ], 117 test_points_outside: [ 118 new Point(3, 3), 119 new Point(3, 5), 120 new Point(3, 6), 121 new Point(5, 3), 122 new Point(5, 6), 123 new Point(6, 3), 124 new Point(6, 5), 125 new Point(6, 6), 126 ], 127 }, 128 ]; 129 130 for (let t of simple_tests) { 131 test(function() { 132 let e = document.createElement("div"); 133 e.setAttribute("style", t.styles); 134 document.body.appendChild(e); 135 136 for (let p of t.test_points_inside) { 137 let res = document.elementFromPoint(p.x + body_x_margin, 138 p.y + body_y_margin); 139 assert_equals(res, e, 140 `point (${p.x}, ${p.y}) is inside element`); 141 } 142 143 for (let p of t.test_points_outside) { 144 let res = document.elementFromPoint(p.x + body_x_margin, 145 p.y + body_y_margin); 146 assert_equals(res, document.body, 147 `point (${p.x}, ${p.y}) is outside element`); 148 } 149 150 e.remove(); 151 }, `hit testing of ${t.description}`); 152 } 153 </script>