246 lines
9.0 KiB
HTML
246 lines
9.0 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<style>
|
|
input {
|
|
background-color: rgb(1, 2, 3);
|
|
color: rgb(4, 5, 6);
|
|
}
|
|
input:in-range {
|
|
background-color: rgb(7, 8, 9);
|
|
}
|
|
input:out-of-range {
|
|
color: rgb(10, 11, 12);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="with-renderer">
|
|
<input type="number" id="number-with-renderer"></input>
|
|
<input type="range" id="range-with-renderer"></input>
|
|
</div>
|
|
<div style="display:none;">
|
|
<input type="number" id="number-without-renderer"></input>
|
|
<input type="range" id="range-without-renderer"></input>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
description('Test the style update with the :in-range and :out-of-range pseudo classes.');
|
|
|
|
function elementsWithStyle(propertyName, propertyValue) {
|
|
let filteredElements = [];
|
|
let allInput = document.querySelectorAll("input");
|
|
for (let inputElement of allInput) {
|
|
let computedStyle = getComputedStyle(inputElement);
|
|
if (computedStyle[propertyName] === propertyValue)
|
|
filteredElements.push(inputElement.id);
|
|
}
|
|
return filteredElements;
|
|
}
|
|
function inRange() {
|
|
return elementsWithStyle("background-color", "rgb(7, 8, 9)");
|
|
}
|
|
function outOfRange() {
|
|
return elementsWithStyle("color", "rgb(10, 11, 12)");
|
|
}
|
|
|
|
function setAttribute(typeString, attributeName, attributeValue) {
|
|
let inputElements = document.querySelectorAll("input[type=\"" + typeString + "\"]");
|
|
for (let inputElement of inputElements) {
|
|
inputElement.setAttribute(attributeName, attributeValue);
|
|
}
|
|
}
|
|
|
|
function removeAttribute(typeString, attributeName) {
|
|
let inputElements = document.querySelectorAll("input[type=\"" + typeString + "\"]");
|
|
for (let inputElement of inputElements) {
|
|
inputElement.removeAttribute(attributeName);
|
|
}
|
|
}
|
|
|
|
debug("Initial state.");
|
|
shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
// Define a minimum.
|
|
debug("Set a valid minimum on number.");
|
|
setAttribute("number", "min", "42");
|
|
shouldBe("inRange()", "['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Set a valid minimum on range.");
|
|
setAttribute("range", "min", "42");
|
|
shouldBe("inRange()", "['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Set a value above minimum on number.");
|
|
setAttribute("number", "value", "43");
|
|
shouldBe("inRange()", "['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Set a value above minimum on range.");
|
|
setAttribute("range", "value", "43");
|
|
shouldBe("inRange()", "['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Set a value under minimum on number.");
|
|
setAttribute("number", "value", "41");
|
|
shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "['number-with-renderer', 'number-without-renderer']");
|
|
|
|
debug("Set a value under minimum on range.");
|
|
setAttribute("range", "value", "41");
|
|
shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "['number-with-renderer', 'number-without-renderer']");
|
|
|
|
debug("Set an invalid minimum on number.");
|
|
setAttribute("number", "min", "WebKit!");
|
|
shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Set an invalid minimum on range.");
|
|
setAttribute("range", "min", "WebKit!");
|
|
shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
// Define a maximum.
|
|
debug("Set a valid maximum on number.");
|
|
setAttribute("number", "max", "101");
|
|
shouldBe("inRange()", "['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Set a valid maximum on range.");
|
|
setAttribute("range", "max", "101");
|
|
shouldBe("inRange()", "['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Set a value under maximum on number.");
|
|
setAttribute("number", "value", "0");
|
|
shouldBe("inRange()", "['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Set a value under maximum on range.");
|
|
setAttribute("range", "value", "0");
|
|
shouldBe("inRange()", "['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Set a value over maximum on number.");
|
|
setAttribute("number", "value", "103");
|
|
shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "['number-with-renderer', 'number-without-renderer']");
|
|
|
|
debug("Set a value over maximum on range.");
|
|
setAttribute("range", "value", "103");
|
|
shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "['number-with-renderer', 'number-without-renderer']");
|
|
|
|
debug("Set an invalid maximum on number.");
|
|
setAttribute("number", "max", "WebKit!");
|
|
shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Set an invalid maximum on range.");
|
|
setAttribute("range", "max", "WebKit!");
|
|
shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
// Set a full state in range.
|
|
debug("Set values, min and max in range on both");
|
|
setAttribute("range", "value", "42");
|
|
setAttribute("range", "min", "1");
|
|
setAttribute("range", "max", "103");
|
|
setAttribute("number", "value", "-42");
|
|
setAttribute("number", "min", "-100");
|
|
setAttribute("number", "max", "-3");
|
|
shouldBe("inRange()", "['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
// A disabled input should not match either selectors.
|
|
debug("Disable range");
|
|
setAttribute("range", "disabled", "");
|
|
shouldBe("inRange()", "['number-with-renderer', 'number-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Disable number");
|
|
setAttribute("number", "disabled", "");
|
|
shouldBe("inRange()", "[]");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Set number out of range");
|
|
setAttribute("number", "value", "55");
|
|
shouldBe("inRange()", "[]");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Set range out of range");
|
|
setAttribute("range", "value", "1024");
|
|
shouldBe("inRange()", "[]");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Re-enable range");
|
|
removeAttribute("range", "disabled");
|
|
shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Re-enable number");
|
|
removeAttribute("number", "disabled");
|
|
shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "['number-with-renderer', 'number-without-renderer']");
|
|
|
|
// A readonly input should not match either selectors.
|
|
debug("Make number read-only");
|
|
setAttribute("number", "readonly", "");
|
|
shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Make range read-only");
|
|
setAttribute("range", "readonly", "");
|
|
shouldBe("inRange()", "[]");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Set range in range");
|
|
setAttribute("range", "value", "74");
|
|
shouldBe("inRange()", "[]");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Set number in range");
|
|
setAttribute("number", "value", "-69");
|
|
shouldBe("inRange()", "[]");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Remove read-only from number");
|
|
removeAttribute("number", "readonly");
|
|
shouldBe("inRange()", "['number-with-renderer', 'number-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Remove read-only from range");
|
|
removeAttribute("range", "readonly");
|
|
shouldBe("inRange()", "['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Remove min from number");
|
|
removeAttribute("number", "min");
|
|
shouldBe("inRange()", "['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Remove max from number");
|
|
removeAttribute("number", "max");
|
|
shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Remove min from range");
|
|
removeAttribute("range", "min");
|
|
shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
debug("Remove max from range");
|
|
removeAttribute("range", "min");
|
|
shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
|
|
shouldBe("outOfRange()", "[]");
|
|
|
|
// Hides the elements to make the result page pretty.
|
|
document.getElementById("with-renderer").style.display = "none";
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</html>
|