blob: 52026086e99a7bae64c7799e9d88b1ad44188d03 [file] [log] [blame]
benjamin@webkit.orgf93abb92015-02-02 20:10:17 +00001<!doctype html>
2<html>
3<head>
4<script src="../../resources/js-test-pre.js"></script>
5<style>
6div {
7 background-color: white;
8}
9input[type="checkbox"]:not(:checked) + div + div {
10 background-color: red;
11}
12input[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>
30description('Test direct adjacent style update on changes of the :checked state of input element.');
31
32function 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
39function 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
45debug("Initial state is not checked.");
46testColor(false);
47
48debug("Checking the boxes through API.");
49setChecked(true);
50testColor(true);
51
52debug("Unchecking through API");
53setChecked(false);
54testColor(false);
55
56document.getElementById('to-hide-after-testing').style.display = 'none';
57</script>
58<script src="../../resources/js-test-post.js"></script>
59</html>