Google Git
Sign in
webkit / WebKit / e43e0344965a2aedccac88ea882f5fedd247f668 / . / LayoutTests / fast / events / pointer-events-2.html
blob: 589e88bf8fdf61f56062c4c1f98a811f8ba29802 [file] [log] [blame]
dino@apple.com563bd1f2009-01-06 02:35:06 +0000[diff] [blame]1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3<html>
4<head>
5 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
6 <title>Test for pointer-events property</title>
7 <style type="text/css" media="screen">
8
9 .row {
10 position: absolute;
11 width: 300px;
12 height: 100px;
13 left: 10px;
14 }
15
16 .row1 { top: 140px; }
17 .row2 { top: 240px; }
18 .row3 { top: 340px; }
19 .row4 { top: 440px; }
20 .row5 { top: 540px; }
21 .row6 { top: 140px; left: 340px;}
22 .row7 { top: 240px; left: 340px;}
23 .row8 { top: 340px; left: 340px;}
24 .row9 { top: 440px; left: 340px;}
25 .row10 { top: 540px; left: 340px; }
26
27 .col {
28 position: absolute;
29 width: 80px;
30 height: 80px;
31 top: 0;
32 }
33
34 .col1 {
35 left: 0px;
36 }
37
38 .col2 {
39 left: 100px;
40 }
41
42 .col3 {
43 left: 200px;
44 }
45
46 div, p {
47 font-size: 16px;
48 }
49
50 div p {
51 padding: 0;
52 margin: 0;
53 position: absolute;
54 width: 80px;
55 height: 80px;
56 }
57
58 #p1 {
59 background: gray;
60 }
61
62 #p2 {
63 background: gray;
64 pointer-events: none;
65 }
66
67 #p3 {
68 background: gray;
69 pointer-events: none;
70 }
71
72 #p4 {
73 pointer-events: auto;
74 }
75
76 #p5 {
77 background: gray;
78 pointer-events: auto;
79 }
80
81 #p6 {
82 pointer-events: none;
83 }
84
85 #p7 { /* this is a div - not a p */
86 pointer-events: auto;
87 padding: 0;
88 margin: 0;
89 position: absolute;
90 width: 80px;
91 height: 80px;
92 }
93
94 #p8 {
95 background: gray;
96 pointer-events: none;
97 }
98
99 #p9 { /* this is a div - not a p */
100 pointer-events: none;
101 padding: 0;
102 margin: 0;
103 position: absolute;
104 width: 80px;
105 height: 80px;
106 }
107
108 #p10 {
109 background: gray;
110 pointer-events: auto;
111 }
112
113 #p11 {
114 position: absolute;
115 margin: 0;
116 padding: 0;
117 pointer-events: auto;
118 width: 80px;
119 height: 80px;
120 }
121
122 #p12 {
123 position: absolute;
124 margin: 0;
125 padding: 0;
126 pointer-events: none;
127 width: 80px;
128 height: 80px;
129 }
130
131 #p13 {
132 background: gray;
133 pointer-events: none;
134 }
135
136 #p14 {
137 background: yellow;
138 pointer-events: auto;
139 }
140
141 #p15 {
142 background: gray;
143 pointer-events: auto;
144 }
145
146 #p16 {
147 background: yellow;
148 pointer-events: none;
149 }
150
151
152 </style>
153 <script>
rniwa@webkit.orgada3c202012-06-20 03:28:42 +0000[diff] [blame]154 if (window.testRunner) {
155 testRunner.waitUntilDone();
dino@apple.com563bd1f2009-01-06 02:35:06 +0000[diff] [blame]156 }
157
158 var pointerEventsValues = ['auto', 'none'];
159
160 var topEdge = 140;
161
162 function clickHit(event) {
163 // iterate up to the containing row
164 var parent = event.target;
165 while (parent && (!parent.className || !parent.className.match(/^row/))) {
166 parent = parent.parentNode;
167 }
168 if (parent && parent.className && parent.className.match(/^row/)) {
169 var actual = parent.querySelector(".col3");
170 if (actual && event.target.id)
171 actual.innerText = event.target.id;
172 }
173 }
174
175 function testContent() {
176
177 // hit left side
178 var yOffset = topEdge;
179 for (var i=0; i < 5; i++) {
180 if (window.eventSender) {
181 eventSender.mouseMoveTo(15, yOffset + 5);
182 eventSender.mouseDown();
183 eventSender.mouseUp();
184 }
185 yOffset += 100;
186 }
187
188 // hit right side
189 yOffset = topEdge;
190 for (var i=0; i < 5; i++) {
191 if (window.eventSender) {
192 eventSender.mouseMoveTo(345, yOffset + 5);
193 eventSender.mouseDown();
194 eventSender.mouseUp();
195 }
196 yOffset += 100;
197 }
198
rniwa@webkit.orgada3c202012-06-20 03:28:42 +0000[diff] [blame]199 if (window.testRunner)
200 testRunner.notifyDone();
dino@apple.com563bd1f2009-01-06 02:35:06 +0000[diff] [blame]201 }
202 </script>
203
204</head>
205<body onload="testContent()" onclick="clickHit(event)">
206 <h1>Testing the values of 'pointer-events' on HTML content</h1>
207 <p>This test is expected to be run from within DumpRenderTree. If running manually, click on
208 the elements in the first column, making sure the actual result (3rd column) matches
209 the expected result (2nd column). Repeat for click target (4th column), expected result (5th column)
210 and actual result (6th column). Note: You should click on a yellow inline element if
211 one exists, otherwise anywhere in the box.</p>
212
213 <div class="row row1">
214 <div class="col col1">
215 <p id="p1">pointer-events auto</p>
216 </div>
217 <div class="col col2">p1</div>
218 <div class="col col3">none</div>
219 </div>
220
221 <div class="row row2">
222 <div class="col col1">
223 <p id="p2">pointer-events none</p>
224 </div>
225 <div class="col col2">none</div>
226 <div class="col col3">none</div>
227 </div>
228
229 <div class="row row3">
230 <div class="col col1">
231 <p id="p3">siblings - auto on top</p>
232 <p id="p4"></p>
233 </div>
234 <div class="col col2">p4</div>
235 <div class="col col3">none</div>
236 </div>
237
238 <div class="row row4">
239 <div class="col col1">
240 <p id="p5">siblings - none on top</p>
241 <p id="p6"></p>
242 </div>
243 <div class="col col2">p5</div>
244 <div class="col col3">none</div>
245 </div>
246
247 <div class="row row5">
248 <div class="col col1">
249 <div id="p7">
250 <p id="p8">nested - auto outer</p>
251 </div>
252 </div>
253 <div class="col col2">p7</div>
254 <div class="col col3">none</div>
255 </div>
256
257 <div class="row row6">
258 <div class="col col1">
259 <div id="p9">
260 <p id="p10">nested - none outer</p>
261 </div>
262 </div>
263 <div class="col col2">p10</div>
264 <div class="col col3">none</div>
265 </div>
266
267 <div class="row row7">
268 <div class="col col1">
269 <img id="p11" src="resources/abe.png">
270 </div>
271 <div class="col col2">p11</div>
272 <div class="col col3">none</div>
273 </div>
274
275 <div class="row row8">
276 <div class="col col1">
277 <img id="p12" src="resources/abe.png">
278 </div>
279 <div class="col col2">none</div>
280 <div class="col col3">none</div>
281 </div>
282
283 <div class="row row9">
284 <div class="col col1">
285 <p id="p13"><span id="p14">inline</span> has auto, parent none
286 </p>
287 </div>
288 <div class="col col2">p14</div>
289 <div class="col col3">none</div>
290 </div>
291
292 <div class="row row10">
293 <div class="col col1">
294 <p id="p15"><span id="p16">inline</span> has none, parent auto
295 </p>
296 </div>
297 <div class="col col2">p15</div>
298 <div class="col col3">none</div>
299 </div>
300
301</body>
302</html>