<!DOCTYPE html>
<title>
  Tests that there is no crash when a layer's backing provider layer changes
  and the layer is then removed.
 </title>

<style>
   .positioned {
       position: absolute;
       left: 25px;
       width: 100px;
       height: 100px;
   }

   .composited {
       transform: translateZ(0);
       background-color: blue;
   }

   .stackingContext {
       position: absolute;
       z-index: 0;
   }

   #child1 {
       background-color: orange;
   }

   #child2 {
       background-color: yellow;
   }

   #grandchild {
       background-color: pink;
   }

   #container {
       background-color: green;
   }
</style>

<script>
    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

    function triggerLayout() {
        document.body.scrollTop;
    }

    window.onload = function() {
        triggerLayout();

        document.getElementById('container').classList.add("stackingContext");
        document.getElementById('child1').classList.add("composited");
        triggerLayout();

        document.getElementById('grandchild').classList.remove("positioned");
        triggerLayout();

        if (window.testRunner)
            testRunner.notifyDone();
    }
</script>

<p>This test should not crash or assert.</p>
<div class="composited positioned"></div>
<div id="container" class="positioned">
    <div id="child1" class="positioned"></div>
    <div id="child2" class="positioned">
        <div id="grandchild" class="positioned"></div>
    </div>
</div>