inrange-outofrange.html (5618B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Selector: pseudo-classes (:in-range, :out-of-range)</title> 4 <link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org" id="link1"> 5 <link rel="author" title="Chris Rebert" href="http://chrisrebert.com" id="link2"> 6 <link rel="help" href="https://html.spec.whatwg.org/multipage/#selector-in-range" id="link3"> 7 <link rel="help" href="https://html.spec.whatwg.org/multipage/#selector-out-of-range" id="link4"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="utils.js"></script> 11 <div id="log"></div> 12 <input type=number value=0 min=0 max=10 id=number1> 13 <input type=number value=0 min=0 max=10 id=number2 disabled> 14 <input type=number value=0 min=1 max=10 id=number3> 15 <input type=number value=11 min=0 max=10 id=number4> 16 <input type=number value=0 min=0 max=10 id=number5 readonly> 17 18 <input type="date" min="2005-10-10" max="2020-10-10" value="2010-10-10" id="datein"> 19 <input type="date" min="2010-10-10" max="2020-10-10" value="2005-10-10" id="dateunder"> 20 <input type="date" min="2010-10-10" max="2020-10-10" value="2030-10-10" id="dateover"> 21 22 <input type="time" min="01:00:00" max="05:00:00" value="02:00:00" id="timein"> 23 <input type="time" min="02:00:00" max="05:00:00" value="01:00:00" id="timeunder"> 24 <input type="time" min="02:00:00" max="05:00:00" value="07:00:00" id="timeover"> 25 26 <input type="week" min="2016-W05" max="2016-W10" value="2016-W07" id="weekin"> 27 <input type="week" min="2016-W05" max="2016-W10" value="2016-W02" id="weekunder"> 28 <input type="week" min="2016-W05" max="2016-W10" value="2016-W26" id="weekover"> 29 30 <input type="month" min="2000-04" max="2000-09" value="2000-06" id="monthin"> 31 <input type="month" min="2000-04" max="2000-09" value="2000-02" id="monthunder"> 32 <input type="month" min="2000-04" max="2000-09" value="2000-11" id="monthover"> 33 34 <input type="datetime-local" min="2008-03-12T23:59:59" max="2015-02-13T23:59:59" value="2012-11-28T23:59:59" id="datetimelocalin"> 35 <input type="datetime-local" min="2008-03-12T23:59:59" max="2015-02-13T23:59:59" value="2008-03-01T23:59:59" id="datetimelocalunder"> 36 <input type="datetime-local" min="2008-03-12T23:59:59" max="2015-02-13T23:59:59" value="2016-01-01T23:59:59" id="datetimelocalover"> 37 38 <!-- None of the following have range limitations since they have neither min nor max attributes --> 39 <input type="number" value="0" id="numbernolimit"> 40 <input type="date" value="2010-10-10" id="datenolimit"> 41 <input type="time" value="02:00:00" id="timenolimit"> 42 <input type="week" value="2016-W07" id="weeknolimit"> 43 <input type="month" value="2000-06" id="monthnolimit"> 44 <input type="datetime-local" value="2012-11-28T23:59:59" id="datetimelocalnolimit"> 45 46 <!-- range inputs have default minimum of 0 and default maximum of 100 --> 47 <input type="range" value="50" id="range0"> 48 49 <!-- range input's value gets immediately clamped to the nearest boundary point --> 50 <input type="range" min="2" max="7" value="5" id="range1"> 51 <input type="range" min="2" max="7" value="1" id="range2"> 52 <input type="range" min="2" max="7" value="9" id="range3"> 53 54 <!-- None of the following input types can have range limitations --> 55 <input min="1" value="0" type="text"> 56 <input min="1" value="0" type="search"> 57 <input min="1" value="0" type="url"> 58 <input min="1" value="0" type="tel"> 59 <input min="1" value="0" type="email"> 60 <input min="1" value="0" type="password"> 61 <input min="1" value="#000000" type="color"> 62 <input min="1" value="0" type="checkbox"> 63 <input min="1" value="0" type="radio"> 64 <input min="1" value="0" type="file"> 65 <input min="1" value="0" type="submit"> 66 <input min="1" value="0" type="image"> 67 <!-- The following types are also barred from constraint validation --> 68 <input min="1" value="0" type="hidden"> 69 <input min="1" value="0" type="button"> 70 <input min="1" value="0" type="reset"> 71 72 <script> 73 testSelectorIdsMatch(":in-range", ["number1", "datein", "timein", "weekin", "monthin", "datetimelocalin", "range0", "range1", "range2", "range3"], "':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"); 74 75 testSelectorIdsMatch(":out-of-range", ["number3", "number4", "dateunder", "dateover", "timeunder", "timeover", "weekunder", "weekover", "monthunder", "monthover", "datetimelocalunder", "datetimelocalover"], "':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"); 76 77 document.getElementById("number1").value = -10; 78 testSelectorIdsMatch(":in-range", ["datein", "timein", "weekin", "monthin", "datetimelocalin", "range0", "range1", "range2", "range3"], "':in-range' update number1's value < min"); 79 testSelectorIdsMatch(":out-of-range", ["number1", "number3", "number4", "dateunder", "dateover", "timeunder", "timeover", "weekunder", "weekover", "monthunder", "monthover", "datetimelocalunder", "datetimelocalover"], "':out-of-range' update number1's value < min"); 80 81 document.getElementById("number3").min = 0; 82 testSelectorIdsMatch(":in-range", ["number3", "datein", "timein", "weekin", "monthin", "datetimelocalin", "range0", "range1", "range2", "range3"], "':in-range' update number3's min < value"); 83 testSelectorIdsMatch(":out-of-range", ["number1", "number4", "dateunder", "dateover", "timeunder", "timeover", "weekunder", "weekover", "monthunder", "monthover", "datetimelocalunder", "datetimelocalover"], "':out-of-range' update number3's min < value"); 84 </script>