| <!DOCTYPE html> |
| <script src="../resources/js-test.js"></script> |
| <div id="host"> |
| <span class="red" id="span">There should be no red</span> |
| </div> |
| <script> |
| description('Checking if styles in the nested shadow roots apply properly to distributed elements.'); |
| var root = document.querySelector('#host').attachShadow({'mode': 'open'}); |
| root.innerHTML = '<div><slot></slot></div><style>::slotted(.red) { color: green; }</style>'; |
| var root2 = root.firstChild.attachShadow({'mode': 'open'}); |
| root2.innerHTML = '<style>::slotted(.red) { background-color: green; color: red; }</style><slot></slot>'; |
| var span = document.querySelector('#span'); |
| shouldBeEqualToString('getComputedStyle(span).color', 'rgb(0, 128, 0)'); |
| shouldBeEqualToString('getComputedStyle(span).backgroundColor', 'rgb(0, 128, 0)'); |
| </script> |
