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