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