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/3d-point-mapping-overlapping.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Hit test overlapping elements</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style type="text/css" media="screen">
body {
margin: 0;
}
#box1 {
position: absolute;
height: 300px;
width: 300px;
background-color: #DDD;
}
#box2 {
position: absolute;
top: 50px;
left: 50px;
height: 200px;
width: 200px;
background-color: #AAA;
transform: translateZ(50px);
}
#box3 {
position: relative;
background-color: blue;
height: 100px;
width: 100px;
margin: 50px;
}
#overlay {
position: absolute;
height: 310px;
width: 150px;
background-color: rgba(0, 128, 0, 0.3);
transform: translateZ(100px);
}
</style>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
<div id="overlay"></div>
</div>
</body>
<script>
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
};
const tests = [{
expectedElemId: 'box1',
points: [
new Point(151, 254),
new Point(152, 47),
new Point(288, 13),
new Point(289, 283),
]
},
{
expectedElemId: 'box2',
points: [
new Point(158, 229),
new Point(206, 220),
new Point(223, 158),
new Point(157, 57),
]
},
{
expectedElemId: 'box3',
points: [
new Point(157, 191),
new Point(193, 190),
new Point(196, 103),
new Point(152, 108),
]
},
{
// Two points over every box.
expectedElemId: 'overlay',
points: [
new Point(132, 178),
new Point(125, 113),
new Point(81, 67),
new Point(92, 223),
new Point(32, 270),
new Point(28, 21),
]
}
];
tests.forEach(testcase => {
test(t => {
const expectedElem = document.getElementById(testcase.expectedElemId);
for (const point of testcase.points) {
const hitElem = document.elementFromPoint(point.x, point.y);
assert_equals(hitElem, expectedElem,
`point (${point.x}, ${point.y}) is inside element ${testcase.expectedElemId}`);
}
}, `${document.title}, hittesting ${testcase.expectedElemId})`);
});
</script>
</html>