Chaging pseudoClass (:enabled) should cause distribution
[WebKit-https.git] / LayoutTests / fast / dom / shadow / pseudoclass-update-enabled-optgroup.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="resources/polyfill.js"></script>
5 <script src="../../js/resources/js-test-pre.js"></script>
6 </head>
7
8 <body>
9
10 <p>When an optgroup element became 'enabled' or not-'enabled', distribution should happen.</p>
11 <p>Since an optgroup element does not create a renderer, we cannot check this using reftest.</p>
12
13 <div id="container">
14     <div id="host1">
15         <optgroup id="optgroup1">optgroup 1</optgroup>
16         <optgroup id="optgroup2">optgroup 2</optgroup>
17     </div>
18
19     <div id="host2">
20         <optgroup id="optgroup3" disabled>optgroup 3</optgroup>
21         <optgroup id="optgroup4" disabled>optgroup 4</optgroup>
22     </div>
23 </div>
24
25 <pre id="console"></pre>
26
27 <script>
28 jsTestIsAsync = true;
29
30 var shadowRoot1 = new WebKitShadowRoot(host1);
31 var shadowRoot2 = new WebKitShadowRoot(host2);
32
33 shadowRoot1.innerHTML = '<content select=":enabled">';
34 shadowRoot2.innerHTML = '<content select=":enabled">';
35
36 var content1 = shadowRoot1.querySelector('content');
37 var content2 = shadowRoot2.querySelector('content');
38
39 setTimeout(function() {
40     optgroup2.setAttribute('disabled', true);
41     optgroup4.removeAttribute('disabled');
42
43     nodes1 = content1.getDistributedNodes();
44     shouldBe('nodes1.length', '1');
45     shouldBe('nodes1.item(0).innerHTML', '"optgroup 1"');
46
47     nodes2 = content2.getDistributedNodes();
48     shouldBe('nodes2.length', '1');
49     shouldBe('nodes2.item(0).innerHTML', '"optgroup 4"');
50
51     container.innerHTML = "";
52     finishJSTest();
53 }, 0);
54
55 </script>
56 <script src="../../js/resources/js-test-post.js"></script>
57 </body>
58 </html>