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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
<!DOCTYPE html>
<title>pointer-events: bounding-box</title>
<link rel="help" href="https://svgwg.org/svg2-draft/interact.html#PointerEventsProp">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style type="text/css">
#svgRoot {
margin: 0px;
padding: 0px;
position: absolute;
top: 0px;
left: 0px;
font: 10px/1 Ahem;
}
.test { fill: blue; pointer-events: bounding-box; }
.test:hover { fill: green; visibility: visible; }
</style>
<svg id="svgRoot" width="800px" height="360px" viewBox="0 0 800 360" opacity="0">
<g class="test" id="test1" transform="rotate(15)">
<circle id="circle1" cx="50" cy="50" r="10"/>
<circle cx="150" cy="150" r="10"/>
</g>
<circle class="test" id="circle2" cx="400" cy="150" r="50" visibility="hidden"/>
<text class="test" id="text1" x="100" y="20">Text should change color when mouse is within <tspan id="tspan1" dy="3em">the bbox.</tspan></text>
<text class="test" id="text2" x="150" y="100" transform="rotate(15)">Text should change color when mouse is within <tspan id="tspan2" dy="3em">the bbox.</tspan></text>
<text class="test" id="text3" x="200" y="280" transform="rotate(5)">Text should end here.<tspan id="tspan3" dy="2em" display="none">invisible</tspan></text>
<image class="test" id="image1" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 30'><rect x='10' y='10' width='20' height='10' fill='blue'/></svg>"
width="50" height="30" visibility="hidden" transform="translate(0,200)"/>
</svg>
<script>
const group1 = document.getElementById("test1");
const circle1 = document.getElementById("circle1");
const circle2 = document.getElementById("circle2");
const text1 = document.getElementById("text1");
const tspan1 = document.getElementById("tspan1");
const text2 = document.getElementById("text2");
const tspan2 = document.getElementById("tspan2");
const text3 = document.getElementById("text3");
const tspan3 = document.getElementById("tspan3");
const image1 = document.getElementById("image1");
const pointsOnCircle1 = [
{x: 36, y: 60},
{x: 42, y: 67}
];
const pointsNotOnCircle1 = [
{x: 50, y: 50},
{x: 50, y: 55}
];
const pointsInsideBBoxOfCircle1 = [
{x: 100, y: 100},
{x: 137, y: 84},
{x: 51, y: 156},
{x:70, y:120}
];
const pointsOnCircle2 = [
{x: 400, y: 150},
{x: 432, y: 182},
{x: 361, y: 122}
];
const pointsInsideBBoxOfCircle2 = [
{x: 438, y: 103},
{x: 450, y: 200}
];
const pointsOnText1 = [
{x: 134, y: 16}
];
const pointsOnTspan1 = [
{x: 579, y: 46}
];
const pointsNotOnText1 = [
{x: 395, y: 73},
{x: 74, y: 5}
];
const pointsInsideBBoxOfText1 = [
{x: 435, y: 32},
{x: 115, y: 46}
];
const pointsOnText2 = [
{x: 178, y: 146}
];
const pointsOnTspan2 = [
{x: 568, y: 283}
];
const pointsNotOnText2 = [
{x: 319, y: 161},
{x: 179, y: 131}
];
const pointsInsideBBoxOfText2 = [
{x: 295, y: 214},
{x: 444, y: 222}
];
const pointsOnText3 = [
{x: 198, y: 291},
{x: 286, y: 301}
];
const pointsNotOnText3 = [
{x: 302, y: 337},
{x: 348, y: 335}
];
const pointsOnImage1 = [
{x: 19, y: 215},
{x: 45, y: 225}
];
function hitTest(point, element, shouldContain, optionalLabel) {
const label = optionalLabel || element.id;
test(() => {
const contain = element.contains(document.elementFromPoint(point.x, point.y));
if (shouldContain)
assert_true(contain);
else
assert_false(contain);
}, `${label} ${shouldContain ? 'contains' : 'does not contain'} point at (${point.x}, ${point.y})`);
}
setup({ explicit_done: true });
document.fonts.ready.then(() => {
pointsOnCircle1.forEach(point => hitTest(point, circle1, true));
pointsNotOnCircle1.forEach(point => hitTest(point, circle1, false));
pointsInsideBBoxOfCircle1.forEach(point => hitTest(point, group1, true, 'group1'));
pointsOnCircle2.forEach(point => hitTest(point, circle2, true));
pointsInsideBBoxOfCircle2.forEach(point => hitTest(point, circle2, true, 'bbox of circle2'));
pointsOnText1.forEach(point => hitTest(point, text1, true));
pointsOnTspan1.forEach(point => hitTest(point, tspan1, true));
pointsNotOnText1.forEach(point => hitTest(point, text1, false));
pointsInsideBBoxOfText1.forEach(point => hitTest(point, text1, true, 'bbox of text1'));
pointsOnText2.forEach(point => hitTest(point, text2, true));
pointsOnTspan2.forEach(point => hitTest(point, tspan2, true));
pointsNotOnText2.forEach(point => hitTest(point, text2, false));
pointsInsideBBoxOfText2.forEach(point => hitTest(point, text2, true, 'bbox of text2'));
pointsOnText3.forEach(point => hitTest(point, text3, true));
pointsNotOnText3.forEach(point => hitTest(point, text3, false));
pointsOnImage1.forEach(point => hitTest(point, image1, true));
done();
});
</script>
|
