michael@0: <?xml version="1.0"?>
michael@0: <?xml-stylesheet type="text/css" href="chrome://global/skin"?>
michael@0: <?xml-stylesheet type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"?>
michael@0: <?xml-stylesheet type="text/css" href="test_bug708874.css"?>
michael@0: <!--
michael@0: https://bugzilla.mozilla.org/show_bug.cgi?id=708874
michael@0: -->
michael@0: <window title="Mozilla Bug 708874"
michael@0:         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
michael@0:         onload="RunTests();">
michael@0:   <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
michael@0:   <script type="application/javascript">
michael@0:   <![CDATA[
michael@0: 
michael@0: /** Test for Bug 708874 - API for locking pseudo-class state of an element **/
michael@0: 
michael@0: var DOMUtils = Components.classes["@mozilla.org/inspector/dom-utils;1"]
michael@0:                .getService(Components.interfaces.inIDOMUtils);
michael@0: var DOMWindowUtils = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
michael@0:                      .getInterface(Components.interfaces.nsIDOMWindowUtils);
michael@0: 
michael@0: var defaultColor = "rgb(0, 0, 0)";
michael@0: var disabledColor = "rgb(40, 0, 0)";
michael@0: 
michael@0: function RunTests() {
michael@0:   testLockEnabled();
michael@0:   testLockDisabled();
michael@0:   testVisited();
michael@0:   testMultiple();
michael@0:   testInvalid();
michael@0:   testNotElement();
michael@0: }
michael@0: 
michael@0: function testLockEnabled() {
michael@0:   var button = document.getElementById("test-button");
michael@0: 
michael@0:   /* starting state is enabled */
michael@0:   button.removeAttribute("disabled");
michael@0: 
michael@0:   is(DOMUtils.hasPseudoClassLock(button, ":disabled"), false,
michael@0:      "doesn't have lock at start");
michael@0: 
michael@0:   is(window.getComputedStyle(button).color, defaultColor,
michael@0:      "color is default color before locking on");
michael@0: 
michael@0:   is(button.mozMatchesSelector(":disabled"), false,
michael@0:      "doesn't match selector at start");
michael@0: 
michael@0:   /* lock */
michael@0:   DOMUtils.addPseudoClassLock(button, ":disabled");
michael@0: 
michael@0:   is(DOMUtils.hasPseudoClassLock(button, ":disabled"), true,
michael@0:      "hasPseudoClassLock is true after locking");
michael@0: 
michael@0:   is(window.getComputedStyle(button).color, disabledColor,
michael@0:      ":disabled style applied after adding lock");
michael@0: 
michael@0:   is(button.mozMatchesSelector(":disabled"), true,
michael@0:      "matches selector after adding lock");
michael@0: 
michael@0:   /* change state to disabled */
michael@0:   button.setAttribute("disabled", "disabled");
michael@0: 
michael@0:   is(window.getComputedStyle(button).color, disabledColor,
michael@0:      ":disabled style still applied after really disabling");
michael@0: 
michael@0:   is(button.mozMatchesSelector(":disabled"), true,
michael@0:     "matches selector after adding lock");
michael@0: 
michael@0:   /* remove lock */
michael@0:   DOMUtils.removePseudoClassLock(button, ":disabled");
michael@0: 
michael@0:   is(DOMUtils.hasPseudoClassLock(button, ":disabled"), false,
michael@0:      "hasPseudoClassLock is false after removing on lock");
michael@0: 
michael@0:   is(window.getComputedStyle(button).color, disabledColor,
michael@0:      ":disabled style still applied after removing lock");
michael@0: 
michael@0:   is(button.mozMatchesSelector(":disabled"), true,
michael@0:      "matches selector after removing lock");
michael@0: 
michael@0:   /* change state to enabled */
michael@0:   button.removeAttribute("disabled");
michael@0: 
michael@0:   is(window.getComputedStyle(button).color, defaultColor,
michael@0:      "back to default style after un-disabling");
michael@0: 
michael@0:   is(button.mozMatchesSelector(":disabled"), false,
michael@0:     "doesn't match selector after enabling");
michael@0: }
michael@0: 
michael@0: 
michael@0: function testLockDisabled() {
michael@0:   var button = document.getElementById("test-button");
michael@0: 
michael@0:   /* starting state is disabled */
michael@0:   button.setAttribute("disabled", "disabled");
michael@0: 
michael@0:   is(DOMUtils.hasPseudoClassLock(button, ":disabled"), false,
michael@0:      "doesn't have lock at start");
michael@0: 
michael@0:   is(window.getComputedStyle(button).color, disabledColor,
michael@0:      "color is :disabled color before locking");
michael@0: 
michael@0:   is(button.mozMatchesSelector(":disabled"), true,
michael@0:     "matches selector before locking");
michael@0: 
michael@0:   /* lock */
michael@0:   DOMUtils.addPseudoClassLock(button, ":disabled");
michael@0: 
michael@0:   is(DOMUtils.hasPseudoClassLock(button, ":disabled"), true,
michael@0:      "hasPseudoClassLock is true after locking");
michael@0: 
michael@0:   is(window.getComputedStyle(button).color, disabledColor,
michael@0:      ":disabled style still applied after adding on lock");
michael@0: 
michael@0:   is(button.mozMatchesSelector(":disabled"), true,
michael@0:    "matches selector after locking");
michael@0: 
michael@0:   /* change state to enabled */
michael@0:   button.removeAttribute("disabled");
michael@0: 
michael@0:   is(window.getComputedStyle(button).color, disabledColor,
michael@0:      ":disabled style applied after enabling");
michael@0: 
michael@0:   is(button.mozMatchesSelector(":disabled"), true,
michael@0:    "matches selector after enabling with lock on");
michael@0: 
michael@0:   /* remove lock */
michael@0:   DOMUtils.removePseudoClassLock(button, ":disabled");
michael@0: 
michael@0:   is(DOMUtils.hasPseudoClassLock(button, ":disabled"), false,
michael@0:      "hasPseudoClassLock is false after removing on lock");
michael@0: 
michael@0:   is(window.getComputedStyle(button).color, defaultColor,
michael@0:      "default style applied after removing lock");
michael@0: 
michael@0:   is(button.mozMatchesSelector(":disabled"), false,
michael@0:      "doesn't match selector after unlocking");
michael@0: 
michael@0:   /* change state to disabled */
michael@0:   button.setAttribute("disabled", "disabled");
michael@0: 
michael@0:   is(window.getComputedStyle(button).color, disabledColor,
michael@0:      ":disabled style applied after disabling after unlocking");
michael@0: 
michael@0:   is(button.mozMatchesSelector(":disabled"), true,
michael@0:     "matches selector again after disabling");
michael@0: }
michael@0: 
michael@0: function testVisited() {
michael@0:   var link = document.getElementById("test-link");
michael@0:   var visitedColor = "rgb(20, 0, 0)";
michael@0:   var unvisitedColor = "rgb(30, 0, 0)";
michael@0: 
michael@0:   /* lock visited */
michael@0:   DOMUtils.addPseudoClassLock(link, ":visited");
michael@0: 
michael@0:   is(DOMUtils.hasPseudoClassLock(link, ":visited"), true,
michael@0:      "hasPseudoClassLock is true after adding lock");
michael@0: 
michael@0:   var color = DOMWindowUtils.getVisitedDependentComputedStyle(link,
michael@0:                 null, "color");
michael@0:   is(color, visitedColor, "color is :visited color after locking");
michael@0: 
michael@0:   /* lock unvisited */
michael@0:   DOMUtils.addPseudoClassLock(link, ":link");
michael@0: 
michael@0:   is(DOMUtils.hasPseudoClassLock(link, ":link"), true,
michael@0:      "hasPseudoClassLock is true after adding :link lock");
michael@0: 
michael@0:   is(DOMUtils.hasPseudoClassLock(link, ":visited"), false,
michael@0:      "hasPseudoClassLock is false for :visited after adding :link lock");
michael@0: 
michael@0:   var color = DOMWindowUtils.getVisitedDependentComputedStyle(link,
michael@0:                  null, "color");
michael@0:   is(color, unvisitedColor, "color is :link color after locking :link");
michael@0: 
michael@0:   /* lock visited back on */
michael@0:   DOMUtils.addPseudoClassLock(link, ":visited");
michael@0: 
michael@0:   is(DOMUtils.hasPseudoClassLock(link, ":visited"), true,
michael@0:     "hasPseudoClassLock is true after adding :visited lock");
michael@0: 
michael@0:   is(DOMUtils.hasPseudoClassLock(link, ":link"), false,
michael@0:     "hasPseudoClassLock is false for :link after adding :visited lock");
michael@0: 
michael@0:   var color = DOMWindowUtils.getVisitedDependentComputedStyle(link,
michael@0:                null, "color");
michael@0:   is(color, visitedColor, "color is :visited color after locking back on");
michael@0: }
michael@0: 
michael@0: function testMultiple() {
michael@0:   var div = document.getElementById("test-div");
michael@0: 
michael@0:   var styles = {
michael@0:     ":hover": {
michael@0:       property: "color",
michael@0:       value: "rgb(10, 0, 0)",
michael@0:       defaultValue: "rgb(0, 0, 0)"
michael@0:     },
michael@0:     ":active": {
michael@0:       property: "font-family",
michael@0:       value: "Arial",
michael@0:       defaultValue: "serif"
michael@0:     },
michael@0:     ":focus": {
michael@0:       property: "font-weight",
michael@0:       value: "800",
michael@0:       defaultValue: "400"
michael@0:     }
michael@0:   };
michael@0: 
michael@0:   for (var pseudo in styles) {
michael@0:     DOMUtils.addPseudoClassLock(div, pseudo);
michael@0:   }
michael@0: 
michael@0:   for (var pseudo in styles) {
michael@0:     is(DOMUtils.hasPseudoClassLock(div, pseudo), true,
michael@0:        "hasPseudoClassLock is true after locking");
michael@0: 
michael@0:     var style = styles[pseudo];
michael@0:     is(window.getComputedStyle(div).getPropertyValue(style.property),
michael@0:        style.value, "style for pseudo-class is applied after locking");
michael@0: 
michael@0:     is(div.mozMatchesSelector(pseudo), true,
michael@0:        "matches selector after locking");
michael@0:   }
michael@0: 
michael@0:   DOMUtils.clearPseudoClassLocks(div);
michael@0: 
michael@0:   for (var pseudo in styles) {
michael@0:     is(DOMUtils.hasPseudoClassLock(div, pseudo), false,
michael@0:        "hasPseudoClassLock is false after clearing");
michael@0: 
michael@0:     is(window.getComputedStyle(div).getPropertyValue(style.property),
michael@0:        style.defaultValue, "style is back to default after clearing");
michael@0: 
michael@0:     is(div.mozMatchesSelector(pseudo), false,
michael@0:       "doesn't match selector after unlocking");
michael@0:   }
michael@0: }
michael@0: 
michael@0: function testInvalid() {
michael@0:   var div = document.getElementById("test-div");
michael@0:   var pseudos = ["not a valid pseudo-class", ":moz-any-link", ":first-child"];
michael@0: 
michael@0:   for (var i = 0; i < pseudos.length; i++) {
michael@0:     var pseudo = pseudos[i];
michael@0: 
michael@0:     // basically make sure these don't crash the browser.
michael@0:     DOMUtils.addPseudoClassLock(div, pseudo);
michael@0: 
michael@0:     is(DOMUtils.hasPseudoClassLock(div, pseudo), false);
michael@0: 
michael@0:     DOMUtils.removePseudoClassLock(div, pseudo);
michael@0:   }
michael@0: }
michael@0: 
michael@0: function testNotElement() {
michael@0:   var values = [null, undefined, {}];
michael@0:   try {
michael@0:     for each (value in values); {
michael@0:       DOMUtils.hasPseudoClassLock(value, ":hover");
michael@0:       DOMUtils.addPseudoClassLock(value, ":hover");
michael@0:       DOMUtils.removePseudoClassLock(value, ":hover");
michael@0:       DOMUtils.clearPseudoClassLocks(value);
michael@0:     }
michael@0:   } catch(e) {
michael@0:     // just make sure we don't crash on non-elements
michael@0:   }
michael@0: }
michael@0:   ]]>
michael@0:   </script>
michael@0: 
michael@0:   <body xmlns="http://www.w3.org/1999/xhtml">
michael@0:     <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=708874"
michael@0:        target="_blank">Mozilla Bug 708874</a>
michael@0: 
michael@0:     <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=708874">
michael@0:       Mozilla Bug 708874 - API for locking pseudo-class state of an element
michael@0:     </a>
michael@0: 
michael@0:     <a id="test-link" href="http://notavisitedwebsite.com">
michael@0:       test link
michael@0:     </a>
michael@0: 
michael@0:     <div id="test-div">
michael@0:       test div
michael@0:     </div>
michael@0: 
michael@0:     <button id="test-button">
michael@0:       test button
michael@0:     </button>
michael@0:   </body>
michael@0: 
michael@0: </window>