<!DOCTYPE html>
<script src="../resources/run-after-layout-and-paint.js"></script>
<style>
.box {
    display: inline-block;
    position: relative;
    width: 200px;
    height: 200px;
    overflow: auto;
    will-change: transform;
}
#space1 {
    width: 300px;
    height: 300px;
}
#space2 {
    width: 800px;
    height: 800px;
}
</style>

This test verifies that composited scrollbars update correctly when removed and
reinserted with a different content size.<br><br>

It passes if both boxes have identical scrollbars.<br><br>

<div class="box">
    <div id="space1"></div>
</div>
<div class="box">
    <div id="space2"></div>
</div>
<script>

if (window.testRunner)
    testRunner.waitUntilDone();

runAfterLayoutAndPaint(function() {
    var space = document.querySelector("#space1");

    space.style.height = "0";
    space.style.width = "0";

    // Force layout (but not compositing update).
    // Scrollbars are destroyed.
    space.clientWidth;

    space.style.height = "800px";
    space.style.width = "800px";

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