<!DOCTYPE html>

<html>
<head>
    <style>
        body {
            height: 2000px;
            -webkit-font-smoothing: subpixel-antialiased;
        }
        
        .box {
            height: 100px;
            width: 100px;
            background-color: rgba(0, 0, 128, 0.6);
            margin: 10px;
        }
        
        .composited {
            transform: translateZ(0);
        }

        p {
            line-height: 20px;
        }
        
        .tiled {
            width: 5000px;
        }
    </style>
    <script>
        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }

        function doAfterReload()
        {
            setTimeout(function() {
                document.getElementById('become-tiled').classList.add('tiled');
                setTimeout(function() {
                    if (window.internals)
                        document.getElementById('layers').innerText = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_TILE_CACHES);

                    delete window.localStorage.stage;

                    if (window.testRunner)
                        testRunner.notifyDone();
                }, 0);
            }, 0);
        }

        function doOnFirstLoad()
        {
            window.localStorage.stage = 1;
            if (window.internals) {
                internals.setFontSmoothingEnabled(true);
                internals.settings.setSubpixelAntialiasedLayerTextEnabled(true)
            }

            // Reload so that the setting affects page tiles.
            location.reload();
        }

        function doTest()
        {
            if (window.localStorage.stage)
                doAfterReload();
            else
                doOnFirstLoad();
        }
        window.addEventListener('load', doTest, false);
    </script>
</head>
<body>

<div class="composited box">
    Normal layer
</div>

<div class="tiled composited box">
    Tiled layer
</div>

<div id="become-tiled" class="composited box">
    Become-tiled layer
</div>

<pre id="layers"></pre>
</body>
</html>