Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test gets skipped with pattern: os == 'android'
- Manifest: layout/inspector/tests/chrome/chrome.toml
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="test_bug708874.css"?>
<!--
-->
onload="RunTests();">
<script type="application/javascript">
<![CDATA[
var DOMWindowUtils = window.windowUtils;
var defaultColor = "rgb(0, 0, 0)";
var disabledColor = "rgb(40, 0, 0)";
function RunTests() {
testLockEnabled();
testLockDisabled();
testVisited();
testMultiple();
testInvalid();
testNotElement();
}
function testLockEnabled() {
var button = document.getElementById("test-button");
/* starting state is enabled */
button.removeAttribute("disabled");
is(InspectorUtils.hasPseudoClassLock(button, ":disabled"), false,
"doesn't have lock at start");
is(window.getComputedStyle(button).color, defaultColor,
"color is default color before locking on");
is(button.matches(":disabled"), false,
"doesn't match selector at start");
/* lock */
InspectorUtils.addPseudoClassLock(button, ":disabled");
is(InspectorUtils.hasPseudoClassLock(button, ":disabled"), true,
"hasPseudoClassLock is true after locking");
is(window.getComputedStyle(button).color, disabledColor,
":disabled style applied after adding lock");
is(button.matches(":disabled"), true,
"matches selector after adding lock");
/* change state to disabled */
button.setAttribute("disabled", "disabled");
is(window.getComputedStyle(button).color, disabledColor,
":disabled style still applied after really disabling");
is(button.matches(":disabled"), true,
"matches selector after adding lock");
/* remove lock */
InspectorUtils.removePseudoClassLock(button, ":disabled");
is(InspectorUtils.hasPseudoClassLock(button, ":disabled"), false,
"hasPseudoClassLock is false after removing on lock");
is(window.getComputedStyle(button).color, disabledColor,
":disabled style still applied after removing lock");
is(button.matches(":disabled"), true,
"matches selector after removing lock");
/* change state to enabled */
button.removeAttribute("disabled");
is(window.getComputedStyle(button).color, defaultColor,
"back to default style after un-disabling");
is(button.matches(":disabled"), false,
"doesn't match selector after enabling");
}
function testLockDisabled() {
var button = document.getElementById("test-button");
/* starting state is disabled */
button.setAttribute("disabled", "disabled");
is(InspectorUtils.hasPseudoClassLock(button, ":disabled"), false,
"doesn't have lock at start");
is(window.getComputedStyle(button).color, disabledColor,
"color is :disabled color before locking");
is(button.matches(":disabled"), true,
"matches selector before locking");
/* lock */
InspectorUtils.addPseudoClassLock(button, ":disabled");
is(InspectorUtils.hasPseudoClassLock(button, ":disabled"), true,
"hasPseudoClassLock is true after locking");
is(window.getComputedStyle(button).color, disabledColor,
":disabled style still applied after adding on lock");
is(button.matches(":disabled"), true,
"matches selector after locking");
/* change state to enabled */
button.removeAttribute("disabled");
is(window.getComputedStyle(button).color, disabledColor,
":disabled style applied after enabling");
is(button.matches(":disabled"), true,
"matches selector after enabling with lock on");
/* remove lock */
InspectorUtils.removePseudoClassLock(button, ":disabled");
is(InspectorUtils.hasPseudoClassLock(button, ":disabled"), false,
"hasPseudoClassLock is false after removing on lock");
is(window.getComputedStyle(button).color, defaultColor,
"default style applied after removing lock");
is(button.matches(":disabled"), false,
"doesn't match selector after unlocking");
/* change state to disabled */
button.setAttribute("disabled", "disabled");
is(window.getComputedStyle(button).color, disabledColor,
":disabled style applied after disabling after unlocking");
is(button.matches(":disabled"), true,
"matches selector again after disabling");
}
function testVisited() {
var link = document.getElementById("test-link");
var visitedColor = "rgb(20, 0, 0)";
var unvisitedColor = "rgb(30, 0, 0)";
/* lock visited */
InspectorUtils.addPseudoClassLock(link, ":visited");
is(InspectorUtils.hasPseudoClassLock(link, ":visited"), true,
"hasPseudoClassLock is true after adding lock");
var color = DOMWindowUtils.getVisitedDependentComputedStyle(link,
null, "color");
is(color, visitedColor, "color is :visited color after locking");
/* lock unvisited */
InspectorUtils.addPseudoClassLock(link, ":link");
is(InspectorUtils.hasPseudoClassLock(link, ":link"), true,
"hasPseudoClassLock is true after adding :link lock");
is(InspectorUtils.hasPseudoClassLock(link, ":visited"), false,
"hasPseudoClassLock is false for :visited after adding :link lock");
var color = DOMWindowUtils.getVisitedDependentComputedStyle(link,
null, "color");
is(color, unvisitedColor, "color is :link color after locking :link");
/* lock visited back on */
InspectorUtils.addPseudoClassLock(link, ":visited");
is(InspectorUtils.hasPseudoClassLock(link, ":visited"), true,
"hasPseudoClassLock is true after adding :visited lock");
is(InspectorUtils.hasPseudoClassLock(link, ":link"), false,
"hasPseudoClassLock is false for :link after adding :visited lock");
var color = DOMWindowUtils.getVisitedDependentComputedStyle(link,
null, "color");
is(color, visitedColor, "color is :visited color after locking back on");
}
function testMultiple() {
var div = document.getElementById("test-div");
var styles = {
":hover": {
property: "color",
value: "rgb(10, 0, 0)",
defaultValue: "rgb(0, 0, 0)"
},
":active": {
property: "font-family",
value: "Arial",
defaultValue: "serif"
},
":focus": {
property: "font-weight",
value: "800",
defaultValue: "400"
}
};
for (var pseudo in styles) {
InspectorUtils.addPseudoClassLock(div, pseudo);
}
for (var pseudo in styles) {
is(InspectorUtils.hasPseudoClassLock(div, pseudo), true,
"hasPseudoClassLock is true after locking");
var style = styles[pseudo];
is(window.getComputedStyle(div).getPropertyValue(style.property),
style.value, "style for pseudo-class is applied after locking");
is(div.matches(pseudo), true,
"matches selector after locking");
}
InspectorUtils.clearPseudoClassLocks(div);
for (var pseudo in styles) {
is(InspectorUtils.hasPseudoClassLock(div, pseudo), false,
"hasPseudoClassLock is false after clearing");
is(window.getComputedStyle(div).getPropertyValue(style.property),
style.defaultValue, "style is back to default after clearing");
is(div.matches(pseudo), false,
"doesn't match selector after unlocking");
}
}
function testInvalid() {
var div = document.getElementById("test-div");
var pseudos = ["not a valid pseudo-class", ":ny-link", ":first-child"];
for (var i = 0; i < pseudos.length; i++) {
var pseudo = pseudos[i];
// basically make sure these don't crash the browser.
InspectorUtils.addPseudoClassLock(div, pseudo);
is(InspectorUtils.hasPseudoClassLock(div, pseudo), false);
InspectorUtils.removePseudoClassLock(div, pseudo);
}
}
function testNotElement() {
for (var value of [null, undefined, {}]) {
SimpleTest.doesThrow(() => InspectorUtils.hasPseudoClassLock(value, ":hover"),
"hasPseudoClassLock should throw for " + value);
SimpleTest.doesThrow(() => InspectorUtils.addPseudoClassLock(value, ":hover"),
"addPseudoClassLock should throw for " + value);
SimpleTest.doesThrow(() => InspectorUtils.removePseudoClassLock(value, ":hover"),
"removePseudoClassLock should throw for " + value);
SimpleTest.doesThrow(() => InspectorUtils.clearPseudoClassLocks(value),
"clearPseudoClassLocks should throw for " + value);
}
}
]]>
</script>
</a>
test link
</a>
<div id="test-div">
test div
</div>
<button id="test-button">
test button
</button>
</body>
</window>