The Tor Browser / file comparison
comparison: layout/inspector/tests/chrome/test_bug708874.xul
layout/inspector/tests/chrome/test_bug708874.xul
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:a3138a7166f1 |
|---|---|
| 1 <?xml version="1.0"?> | |
| 2 <?xml-stylesheet type="text/css" href="chrome://global/skin"?> | |
| 3 <?xml-stylesheet type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"?> | |
| 4 <?xml-stylesheet type="text/css" href="test_bug708874.css"?> | |
| 5 <!-- | |
| 6 https://bugzilla.mozilla.org/show_bug.cgi?id=708874 | |
| 7 --> | |
| 8 <window title="Mozilla Bug 708874" | |
| 9 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" | |
| 10 onload="RunTests();"> | |
| 11 <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/> | |
| 12 <script type="application/javascript"> | |
| 13 <![CDATA[ | |
| 14 | |
| 15 /** Test for Bug 708874 - API for locking pseudo-class state of an element **/ | |
| 16 | |
| 17 var DOMUtils = Components.classes["@mozilla.org/inspector/dom-utils;1"] | |
| 18 .getService(Components.interfaces.inIDOMUtils); | |
| 19 var DOMWindowUtils = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor) | |
| 20 .getInterface(Components.interfaces.nsIDOMWindowUtils); | |
| 21 | |
| 22 var defaultColor = "rgb(0, 0, 0)"; | |
| 23 var disabledColor = "rgb(40, 0, 0)"; | |
| 24 | |
| 25 function RunTests() { | |
| 26 testLockEnabled(); | |
| 27 testLockDisabled(); | |
| 28 testVisited(); | |
| 29 testMultiple(); | |
| 30 testInvalid(); | |
| 31 testNotElement(); | |
| 32 } | |
| 33 | |
| 34 function testLockEnabled() { | |
| 35 var button = document.getElementById("test-button"); | |
| 36 | |
| 37 /* starting state is enabled */ | |
| 38 button.removeAttribute("disabled"); | |
| 39 | |
| 40 is(DOMUtils.hasPseudoClassLock(button, ":disabled"), false, | |
| 41 "doesn't have lock at start"); | |
| 42 | |
| 43 is(window.getComputedStyle(button).color, defaultColor, | |
| 44 "color is default color before locking on"); | |
| 45 | |
| 46 is(button.mozMatchesSelector(":disabled"), false, | |
| 47 "doesn't match selector at start"); | |
| 48 | |
| 49 /* lock */ | |
| 50 DOMUtils.addPseudoClassLock(button, ":disabled"); | |
| 51 | |
| 52 is(DOMUtils.hasPseudoClassLock(button, ":disabled"), true, | |
| 53 "hasPseudoClassLock is true after locking"); | |
| 54 | |
| 55 is(window.getComputedStyle(button).color, disabledColor, | |
| 56 ":disabled style applied after adding lock"); | |
| 57 | |
| 58 is(button.mozMatchesSelector(":disabled"), true, | |
| 59 "matches selector after adding lock"); | |
| 60 | |
| 61 /* change state to disabled */ | |
| 62 button.setAttribute("disabled", "disabled"); | |
| 63 | |
| 64 is(window.getComputedStyle(button).color, disabledColor, | |
| 65 ":disabled style still applied after really disabling"); | |
| 66 | |
| 67 is(button.mozMatchesSelector(":disabled"), true, | |
| 68 "matches selector after adding lock"); | |
| 69 | |
| 70 /* remove lock */ | |
| 71 DOMUtils.removePseudoClassLock(button, ":disabled"); | |
| 72 | |
| 73 is(DOMUtils.hasPseudoClassLock(button, ":disabled"), false, | |
| 74 "hasPseudoClassLock is false after removing on lock"); | |
| 75 | |
| 76 is(window.getComputedStyle(button).color, disabledColor, | |
| 77 ":disabled style still applied after removing lock"); | |
| 78 | |
| 79 is(button.mozMatchesSelector(":disabled"), true, | |
| 80 "matches selector after removing lock"); | |
| 81 | |
| 82 /* change state to enabled */ | |
| 83 button.removeAttribute("disabled"); | |
| 84 | |
| 85 is(window.getComputedStyle(button).color, defaultColor, | |
| 86 "back to default style after un-disabling"); | |
| 87 | |
| 88 is(button.mozMatchesSelector(":disabled"), false, | |
| 89 "doesn't match selector after enabling"); | |
| 90 } | |
| 91 | |
| 92 | |
| 93 function testLockDisabled() { | |
| 94 var button = document.getElementById("test-button"); | |
| 95 | |
| 96 /* starting state is disabled */ | |
| 97 button.setAttribute("disabled", "disabled"); | |
| 98 | |
| 99 is(DOMUtils.hasPseudoClassLock(button, ":disabled"), false, | |
| 100 "doesn't have lock at start"); | |
| 101 | |
| 102 is(window.getComputedStyle(button).color, disabledColor, | |
| 103 "color is :disabled color before locking"); | |
| 104 | |
| 105 is(button.mozMatchesSelector(":disabled"), true, | |
| 106 "matches selector before locking"); | |
| 107 | |
| 108 /* lock */ | |
| 109 DOMUtils.addPseudoClassLock(button, ":disabled"); | |
| 110 | |
| 111 is(DOMUtils.hasPseudoClassLock(button, ":disabled"), true, | |
| 112 "hasPseudoClassLock is true after locking"); | |
| 113 | |
| 114 is(window.getComputedStyle(button).color, disabledColor, | |
| 115 ":disabled style still applied after adding on lock"); | |
| 116 | |
| 117 is(button.mozMatchesSelector(":disabled"), true, | |
| 118 "matches selector after locking"); | |
| 119 | |
| 120 /* change state to enabled */ | |
| 121 button.removeAttribute("disabled"); | |
| 122 | |
| 123 is(window.getComputedStyle(button).color, disabledColor, | |
| 124 ":disabled style applied after enabling"); | |
| 125 | |
| 126 is(button.mozMatchesSelector(":disabled"), true, | |
| 127 "matches selector after enabling with lock on"); | |
| 128 | |
| 129 /* remove lock */ | |
| 130 DOMUtils.removePseudoClassLock(button, ":disabled"); | |
| 131 | |
| 132 is(DOMUtils.hasPseudoClassLock(button, ":disabled"), false, | |
| 133 "hasPseudoClassLock is false after removing on lock"); | |
| 134 | |
| 135 is(window.getComputedStyle(button).color, defaultColor, | |
| 136 "default style applied after removing lock"); | |
| 137 | |
| 138 is(button.mozMatchesSelector(":disabled"), false, | |
| 139 "doesn't match selector after unlocking"); | |
| 140 | |
| 141 /* change state to disabled */ | |
| 142 button.setAttribute("disabled", "disabled"); | |
| 143 | |
| 144 is(window.getComputedStyle(button).color, disabledColor, | |
| 145 ":disabled style applied after disabling after unlocking"); | |
| 146 | |
| 147 is(button.mozMatchesSelector(":disabled"), true, | |
| 148 "matches selector again after disabling"); | |
| 149 } | |
| 150 | |
| 151 function testVisited() { | |
| 152 var link = document.getElementById("test-link"); | |
| 153 var visitedColor = "rgb(20, 0, 0)"; | |
| 154 var unvisitedColor = "rgb(30, 0, 0)"; | |
| 155 | |
| 156 /* lock visited */ | |
| 157 DOMUtils.addPseudoClassLock(link, ":visited"); | |
| 158 | |
| 159 is(DOMUtils.hasPseudoClassLock(link, ":visited"), true, | |
| 160 "hasPseudoClassLock is true after adding lock"); | |
| 161 | |
| 162 var color = DOMWindowUtils.getVisitedDependentComputedStyle(link, | |
| 163 null, "color"); | |
| 164 is(color, visitedColor, "color is :visited color after locking"); | |
| 165 | |
| 166 /* lock unvisited */ | |
| 167 DOMUtils.addPseudoClassLock(link, ":link"); | |
| 168 | |
| 169 is(DOMUtils.hasPseudoClassLock(link, ":link"), true, | |
| 170 "hasPseudoClassLock is true after adding :link lock"); | |
| 171 | |
| 172 is(DOMUtils.hasPseudoClassLock(link, ":visited"), false, | |
| 173 "hasPseudoClassLock is false for :visited after adding :link lock"); | |
| 174 | |
| 175 var color = DOMWindowUtils.getVisitedDependentComputedStyle(link, | |
| 176 null, "color"); | |
| 177 is(color, unvisitedColor, "color is :link color after locking :link"); | |
| 178 | |
| 179 /* lock visited back on */ | |
| 180 DOMUtils.addPseudoClassLock(link, ":visited"); | |
| 181 | |
| 182 is(DOMUtils.hasPseudoClassLock(link, ":visited"), true, | |
| 183 "hasPseudoClassLock is true after adding :visited lock"); | |
| 184 | |
| 185 is(DOMUtils.hasPseudoClassLock(link, ":link"), false, | |
| 186 "hasPseudoClassLock is false for :link after adding :visited lock"); | |
| 187 | |
| 188 var color = DOMWindowUtils.getVisitedDependentComputedStyle(link, | |
| 189 null, "color"); | |
| 190 is(color, visitedColor, "color is :visited color after locking back on"); | |
| 191 } | |
| 192 | |
| 193 function testMultiple() { | |
| 194 var div = document.getElementById("test-div"); | |
| 195 | |
| 196 var styles = { | |
| 197 ":hover": { | |
| 198 property: "color", | |
| 199 value: "rgb(10, 0, 0)", | |
| 200 defaultValue: "rgb(0, 0, 0)" | |
| 201 }, | |
| 202 ":active": { | |
| 203 property: "font-family", | |
| 204 value: "Arial", | |
| 205 defaultValue: "serif" | |
| 206 }, | |
| 207 ":focus": { | |
| 208 property: "font-weight", | |
| 209 value: "800", | |
| 210 defaultValue: "400" | |
| 211 } | |
| 212 }; | |
| 213 | |
| 214 for (var pseudo in styles) { | |
| 215 DOMUtils.addPseudoClassLock(div, pseudo); | |
| 216 } | |
| 217 | |
| 218 for (var pseudo in styles) { | |
| 219 is(DOMUtils.hasPseudoClassLock(div, pseudo), true, | |
| 220 "hasPseudoClassLock is true after locking"); | |
| 221 | |
| 222 var style = styles[pseudo]; | |
| 223 is(window.getComputedStyle(div).getPropertyValue(style.property), | |
| 224 style.value, "style for pseudo-class is applied after locking"); | |
| 225 | |
| 226 is(div.mozMatchesSelector(pseudo), true, | |
| 227 "matches selector after locking"); | |
| 228 } | |
| 229 | |
| 230 DOMUtils.clearPseudoClassLocks(div); | |
| 231 | |
| 232 for (var pseudo in styles) { | |
| 233 is(DOMUtils.hasPseudoClassLock(div, pseudo), false, | |
| 234 "hasPseudoClassLock is false after clearing"); | |
| 235 | |
| 236 is(window.getComputedStyle(div).getPropertyValue(style.property), | |
| 237 style.defaultValue, "style is back to default after clearing"); | |
| 238 | |
| 239 is(div.mozMatchesSelector(pseudo), false, | |
| 240 "doesn't match selector after unlocking"); | |
| 241 } | |
| 242 } | |
| 243 | |
| 244 function testInvalid() { | |
| 245 var div = document.getElementById("test-div"); | |
| 246 var pseudos = ["not a valid pseudo-class", ":moz-any-link", ":first-child"]; | |
| 247 | |
| 248 for (var i = 0; i < pseudos.length; i++) { | |
| 249 var pseudo = pseudos[i]; | |
| 250 | |
| 251 // basically make sure these don't crash the browser. | |
| 252 DOMUtils.addPseudoClassLock(div, pseudo); | |
| 253 | |
| 254 is(DOMUtils.hasPseudoClassLock(div, pseudo), false); | |
| 255 | |
| 256 DOMUtils.removePseudoClassLock(div, pseudo); | |
| 257 } | |
| 258 } | |
| 259 | |
| 260 function testNotElement() { | |
| 261 var values = [null, undefined, {}]; | |
| 262 try { | |
| 263 for each (value in values); { | |
| 264 DOMUtils.hasPseudoClassLock(value, ":hover"); | |
| 265 DOMUtils.addPseudoClassLock(value, ":hover"); | |
| 266 DOMUtils.removePseudoClassLock(value, ":hover"); | |
| 267 DOMUtils.clearPseudoClassLocks(value); | |
| 268 } | |
| 269 } catch(e) { | |
| 270 // just make sure we don't crash on non-elements | |
| 271 } | |
| 272 } | |
| 273 ]]> | |
| 274 </script> | |
| 275 | |
| 276 <body xmlns="http://www.w3.org/1999/xhtml"> | |
| 277 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=708874" | |
| 278 target="_blank">Mozilla Bug 708874</a> | |
| 279 | |
| 280 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=708874"> | |
| 281 Mozilla Bug 708874 - API for locking pseudo-class state of an element | |
| 282 </a> | |
| 283 | |
| 284 <a id="test-link" href="http://notavisitedwebsite.com"> | |
| 285 test link | |
| 286 </a> | |
| 287 | |
| 288 <div id="test-div"> | |
| 289 test div | |
| 290 </div> | |
| 291 | |
| 292 <button id="test-button"> | |
| 293 test button | |
| 294 </button> | |
| 295 </body> | |
| 296 | |
| 297 </window> |
