<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            height: 5000px;
        }
        .container > div {
            margin: 20px;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
    <script src="../../resources/js-test-pre.js"></script>
    <script>
        description('Test that layout and render layer updates do not happen for style changes that do not need them.');
        window.jsTestIsAsync = true;

        var results = [];
        var result;

	// Stash the results during the test, so that we don't mutate layout inserting the output into the document.
        function expectLayoutAndLayerUpdateCounts(layoutCount, layerUpdateCount)
        {
            results.push({
                expectedLayoutCount: layoutCount,
                actualLayoutCount: internals.layoutUpdateCount(),
                expectedLayerUpdateCount: layerUpdateCount,
                actualLayerUpdateCount: internals.renderLayerPositionUpdateCount()
            });
        }

        function runTest()
        {
            internals.updateLayoutIgnorePendingStylesheetsAndRunPostLayoutTasks();
            internals.startTrackingLayoutUpdates();
            internals.startTrackingRenderLayerPositionUpdates();

            const boxes = document.querySelectorAll('.box');

            // Check that interleaved mutations and getBoundingClientRect don't trigger layer updates.
            boxes[0].style.width = "101px";
            boxes[0].getBoundingClientRect();

            expectLayoutAndLayerUpdateCounts(1, 0);

	    boxes[1].style.width = "101px";
            boxes[1].getBoundingClientRect();

            expectLayoutAndLayerUpdateCounts(2, 0);

            boxes[2].style.width = "101px";
            boxes[2].getBoundingClientRect();

            expectLayoutAndLayerUpdateCounts(3, 0);

            // Check that getBoundingClientRect without mutations doesn't do any extra work.
            for (let box of boxes) {
                box.getBoundingClientRect();
            }

            expectLayoutAndLayerUpdateCounts(3, 0);

            // Check that flushing layout via another property results in the layer update happening.
            boxes[1].offsetTop;

            expectLayoutAndLayerUpdateCounts(4, 1);

            for (let i = 0; i < results.length; i++) {
              result =  results[i];
              shouldBe('result.actualLayoutCount', 'result.expectedLayoutCount');
              shouldBe('result.actualLayerUpdateCount', 'result.expectedLayerUpdateCount');
            }

            finishJSTest();
        }

        window.addEventListener('load', function() {
            window.setTimeout(runTest, 200);
        }, false);
    </script>
</head>
<body>
  <div class="container">
    <div id="box" class="box"></div>
    <div id="box" class="box"></div>
    <div id="box" class="box"></div>
    <div id="box" class="box"></div>
    <div id="box" class="box"></div>
    <div id="box" class="box"></div>
    <div id="box" class="box"></div>
    <div id="box" class="box"></div>
  </div>

    <script src="../../resources/js-test-post.js"></script>
</body>
</html>