detach-reattach-shadow.html | Explore in Territory

<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style id="shadow-style">
  .a { width: 100px; height: 100px; background-color: green; }
</style>
<script>
    var inner;
    onload = function() {
        var root = document.getElementById('root');
        var shadowContainer = document.createElement('div');
        root.appendChild(shadowContainer);

        var shadowRoot = shadowContainer.attachShadow({mode: 'open'});
        shadowRoot.appendChild(document.querySelector('#shadow-style'));
        var mid = document.createElement('div');
        shadowRoot.appendChild(mid);

        inner = document.createElement('div');
        mid.appendChild(inner);

        inner.offsetTop;
        inner.classList.add('a');
        shadowContainer.remove();
        root.offsetTop;
        root.appendChild(shadowContainer);
        inner.offsetTop;
        inner.classList.remove('a');

        shouldBe('getComputedStyle(inner).backgroundColor', '"rgba(0, 0, 0, 0)"');
    }
</script>
<div id="root"></div>

chromium/third_party/blink/web_tests/fast/css/invalidation/detach-reattach-shadow.html