1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
<!DOCTYPE html>
<title>Hit test overlapping elements</title>
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint">
<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>
|
