1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/inspector/tests/chrome/test_bug708874.xul Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,297 @@
1.4 +<?xml version="1.0"?>
1.5 +<?xml-stylesheet type="text/css" href="chrome://global/skin"?>
1.6 +<?xml-stylesheet type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"?>
1.7 +<?xml-stylesheet type="text/css" href="test_bug708874.css"?>
1.8 +<!--
1.9 +https://bugzilla.mozilla.org/show_bug.cgi?id=708874
1.10 +-->
1.11 +<window title="Mozilla Bug 708874"
1.12 + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
1.13 + onload="RunTests();">
1.14 + <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
1.15 + <script type="application/javascript">
1.16 + <![CDATA[
1.17 +
1.18 +/** Test for Bug 708874 - API for locking pseudo-class state of an element **/
1.19 +
1.20 +var DOMUtils = Components.classes["@mozilla.org/inspector/dom-utils;1"]
1.21 + .getService(Components.interfaces.inIDOMUtils);
1.22 +var DOMWindowUtils = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
1.23 + .getInterface(Components.interfaces.nsIDOMWindowUtils);
1.24 +
1.25 +var defaultColor = "rgb(0, 0, 0)";
1.26 +var disabledColor = "rgb(40, 0, 0)";
1.27 +
1.28 +function RunTests() {
1.29 + testLockEnabled();
1.30 + testLockDisabled();
1.31 + testVisited();
1.32 + testMultiple();
1.33 + testInvalid();
1.34 + testNotElement();
1.35 +}
1.36 +
1.37 +function testLockEnabled() {
1.38 + var button = document.getElementById("test-button");
1.39 +
1.40 + /* starting state is enabled */
1.41 + button.removeAttribute("disabled");
1.42 +
1.43 + is(DOMUtils.hasPseudoClassLock(button, ":disabled"), false,
1.44 + "doesn't have lock at start");
1.45 +
1.46 + is(window.getComputedStyle(button).color, defaultColor,
1.47 + "color is default color before locking on");
1.48 +
1.49 + is(button.mozMatchesSelector(":disabled"), false,
1.50 + "doesn't match selector at start");
1.51 +
1.52 + /* lock */
1.53 + DOMUtils.addPseudoClassLock(button, ":disabled");
1.54 +
1.55 + is(DOMUtils.hasPseudoClassLock(button, ":disabled"), true,
1.56 + "hasPseudoClassLock is true after locking");
1.57 +
1.58 + is(window.getComputedStyle(button).color, disabledColor,
1.59 + ":disabled style applied after adding lock");
1.60 +
1.61 + is(button.mozMatchesSelector(":disabled"), true,
1.62 + "matches selector after adding lock");
1.63 +
1.64 + /* change state to disabled */
1.65 + button.setAttribute("disabled", "disabled");
1.66 +
1.67 + is(window.getComputedStyle(button).color, disabledColor,
1.68 + ":disabled style still applied after really disabling");
1.69 +
1.70 + is(button.mozMatchesSelector(":disabled"), true,
1.71 + "matches selector after adding lock");
1.72 +
1.73 + /* remove lock */
1.74 + DOMUtils.removePseudoClassLock(button, ":disabled");
1.75 +
1.76 + is(DOMUtils.hasPseudoClassLock(button, ":disabled"), false,
1.77 + "hasPseudoClassLock is false after removing on lock");
1.78 +
1.79 + is(window.getComputedStyle(button).color, disabledColor,
1.80 + ":disabled style still applied after removing lock");
1.81 +
1.82 + is(button.mozMatchesSelector(":disabled"), true,
1.83 + "matches selector after removing lock");
1.84 +
1.85 + /* change state to enabled */
1.86 + button.removeAttribute("disabled");
1.87 +
1.88 + is(window.getComputedStyle(button).color, defaultColor,
1.89 + "back to default style after un-disabling");
1.90 +
1.91 + is(button.mozMatchesSelector(":disabled"), false,
1.92 + "doesn't match selector after enabling");
1.93 +}
1.94 +
1.95 +
1.96 +function testLockDisabled() {
1.97 + var button = document.getElementById("test-button");
1.98 +
1.99 + /* starting state is disabled */
1.100 + button.setAttribute("disabled", "disabled");
1.101 +
1.102 + is(DOMUtils.hasPseudoClassLock(button, ":disabled"), false,
1.103 + "doesn't have lock at start");
1.104 +
1.105 + is(window.getComputedStyle(button).color, disabledColor,
1.106 + "color is :disabled color before locking");
1.107 +
1.108 + is(button.mozMatchesSelector(":disabled"), true,
1.109 + "matches selector before locking");
1.110 +
1.111 + /* lock */
1.112 + DOMUtils.addPseudoClassLock(button, ":disabled");
1.113 +
1.114 + is(DOMUtils.hasPseudoClassLock(button, ":disabled"), true,
1.115 + "hasPseudoClassLock is true after locking");
1.116 +
1.117 + is(window.getComputedStyle(button).color, disabledColor,
1.118 + ":disabled style still applied after adding on lock");
1.119 +
1.120 + is(button.mozMatchesSelector(":disabled"), true,
1.121 + "matches selector after locking");
1.122 +
1.123 + /* change state to enabled */
1.124 + button.removeAttribute("disabled");
1.125 +
1.126 + is(window.getComputedStyle(button).color, disabledColor,
1.127 + ":disabled style applied after enabling");
1.128 +
1.129 + is(button.mozMatchesSelector(":disabled"), true,
1.130 + "matches selector after enabling with lock on");
1.131 +
1.132 + /* remove lock */
1.133 + DOMUtils.removePseudoClassLock(button, ":disabled");
1.134 +
1.135 + is(DOMUtils.hasPseudoClassLock(button, ":disabled"), false,
1.136 + "hasPseudoClassLock is false after removing on lock");
1.137 +
1.138 + is(window.getComputedStyle(button).color, defaultColor,
1.139 + "default style applied after removing lock");
1.140 +
1.141 + is(button.mozMatchesSelector(":disabled"), false,
1.142 + "doesn't match selector after unlocking");
1.143 +
1.144 + /* change state to disabled */
1.145 + button.setAttribute("disabled", "disabled");
1.146 +
1.147 + is(window.getComputedStyle(button).color, disabledColor,
1.148 + ":disabled style applied after disabling after unlocking");
1.149 +
1.150 + is(button.mozMatchesSelector(":disabled"), true,
1.151 + "matches selector again after disabling");
1.152 +}
1.153 +
1.154 +function testVisited() {
1.155 + var link = document.getElementById("test-link");
1.156 + var visitedColor = "rgb(20, 0, 0)";
1.157 + var unvisitedColor = "rgb(30, 0, 0)";
1.158 +
1.159 + /* lock visited */
1.160 + DOMUtils.addPseudoClassLock(link, ":visited");
1.161 +
1.162 + is(DOMUtils.hasPseudoClassLock(link, ":visited"), true,
1.163 + "hasPseudoClassLock is true after adding lock");
1.164 +
1.165 + var color = DOMWindowUtils.getVisitedDependentComputedStyle(link,
1.166 + null, "color");
1.167 + is(color, visitedColor, "color is :visited color after locking");
1.168 +
1.169 + /* lock unvisited */
1.170 + DOMUtils.addPseudoClassLock(link, ":link");
1.171 +
1.172 + is(DOMUtils.hasPseudoClassLock(link, ":link"), true,
1.173 + "hasPseudoClassLock is true after adding :link lock");
1.174 +
1.175 + is(DOMUtils.hasPseudoClassLock(link, ":visited"), false,
1.176 + "hasPseudoClassLock is false for :visited after adding :link lock");
1.177 +
1.178 + var color = DOMWindowUtils.getVisitedDependentComputedStyle(link,
1.179 + null, "color");
1.180 + is(color, unvisitedColor, "color is :link color after locking :link");
1.181 +
1.182 + /* lock visited back on */
1.183 + DOMUtils.addPseudoClassLock(link, ":visited");
1.184 +
1.185 + is(DOMUtils.hasPseudoClassLock(link, ":visited"), true,
1.186 + "hasPseudoClassLock is true after adding :visited lock");
1.187 +
1.188 + is(DOMUtils.hasPseudoClassLock(link, ":link"), false,
1.189 + "hasPseudoClassLock is false for :link after adding :visited lock");
1.190 +
1.191 + var color = DOMWindowUtils.getVisitedDependentComputedStyle(link,
1.192 + null, "color");
1.193 + is(color, visitedColor, "color is :visited color after locking back on");
1.194 +}
1.195 +
1.196 +function testMultiple() {
1.197 + var div = document.getElementById("test-div");
1.198 +
1.199 + var styles = {
1.200 + ":hover": {
1.201 + property: "color",
1.202 + value: "rgb(10, 0, 0)",
1.203 + defaultValue: "rgb(0, 0, 0)"
1.204 + },
1.205 + ":active": {
1.206 + property: "font-family",
1.207 + value: "Arial",
1.208 + defaultValue: "serif"
1.209 + },
1.210 + ":focus": {
1.211 + property: "font-weight",
1.212 + value: "800",
1.213 + defaultValue: "400"
1.214 + }
1.215 + };
1.216 +
1.217 + for (var pseudo in styles) {
1.218 + DOMUtils.addPseudoClassLock(div, pseudo);
1.219 + }
1.220 +
1.221 + for (var pseudo in styles) {
1.222 + is(DOMUtils.hasPseudoClassLock(div, pseudo), true,
1.223 + "hasPseudoClassLock is true after locking");
1.224 +
1.225 + var style = styles[pseudo];
1.226 + is(window.getComputedStyle(div).getPropertyValue(style.property),
1.227 + style.value, "style for pseudo-class is applied after locking");
1.228 +
1.229 + is(div.mozMatchesSelector(pseudo), true,
1.230 + "matches selector after locking");
1.231 + }
1.232 +
1.233 + DOMUtils.clearPseudoClassLocks(div);
1.234 +
1.235 + for (var pseudo in styles) {
1.236 + is(DOMUtils.hasPseudoClassLock(div, pseudo), false,
1.237 + "hasPseudoClassLock is false after clearing");
1.238 +
1.239 + is(window.getComputedStyle(div).getPropertyValue(style.property),
1.240 + style.defaultValue, "style is back to default after clearing");
1.241 +
1.242 + is(div.mozMatchesSelector(pseudo), false,
1.243 + "doesn't match selector after unlocking");
1.244 + }
1.245 +}
1.246 +
1.247 +function testInvalid() {
1.248 + var div = document.getElementById("test-div");
1.249 + var pseudos = ["not a valid pseudo-class", ":moz-any-link", ":first-child"];
1.250 +
1.251 + for (var i = 0; i < pseudos.length; i++) {
1.252 + var pseudo = pseudos[i];
1.253 +
1.254 + // basically make sure these don't crash the browser.
1.255 + DOMUtils.addPseudoClassLock(div, pseudo);
1.256 +
1.257 + is(DOMUtils.hasPseudoClassLock(div, pseudo), false);
1.258 +
1.259 + DOMUtils.removePseudoClassLock(div, pseudo);
1.260 + }
1.261 +}
1.262 +
1.263 +function testNotElement() {
1.264 + var values = [null, undefined, {}];
1.265 + try {
1.266 + for each (value in values); {
1.267 + DOMUtils.hasPseudoClassLock(value, ":hover");
1.268 + DOMUtils.addPseudoClassLock(value, ":hover");
1.269 + DOMUtils.removePseudoClassLock(value, ":hover");
1.270 + DOMUtils.clearPseudoClassLocks(value);
1.271 + }
1.272 + } catch(e) {
1.273 + // just make sure we don't crash on non-elements
1.274 + }
1.275 +}
1.276 + ]]>
1.277 + </script>
1.278 +
1.279 + <body xmlns="http://www.w3.org/1999/xhtml">
1.280 + <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=708874"
1.281 + target="_blank">Mozilla Bug 708874</a>
1.282 +
1.283 + <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=708874">
1.284 + Mozilla Bug 708874 - API for locking pseudo-class state of an element
1.285 + </a>
1.286 +
1.287 + <a id="test-link" href="http://notavisitedwebsite.com">
1.288 + test link
1.289 + </a>
1.290 +
1.291 + <div id="test-div">
1.292 + test div
1.293 + </div>
1.294 +
1.295 + <button id="test-button">
1.296 + test button
1.297 + </button>
1.298 + </body>
1.299 +
1.300 +</window>
