<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<style>
/* Make all divs relayout boundaries. */
div {
    width: 100px;
    height: 100px;
    overflow: hidden;
}
</style>
<div id="relayout-common-ancestor"><div><div></div></div><div><div></div></div></div>
<script>
function dirtyLayout()
{
    var container = document.getElementById('relayout-common-ancestor');
    for (var i = 0; i < container.childNodes.length; ++i) {
        var child = container.childNodes[i].firstChild;
        child.style.width = "99px";
        // Force a style recalc that doesn't force a layout so that the
        // needsLayout count is incremented.
        getComputedStyle(child).color;
    }
}

document.documentElement.offsetTop;

// Pass quiet=true here so that the added nodes from the shouldBe don't
// mess up the needsLayoutCount on line 45.
if (window.internals)
    shouldBe("window.internals.needsLayoutCount()", "0", true);

dirtyLayout();

// The tree appears as following, with the starred nodes dirty:
//       div [relayout-common-ancestor]
//      /   \
//   *div  *div
//    /      /
// *div   *div
if (window.internals)
    shouldBe("window.internals.needsLayoutCount()", "4");

document.documentElement.offsetTop;

if (window.internals)
    shouldBe("window.internals.needsLayoutCount()", "0");
</script>