remove-and-insert-style.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/fast/dom/shadow/remove-and-insert-style.html
