OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <script src="../resources/js-test.js"></script> | 2 <script src="../resources/js-test.js"></script> |
3 <div id="host"> | 3 <div id="host"> |
4 <span class="red" id="span">There should be no red</span> | 4 <span class="red" id="span">There should be no red</span> |
5 </div> | 5 </div> |
6 <script> | 6 <script> |
7 description('Checking if styles in the nested shadow roots apply properly to dis
tributed elements.'); | 7 description('Checking if styles in the nested shadow roots apply properly to dis
tributed elements.'); |
8 var root = document.querySelector('#host').attachShadow({'mode': 'open'}); | 8 var root = document.querySelector('#host').attachShadow({'mode': 'open'}); |
9 root.innerHTML = '<div><slot></slot></div><style>::slotted(.red) { color: green;
}</style>'; | 9 root.innerHTML = '<div><slot></slot></div><style>::slotted(.red) { color: green;
}</style>'; |
10 var root2 = root.firstChild.attachShadow({'mode': 'open'}); | 10 var root2 = root.firstChild.attachShadow({'mode': 'open'}); |
11 root2.innerHTML = '<style>::slotted(.red) { background-color: green; color: red;
}</style><slot></slot>'; | 11 root2.innerHTML = '<style>::slotted(.red) { background-color: green; color: red;
}</style><slot></slot>'; |
12 var span = document.querySelector('#span'); | 12 var span = document.querySelector('#span'); |
13 shouldBeEqualToString('getComputedStyle(span).color', 'rgb(0, 128, 0)'); | 13 shouldBeEqualToString('getComputedStyle(span).color', 'rgb(0, 128, 0)'); |
14 shouldBeEqualToString('getComputedStyle(span).backgroundColor', 'rgb(0, 128, 0)'
); | 14 shouldBeEqualToString('getComputedStyle(span).backgroundColor', 'rgb(0, 128, 0)'
); |
15 </script> | 15 </script> |
OLD | NEW |