Google Git
Sign in
chromium / chromium / src.git / 163835a2375d6b7d67571e563fcaab39a7a79c6e / . / third_party / WebKit / ManualTests / pointer-events.html
blob: 7ffac8b6bd2247d412bfff21e60452e04b00fdce [file] [log] [blame]
[email protected]ab75ece2009-01-06 02:35:06[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 in HTML</title>
7 <style type="text/css" media="screen">
8 #a {
9 pointer-events: auto;
10 background: #88f;
11 }
12
13 #a:hover {
14 background: green;
15 }
16
17 #b {
18 pointer-events: none;
19 background: #88f;
20 }
21
22 #b:hover {
23 background: red;
24 }
25
26 #c {
27 pointer-events: auto;
28 background: #88f;
29 }
30
31 #c span {
32 pointer-events: none;
33 background: #8ff;
34 }
35
36 #c:hover {
37 background: green;
38 }
39
40 #d {
41 pointer-events: none;
42 background: #88f;
43 }
44
45 #d span {
46 pointer-events: auto;
47 padding: 0 10px;
48 background: #8ff;
49 }
50
51 #d:hover {
52 background: gray;
53 }
54
55 #e {
56 padding: 10px;
57 pointer-events: none;
58 background: #88f;
59 }
60
61 #e div {
62 pointer-events: auto;
63 background: #8ff;
64 }
65
66 #e:hover {
67 background: gray;
68 }
69
70 #e div:hover {
71 background: green;
72 }
73
74 #f, #g, #h, #i, #k, #m {
75 padding: 10px;
76 background: #88f;
77 }
78
79 #f {
80 pointer-events: auto;
81 }
82
83 #f:hover {
84 background: green;
85 }
86
87 #g {
88 pointer-events: none;
89 }
90
91 #g:hover {
92 background: red;
93 }
94
95 #h {
96 pointer-events: auto;
97 }
98
99 #h:hover {
100 background: green;
101 }
102
103 #i {
104 pointer-events: none;
105 }
106
107 #i:hover {
108 background: red;
109 }
110
111 #j {
112 background: #88f;
113 pointer-events: none;
114 }
115
116 #j:hover {
117 background: gray;
118 }
119
120 #k {
121 pointer-events: auto;
122 }
123
124 #k:hover {
125 background: green;
126 }
127
128 #l {
129 background: #88f;
130 pointer-events: auto;
131 }
132
133 #l:hover {
134 background: green;
135 }
136
137 #m {
138 pointer-events: none;
139 }
140
141 #m:hover {
142 background: red;
143 }
144
145 </style>
146
147</head>
148<body>
149 <h1>Testing 'pointer-events' property in HTML</h1>
150
151 <p id="a">This whole paragraph SHOULD change background when hovered</p>
152
153 <p id="b">This whole paragraph SHOULD NOT change background when hovered</p>
154
155 <p id="c">This paragraph SHOULD change background when hovered anywhere including
156 <span>this inline text</span> even though the inline text ignores pointer events.</p>
157
158 <p id="d">This paragraph SHOULD NOT change when the pointer is over only it but
159 <span>this inline text</span> SHOULD change and cause the parent to change also.</p>
160
161 <div id="e">This paragraph SHOULD NOT change when the pointer is over only it (not the child)
162 <div>This child element SHOULD change and cause the parent to change also</div>
163 </div>
164
165 <p>
166 The following image SHOULD change when the pointer is over it.
167 </p>
168
[email protected]674d9502011-05-13 19:54:03[diff] [blame]169 <img id="f" src="../../../LayoutTests/media/content/abe.png">
[email protected]ab75ece2009-01-06 02:35:06[diff] [blame]170
171 <p>
172 The following image SHOULD NOT change when the pointer is over it.
173 </p>
174
[email protected]674d9502011-05-13 19:54:03[diff] [blame]175 <img id="g" src="../../../LayoutTests/media/content/abe.png">
[email protected]ab75ece2009-01-06 02:35:06[diff] [blame]176
177 <p>
178 The following image SHOULD change when the pointer is over it. It is inline
179 with this paragraph.
[email protected]674d9502011-05-13 19:54:03[diff] [blame]180 <img id="h" src="../../../LayoutTests/media/content/abe.png">
[email protected]ab75ece2009-01-06 02:35:06[diff] [blame]181 </p>
182
183 <p>
184 The following image SHOULD NOT change when the pointer is over it. It is inline
185 with this paragraph.
[email protected]674d9502011-05-13 19:54:03[diff] [blame]186 <img id="i" src="../../../LayoutTests/media/content/abe.png">
[email protected]ab75ece2009-01-06 02:35:06[diff] [blame]187 </p>
188
189 <p id="j">
190 This paragraph SHOULD NOT change when the pointer is over only it, but the child
191 image SHOULD react and cause the parent to change.
[email protected]674d9502011-05-13 19:54:03[diff] [blame]192 <img id="k" src="../../../LayoutTests/media/content/abe.png">
[email protected]ab75ece2009-01-06 02:35:06[diff] [blame]193 </p>
194
195 <p id="l">
196 This paragraph SHOULD change when the pointer is over it, but the child
197 image SHOULD NOT react.
[email protected]674d9502011-05-13 19:54:03[diff] [blame]198 <img id="m" src="../../../LayoutTests/media/content/abe.png">
[email protected]ab75ece2009-01-06 02:35:06[diff] [blame]199 </p>
200
201
202</body>
203</html>