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
