<!DOCTYPE html>

<html>
<head>
    <style>
        #box {
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: blue;
        }
        
        .composited {
            -webkit-transform: translateZ(0);
        }
        
        iframe {
            display: none;
        }
    </style>
    <script>
        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }

        function doTest()
        {
            document.body.offsetWidth;
            
            if (window.internals)
                internals.startTrackingLayerFlushes();

            document.getElementById('box').classList.add('composited');

            if (window.internals)
                internals.updateLayoutIgnorePendingStylesheetsAndRunPostLayoutTasks();

            window.setTimeout(function() {
                var flushCount = 0;
                if (window.internals)
                    flushCount = internals.layerFlushCount();
                
                var result;
                if (flushCount == 1 || flushCount == 2)
                    result = 'PASS: saw 1 or 2 layer flushes';
                else
                    result = 'FAIL: saw ' + flushCount + ' layer flushes, expected 1 or possibly 2.';
                    
                document.getElementById('result').textContent = result;

                if (window.testRunner)
                    testRunner.notifyDone();
            }, 10);
        }
        
        window.addEventListener('load', doTest, false);
    </script>
</head>
<body>
    <p id="result"></p>
    <div id="box"></div>
    <iframe src="resources/subframe.html"></iframe>
</body>
</html>