| <!doctype html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| div { |
| background-color: white; |
| } |
| input[type="checkbox"]:not(:checked) + div + div { |
| background-color: red; |
| } |
| input[type="checkbox"] + div + div { |
| background-color: lime; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="to-hide-after-testing"> |
| <input type="checkbox"> |
| <div id="foo-with-renderer">foo</div> |
| <div id="bar-with-renderer">bar</div> |
| </div> |
| <div style="display:none;"> |
| <input type="checkbox"> |
| <div id="foo-without-renderer">foo</div> |
| <div id="bar-without-renderer">bar</div> |
| </div> |
| </body> |
| <script> |
| description('Test direct adjacent style update on changes of the :checked state of input element.'); |
| |
| function testColor(expectMatch) { |
| shouldBeEqualToString('getComputedStyle(document.getElementById("foo-with-renderer")).backgroundColor', 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor', expectMatch ? 'rgb(0, 255, 0)': 'rgb(255, 0, 0)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("foo-without-renderer")).backgroundColor', 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor', expectMatch ? 'rgb(0, 255, 0)' : 'rgb(255, 0, 0)'); |
| } |
| |
| function setChecked(value) { |
| var allCheckboxes = document.querySelectorAll("input[type=checkbox]"); |
| for (var i = 0; i < allCheckboxes.length; ++i) |
| allCheckboxes[i].checked = value; |
| } |
| |
| debug("Initial state is not checked."); |
| testColor(false); |
| |
| debug("Checking the boxes through API."); |
| setChecked(true); |
| testColor(true); |
| |
| debug("Unchecking through API"); |
| setChecked(false); |
| testColor(false); |
| |
| document.getElementById('to-hide-after-testing').style.display = 'none'; |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
