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>
204