| <!DOCTYPE html> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <style> |
| #sibling { background-color: red } |
| input:in-range + #sibling { background-color: green } |
| </style> |
| <div> |
| <input id="input" type="number" min="1" max="10" value="20"> |
| <span id="sibling">This text should have a green background</span> |
| </div> |
| <script> |
| test(() => { |
| assert_equals(getComputedStyle(sibling).backgroundColor, "rgb(255, 0, 0)", |
| "Sibling background initially red."); |
| input.setAttribute("value", "5"); |
| assert_equals(getComputedStyle(sibling).backgroundColor, "rgb(0, 128, 0)", |
| "Sibling green after input value becomes in range."); |
| }, "Check that input.setAttribute('value') affects :in-range"); |
| </script> |
