benjamin@webkit.org | f93abb9 | 2015-02-02 20:10:17 +0000 | [diff] [blame] | 1 | <!doctype html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <script src="../../resources/js-test-pre.js"></script> |
| 5 | <style> |
| 6 | div { |
| 7 | background-color: white; |
| 8 | } |
| 9 | input[type="checkbox"]:not(:checked) + div + div { |
| 10 | background-color: red; |
| 11 | } |
| 12 | input[type="checkbox"] + div + div { |
| 13 | background-color: lime; |
| 14 | } |
| 15 | </style> |
| 16 | </head> |
| 17 | <body> |
| 18 | <div id="to-hide-after-testing"> |
| 19 | <input type="checkbox"> |
| 20 | <div id="foo-with-renderer">foo</div> |
| 21 | <div id="bar-with-renderer">bar</div> |
| 22 | </div> |
| 23 | <div style="display:none;"> |
| 24 | <input type="checkbox"> |
| 25 | <div id="foo-without-renderer">foo</div> |
| 26 | <div id="bar-without-renderer">bar</div> |
| 27 | </div> |
| 28 | </body> |
| 29 | <script> |
| 30 | description('Test direct adjacent style update on changes of the :checked state of input element.'); |
| 31 | |
| 32 | function testColor(expectMatch) { |
| 33 | shouldBeEqualToString('getComputedStyle(document.getElementById("foo-with-renderer")).backgroundColor', 'rgb(255, 255, 255)'); |
| 34 | shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor', expectMatch ? 'rgb(0, 255, 0)': 'rgb(255, 0, 0)'); |
| 35 | shouldBeEqualToString('getComputedStyle(document.getElementById("foo-without-renderer")).backgroundColor', 'rgb(255, 255, 255)'); |
| 36 | shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor', expectMatch ? 'rgb(0, 255, 0)' : 'rgb(255, 0, 0)'); |
| 37 | } |
| 38 | |
| 39 | function setChecked(value) { |
| 40 | var allCheckboxes = document.querySelectorAll("input[type=checkbox]"); |
| 41 | for (var i = 0; i < allCheckboxes.length; ++i) |
| 42 | allCheckboxes[i].checked = value; |
| 43 | } |
| 44 | |
| 45 | debug("Initial state is not checked."); |
| 46 | testColor(false); |
| 47 | |
| 48 | debug("Checking the boxes through API."); |
| 49 | setChecked(true); |
| 50 | testColor(true); |
| 51 | |
| 52 | debug("Unchecking through API"); |
| 53 | setChecked(false); |
| 54 | testColor(false); |
| 55 | |
| 56 | document.getElementById('to-hide-after-testing').style.display = 'none'; |
| 57 | </script> |
| 58 | <script src="../../resources/js-test-post.js"></script> |
| 59 | </html> |