| <!DOCTYPE html> |
| <meta charset=utf-8> |
| <title>Selector: pseudo-classes (:in-range, :out-of-range)</title> |
| <link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org" id=link1> |
| <link rel=help href="https://html.spec.whatwg.org/multipage/#pseudo-classes" id=link2> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="utils.js"></script> |
| <div id="log"></div> |
| <input type=number value=0 min=0 max=10 id=number1> |
| <input type=number value=0 min=0 max=10 id=number2 disabled> |
| <input type=number value=0 min=1 max=10 id=number3> |
| <input type=number value=11 min=0 max=10 id=number4> |
| |
| <script> |
| testSelector(":in-range", ["number1"], "':in-range' matches all elements that are candidates for constraint validation, have range limitations, and that are neither suffering from an underflow nor suffering from an overflow"); |
| |
| testSelector(":out-of-range", ["number3", "number4"], "':out-of-range' matches all elements that are candidates for constraint validation, have range limitations, and that are either suffering from an underflow or suffering from an overflow"); |
| |
| document.getElementById("number1").value = -10; |
| testSelector(":in-range", [], "':in-range' update number1's value < min"); |
| testSelector(":out-of-range", ["number1", "number3", "number4"], "':out-of-range' update number1's value < min"); |
| |
| document.getElementById("number3").min = 0; |
| testSelector(":in-range", ["number3"], "':in-range' update number3's min < value"); |
| testSelector(":out-of-range", ["number1", "number4"], "':out-of-range' update number3's min < value"); |
| </script> |
