Changing pseudoClass (:disabled) should cause distribution.
[WebKit-https.git] / LayoutTests / fast / dom / shadow / pseudoclass-update-disabled-option.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 option element became 'disabled' or not-'disabled', distribution should happen.</p>
11 <p>Since an option element does not create a renderer, we cannot check this using reftest.</p>
12
13 <div id="container">
14     <div id="host1">
15         <option id="option1">option 1</option>
16         <option id="option2">option 2</option>
17     </div>
18
19     <div id="host2">
20         <option id="option3" disabled>option 3</option>
21         <option id="option4" disabled>option 4</option>
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=":disabled">';
34 shadowRoot2.innerHTML = '<content select=":disabled">';
35
36 var content1 = shadowRoot1.querySelector('content');
37 var content2 = shadowRoot2.querySelector('content');
38
39 setTimeout(function() {
40     option2.setAttribute('disabled', true);
41     option4.removeAttribute('disabled');
42
43     nodes1 = content1.getDistributedNodes();
44     shouldBe('nodes1.length', '1');
45     shouldBe('nodes1.item(0).innerHTML', '"option 2"');
46
47     nodes2 = content2.getDistributedNodes();
48     shouldBe('nodes2.length', '1');
49     shouldBe('nodes2.item(0).innerHTML', '"option 3"');
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>