| <!DOCTYPE html> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <style> |
| .inrange, .outofrange { |
| background-color: red |
| } |
| input:in-range + .inrange, input:out-of-range + .outofrange { |
| background-color: green |
| } |
| </style> |
| <div> |
| <input type="number" min="1" max="10" value="20" id="t1"> |
| <span id="r1" class="inrange">This text should have a green background</span> |
| </div> |
| <div> |
| <input type="number" min="1" max="10" value="5" id="t2"> |
| <span id="r2" class="outofrange">This text should have a green background</span> |
| </div> |
| <div> |
| <input type="number" min="1" max="10" value="20" id="t3"> |
| <span id="r3" class="inrange">This text should have a green background</span> |
| </div> |
| <div> |
| <input type="number" min="1" max="10" value="5" id="t4"> |
| <span id="r4" class="outofrange">This text should have a green background</span> |
| </div> |
| <div> |
| <input type="number" min="1" max="10" value="20" id="t5"> |
| <span id="r5" class="inrange">This text should have a green background</span> |
| </div> |
| <div> |
| <input type="number" min="1" max="10" value="5" id="t6"> |
| <span id="r6" class="outofrange">This text should have a green background</span> |
| </div> |
| <div> |
| <input type="number" min="1" max="10" value="20" id="t7"> |
| <span id="r7" class="inrange">This text should have a green background</span> |
| </div> |
| <div> |
| <input type="number" min="1" max="10" value="5" id="t8"> |
| <span id="r8" class="outofrange">This text should have a green background</span> |
| </div> |
| <script> |
| test(() => { |
| assert_equals(getComputedStyle(r1).backgroundColor, "rgb(255, 0, 0)", "Precondition."); |
| t1.value = "5"; |
| assert_equals(getComputedStyle(r1).backgroundColor, "rgb(0, 128, 0)", ":in-range change applied."); |
| }, "Change an out-of-range number input value to be in-range through DOM property."); |
| |
| test(() => { |
| assert_equals(getComputedStyle(r2).backgroundColor, "rgb(255, 0, 0)", "Precondition."); |
| t2.value = "20"; |
| assert_equals(getComputedStyle(r2).backgroundColor, "rgb(0, 128, 0)", ":out-of-range change applied."); |
| }, "Change an in-range number input value to be out-of-range through DOM property."); |
| |
| test(() => { |
| assert_true(!!window.eventSender, "Needs window.eventSender to test keyboard input.") |
| assert_equals(getComputedStyle(r3).backgroundColor, "rgb(255, 0, 0)", "Precondition."); |
| t3.focus(); |
| t3.select(); |
| eventSender.keyDown("5"); |
| assert_equals(getComputedStyle(r3).backgroundColor, "rgb(0, 128, 0)", ":in-range change applied."); |
| }, "Change an out-of-range number input value to be in-range with keyboard input."); |
| |
| test(() => { |
| assert_true(!!window.eventSender, "Needs window.eventSender to test keyboard input.") |
| assert_equals(getComputedStyle(r4).backgroundColor, "rgb(255, 0, 0)", "Precondition."); |
| t4.focus(); |
| t4.select(); |
| eventSender.keyDown("2"); |
| eventSender.keyDown("0"); |
| assert_equals(getComputedStyle(r4).backgroundColor, "rgb(0, 128, 0)", ":out-of-range change applied."); |
| }, "Change an in-range number input value to be out-of-range with keyboard input."); |
| |
| test(() => { |
| assert_equals(getComputedStyle(r5).backgroundColor, "rgb(255, 0, 0)", "Precondition."); |
| t5.setAttribute("value", "5"); |
| assert_equals(getComputedStyle(r5).backgroundColor, "rgb(0, 128, 0)", ":in-range change applied."); |
| }, "Change an out-of-range number input value to be in-range with setAttribute."); |
| |
| test(() => { |
| assert_equals(getComputedStyle(r6).backgroundColor, "rgb(255, 0, 0)", "Precondition."); |
| t6.setAttribute("value", "20"); |
| assert_equals(getComputedStyle(r6).backgroundColor, "rgb(0, 128, 0)", ":out-of-range change applied."); |
| }, "Change an in-range number input value to be out-of-range with setAttribute."); |
| |
| test(() => { |
| assert_equals(getComputedStyle(r7).backgroundColor, "rgb(255, 0, 0)", "Precondition."); |
| t7.setAttribute("max", "40"); |
| assert_equals(getComputedStyle(r7).backgroundColor, "rgb(0, 128, 0)", ":in-range change applied."); |
| }, "Change an out-of-range number input value to be in-range by changing max attribute."); |
| |
| test(() => { |
| assert_equals(getComputedStyle(r8).backgroundColor, "rgb(255, 0, 0)", "Precondition."); |
| t8.setAttribute("min", "10"); |
| assert_equals(getComputedStyle(r8).backgroundColor, "rgb(0, 128, 0)", ":out-of-range change applied."); |
| }, "Change an in-range number input value to be out-of-range by changing min attribute."); |
| |
| </script> |
