| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <!-- crbug.com/246300 --> |
| <!-- #host shadow root --> |
| <template id="t"> |
| <style> |
| #host { |
| height: 50px; |
| width: 50px; |
| background: lightgray; |
| } |
| </style> |
| <div id="container"></div> |
| </template> |
| |
| <!-- #container shadow root --> |
| <template id="t2"> |
| <style> |
| div { |
| background: black; |
| height: 40px; |
| width: 40px; |
| } |
| #green { |
| background: green; |
| } |
| </style> |
| <div id="green"></div> |
| </template> |
| |
| <div id="host"></div> |
| </body> |
| <script> |
| description('Test for Issue: 246300: Styles in nested shadows are not recalculated correctly on insertion.'); |
| |
| var backgroundColor; |
| |
| function shouldHaveBackgroundColor(element, bg) |
| { |
| backgroundColor = window.getComputedStyle(element).backgroundColor; |
| shouldBeEqualToString("backgroundColor", bg); |
| } |
| |
| var sr = host.attachShadow({mode: 'open'}); |
| sr.appendChild(t.content.cloneNode(true)); |
| var container = sr.querySelector('#container'); |
| var sr2 = container.attachShadow({mode: 'open'}); |
| sr2.appendChild(t2.content.cloneNode(true)); |
| |
| jsTestIsAsync = true; |
| setTimeout(function() { |
| container.remove(); |
| sr.appendChild(container); |
| |
| shouldHaveBackgroundColor(sr2.getElementById('green'), 'rgb(0, 128, 0)'); |
| finishJSTest(); |
| }, 0); |
| </script> |
| </html> |
