|
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 |
|
169 <img id="f" src="../../LayoutTests/media/content/abe.png"> |
|
170 |
|
171 <p> |
|
172 The following image SHOULD NOT change when the pointer is over it. |
|
173 </p> |
|
174 |
|
175 <img id="g" src="../../LayoutTests/media/content/abe.png"> |
|
176 |
|
177 <p> |
|
178 The following image SHOULD change when the pointer is over it. It is inline |
|
179 with this paragraph. |
|
180 <img id="h" src="../../LayoutTests/media/content/abe.png"> |
|
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. |
|
186 <img id="i" src="../../LayoutTests/media/content/abe.png"> |
|
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. |
|
192 <img id="k" src="../../LayoutTests/media/content/abe.png"> |
|
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. |
|
198 <img id="m" src="../../LayoutTests/media/content/abe.png"> |
|
199 </p> |
|
200 |
|
201 |
|
202 </body> |
|
203 </html> |