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.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Point mapping through 3D transforms</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style type="text/css" media="screen">
body {
margin: 0;
}
.test {
position: absolute;
height: 200px;
width: 200px;
border: 1px solid black;
margin: 20px;
}
.test.one { top: 1px; left: 1px; }
.test.two { top: 1px; left: 247px; }
.test.three { top: 247px; left: 1px; }
.test.four { top: 247px; left: 247px; }
#box1, #box5, #box8, #box11 {
height: 140px;
width: 140px;
margin: 20px;
background-color: #DDD;
border: 1px solid black;
box-sizing: border-box;
perspective: 400px;
}
#box2, #box6, #box9, #box12 {
position: relative;
height: 100px;
width: 100px;
padding: 20px;
margin: 20px;
background-color: #AAA;
box-sizing: border-box;
transform: translateZ(100px) rotateY(-40deg);
border: 1px solid black;
}
#box7, #box10, #box13, #box14 {
height: 100px;
width: 100px;
background-color: blue;
border: 1px solid black;
box-sizing: border-box;
}
#box10, #box14 {
position: relative;
}
#box13 {
padding: 20px;
background-color: #C0D69E;
}
[id^="box"]:hover {
outline: 3px solid orange;
}
</style>
<body>
<div class="test one">
<!-- Simple transformed div in perspective -->
<div id="box1">
<div id="box2">
</div>
</div>
</div>
<div class="test two">
<!-- Transformed div in perspective with non-layer child -->
<div id="box5">
<div id="box6">
<div id="box7">
</div>
</div>
</div>
</div>
<div class="test three">
<!-- Transformed div in perspective with layer child -->
<div id="box8">
<div id="box9">
<div id="box10">
</div>
</div>
</div>
</div>
<div class="test four">
<!-- Transformed div in perspective with child having layer child -->
<div id="box11">
<div id="box12">
<div id="box13">
<div id="box14">
</div>
</div>
</div>
</div>
</div>
</body>
<script>
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
};
// Each test case defines four test points near the corners of an element.
// - Point 1: Top-left
// - Point 2: Top-right
// - Point 3: Bottom-left
// - Point 4: Bottom-right
const tests = [{
expectedElemId: 'box1',
points: [
new Point(50, 45),
new Point(175, 45),
new Point(50, 175),
new Point(175, 175),
]
},
{
expectedElemId: 'box2',
points: [
new Point(75, 55),
new Point(166, 41),
new Point(70, 167),
new Point(165, 183),
]
},
{
expectedElemId: 'box5',
points: [
new Point(292, 45),
new Point(422, 46),
new Point(294, 175),
new Point(323, 176),
]
},
{
expectedElemId: 'box6',
points: [
new Point(316, 53),
new Point(412, 41),
new Point(318, 167),
new Point(326, 171),
]
},
{
expectedElemId: 'box7',
points: [
new Point(336, 77),
new Point(438, 74),
new Point(338, 192),
new Point(439, 213),
]
},
{
expectedElemId: 'box8',
points: [
new Point(47, 291),
new Point(177, 295),
new Point(49, 421),
new Point(80, 424),
]
},
{
expectedElemId: 'box9',
points: [
new Point(72, 302),
new Point(165, 290),
new Point(72, 414),
new Point(82, 417),
]
},
{
expectedElemId: 'box10',
points: [
new Point(91, 326),
new Point(194, 318),
new Point(88, 445),
new Point(195, 469),
]
},
{
expectedElemId: 'box11',
points: [
new Point(294, 292),
new Point(422, 292),
new Point(293, 424),
new Point(327, 425),
]
},
{
expectedElemId: 'box12',
points: [
new Point(318, 302),
new Point(413, 288),
new Point(317, 416),
new Point(329, 417),
]
},
{
expectedElemId: 'box13',
points: [
new Point(335, 325),
new Point(440, 319),
new Point(336, 444),
new Point(349, 448),
]
},
{
expectedElemId: 'box14',
points: [
new Point(355, 351),
new Point(468, 354),
new Point(356, 475),
new Point(473, 506),
]
}
];
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>