<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<style>
    iframe { width: 100px; height: 100px; }
    iframe.wider { width: 200px; }
</style>
<iframe id="frame" srcdoc="<!DOCTYPE html>iframe" onload="runTests()"></iframe>
<script>
    description("Style recalc/layout when reading clientWidth of documentElement in iframe.");

    var jsTestIsAsync = true;

    shouldBeDefined(window.internals);

    var originalOverlayScrollbars = internals.runtimeFlags.overlayScrollbarsEnabled;
    internals.runtimeFlags.overlayScrollbarsEnabled = true;

    function runTests() {
        clientWidthBefore = frame.contentDocument.documentElement.clientWidth;
        frame.className = "wider";
        clientWidthAfter = frame.contentDocument.documentElement.clientWidth;

        shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "0");
        shouldBe("clientWidthBefore", "100");
        shouldBe("clientWidthAfter", "200");

        internals.runtimeFlags.overlayScrollbarsEnabled = originalOverlayScrollbars;
        finishJSTest();
    }
</script>