Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-transforms/transform-hit-testing.html - WPT Dashboard Interop Dashboard
<!DOCTYPE HTML>
<title>CSS Test (Transforms): Hit Testing</title>
<meta name="flags" content="dom">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border: none;
}
body { margin: 50px; }
</style>
<script>
let body_x_margin = 50;
let body_y_margin = 50;
</script>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<script>
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
let simple_tests = [
// In this list of tests, test_points_inside and test_points_outside
// are relative to the element's untransformed origin (top, left).
{
description: "rectangle with 'translate' and 'rotate'",
styles: "width: 100px; height: 50px; translate: 30px; rotate: 20deg;",
test_points_inside: [
new Point(28, 32),
new Point(44, -10),
new Point(133, 22),
new Point(117, 64),
new Point(65, 27),
],
test_points_outside: [
new Point(30, 5),
new Point(28, 37),
new Point(100, 2),
new Point(124, 58),
],
},
{
description: "rectangle with 'transform'",
styles: "width: 100px; height: 50px; transform: translate(30px) rotate(20deg);",
test_points_inside: [
new Point(28, 32),
new Point(44, -10),
new Point(133, 22),
new Point(117, 64),
new Point(65, 27),
],
test_points_outside: [
new Point(30, 5),
new Point(28, 37),
new Point(100, 2),
new Point(124, 58),
],
},
{
description: "rectangle with 'translate' and 'rotate' and 'scale' and 'transform'",
styles: "width: 100px; height: 50px; translate: 30px; rotate: 40deg; scale: 2; transform: rotate(-20deg) scale(0.5)",
test_points_inside: [
new Point(28, 32),
new Point(44, -10),
new Point(133, 22),
new Point(117, 64),
new Point(65, 27),
],
test_points_outside: [
new Point(30, 5),
new Point(28, 37),
new Point(100, 2),
new Point(124, 58),
],
},
{
description: "square with 'rotate'",
styles: "width: 10px; height: 10px; rotate: 90deg; transform-origin: 0 10px",
test_points_inside: [
new Point(1, 11),
new Point(9, 11),
new Point(1, 19),
new Point(9, 19),
],
test_points_outside: [
new Point(1, 9),
new Point(9, 9),
],
},
{
description: "square with 'scale'",
styles: "width: 10px; height: 10px; scale: 0.2;",
test_points_inside: [
new Point(4, 4),
new Point(5, 4),
new Point(4, 5),
new Point(5, 5),
],
test_points_outside: [
new Point(3, 3),
new Point(3, 5),
new Point(3, 6),
new Point(5, 3),
new Point(5, 6),
new Point(6, 3),
new Point(6, 5),
new Point(6, 6),
],
},
];
for (let t of simple_tests) {
test(function() {
let e = document.createElement("div");
e.setAttribute("style", t.styles);
document.body.appendChild(e);
for (let p of t.test_points_inside) {
let res = document.elementFromPoint(p.x + body_x_margin,
p.y + body_y_margin);
assert_equals(res, e,
`point (${p.x}, ${p.y}) is inside element`);
}
for (let p of t.test_points_outside) {
let res = document.elementFromPoint(p.x + body_x_margin,
p.y + body_y_margin);
assert_equals(res, document.body,
`point (${p.x}, ${p.y}) is outside element`);
}
e.remove();
}, `hit testing of ${t.description}`);
}
</script>