<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
  .class + span { color:green }
</style>
<div id="host1"><div id="host2"></div>Remove me</div>
<script>
  test(() => {
    // Create shadow for outer host.
    host1.attachShadow({mode:"open"});

    // Add two children for doing sibling invalidation in inner shadow.
    var root2 = host2.attachShadow({mode:"open"});
    root2.innerHTML = "<span></span><span></span>";
    var span = root2.firstChild;

    // Force style and layout update.
    document.body.offsetTop;

    // Schedule sibling invalidation.
    span.setAttribute("class", "class");
    // Reschedule sibling invalidation on shadow root.
    span.remove();

    // Trigger re-distribution in outer shadow which triggers
    // lazy-reattach-if-attached on #host2.
    host1.lastChild.remove();
  }, "DetachLayoutTree on a shadow host should clear style invalidations on " +
     "its shadow root. This test should not trigger a DCHECK nor crash.");
</script>