| <!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> |
