mozilla-central/testing/web-platform/tests/css/css-transforms/3d-point-mapping-2-transforminterop.html

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

<!DOCTYPE html>
<title>More point mapping through 3D transform hierarchies</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style type="text/css" media="screen">
body {
margin: 0;
border: 1px solid black;
}
.test {
display: inline-block;
height: 200px;
width: 200px;
border: 1px solid black;
margin: 20px;
}
#box1, #box5, #box9 {
height: 140px;
width: 140px;
margin: 20px;
background-color: #DDD;
border: 1px solid black;
box-sizing: border-box;
perspective: 400px;
}
#box2, #box6, #box10 {
position: relative;
height: 100px;
width: 100px;
padding: 20px;
margin: 20px;
border: 1px solid black;
background-color: #81AA8A;
transform-style: preserve-3d;
transform: rotateY(-30deg);
box-sizing: border-box;
}
#box3 {
position: relative;
height: 100px;
width: 100px;
padding: 20px;
margin: 20px;
border: 1px solid black;
background-color: #81AA8A;
transform-style: preserve-3d;
box-sizing: border-box;
}
#box4, #box8, #box12 {
height: 90px;
width: 90px;
background-color: blue;
border: 1px solid black;
box-sizing: border-box;
transform: rotateY(30deg);
}
#box7 {
position: relative;
padding-left: 20px;
height: 100px;
width: 100px;
box-sizing: border-box;
background-color: #DDD;
border: 1px solid black;
}
#box11 {
padding-left: 20px;
height: 100px;
width: 100px;
box-sizing: border-box;
background-color: #DDD;
border: 1px solid black;
}
[id^="box"]:hover {
outline: 3px solid orange;
}
</style>
<body>
<div class="test">
<!-- preserve-3d element with no transform-->
<div id="box1">
<div id="box2">
<div id="box3">
<div id="box4">
</div>
</div>
</div>
</div>
</div>
<div class="test">
<!-- layer with no transform-->
<div id="box5">
<div id="box6">
<div id="box7">
<div id="box8">
</div>
</div>
</div>
</div>
</div>
<div class="test">
<!-- non-layer with no transform-->
<div id="box9">
<div id="box10">
<div id="box11">
<div id="box12">
</div>
</div>
</div>
</div>
</div>
<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 area.
// - Point 1: Top-left
// - Point 2: Top-right
// - Point 3: Bottom-left
// - Point 4: Bottom-right
const tests = [{
expectedElemId: 'box1',
points: [
new Point(68, 66), // Hits box1 due to box2's transformation.
new Point(175, 45),
new Point(62, 155), // Hits box1 due to box2's transformation.
new Point(100, 175),
]
},
{
expectedElemId: 'box2',
points: [
new Point(75, 70),
new Point(155, 63),
new Point(75, 155),
new Point(100, 156), // Hits box2 due to box3 preserving parent's transformed space.
]
},
{
expectedElemId: 'box3',
points: [
new Point(108, 106),
new Point(198, 106),
new Point(108, 198),
// Bottom-right area is overlapped by box4.
]
},
{
expectedElemId: 'box4',
points: [
new Point(120, 128), // Hits box3 if box4 were untransformed.
new Point(210, 128),
new Point(120, 198), // Hits box3 if box4 were untransformed.
new Point(210, 215),
]
},
{
expectedElemId: 'box5',
points: [
new Point(312, 67), // Hits box5 due to box6's transformation.
new Point(423, 47),
new Point(312, 155), // Hits box5 due to box6's transformation.
new Point(331, 175), // Hits box5 due to box7 preserving parent's transformed space.
]
},
{
expectedElemId: 'box6',
points: [
new Point(328, 86), // Hits box6 due to box7 preserving parent's transformed space.
new Point(400, 63),
new Point(328, 151), // Hits box6 due to box7 preserving parent's transformed space.
// The bottom-right area is overlapped by box7.
]
},
{
expectedElemId: 'box7',
points: [
new Point(354, 87), // Hits box7 due to box8's transformation.
// The top-right area is overlapped by box8.
new Point(354, 171), // Hits box7 due to box8's transformation.
new Point(421, 185),
]
},
{
expectedElemId: 'box8',
points: [
new Point(359, 87),
new Point(428, 84),
new Point(359, 168),
new Point(428, 175),
]
},
{
expectedElemId: 'box9',
points: [
new Point(556, 65), // Hits box9 due to box10's transformation.
new Point(669, 46),
new Point(556, 157), // Hits box9 due to box10's transformation.
new Point(576, 174), // Hits box9 due to box11 preserving parent's transformed space.
]
},
{
expectedElemId: 'box10',
points: [
new Point(568, 69),
new Point(646, 62),
new Point(568, 153),
new Point(576, 154), // Hits box10 due to box11 preserving parent's transformed space.
]
},
{
expectedElemId: 'box11',
points: [
new Point(600, 87), // Hits box11 due to box12's transformation.
// The top-right area is overlapped by box12.
new Point(600, 170),
new Point(669, 185),
]
},
{
expectedElemId: 'box12',
points: [
new Point(605, 87),
new Point(673, 85),
new Point(605, 170),
new Point(675, 175),
]
}
];
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>