1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: Testing dynamic changes and the '+' combinator</title>
5 <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu">
6 <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
7 <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors">
8 <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#attribute-selectors">
9 <meta name="flags" content="dom">
10 <meta name="assert" content="Dynamically changing an attribute should cause selectors using '+' to match as needed.">
11 <style type="text/css">
12 div { color: red; }
13 [class=foo] + div { color: green; }
14 [class=foo] + div + div { color: green; }
15 [class=foo] + div + div + div { color: green; }
16 [class=foo] + div + div + div + div { color: green; }
17 [class=foo] + div + div + div + div + div { color: green; }
18 [class=foo] + div + div + div + div + div + div { color: green; }
19 [class=foo] + div + div + div + div + div + div + div { color: green; }
20 [class=foo] + div + div + div + div + div + div + div + div { color: green; }
21 [class=foo] + div + div + div + div + div + div + div + div + div { color: green; }
22 [class=foo] + div + div + div + div + div + div + div + div + div + div { color: green; }
23 </style>
24 <script type="text/javascript">
25 window.onload = function() {
26 document.body.offsetWidth;
27 document.getElementById("test").className = "foo";
28 }
29 </script>
30 </head>
31 <body>
32 <div id="test"></div>
33 <div>This should be green</div>
34 <div>This should be green</div>
35 <div>This should be green</div>
36 <div>This should be green</div>
37 <div>This should be green</div>
38 <div>This should be green</div>
39 <div>This should be green</div>
40 <div>This should be green</div>
41 <div>This should be green</div>
42 <div>This should be green</div>
43 </body>
44 </html>