webgl-with-accelerated-background-color.html

<!DOCTYPE>
<html>
<head>
<!-- Check for compositing WebGL layer and accelerated background-color layer. -->
<!-- On load, there is not WebGL layer. WebGL layer is created on the fly. -->
<style>
    #background {
        width: 200px;
        height: 200px;
        display: block;
    }
    #canvas {
        width: 200px;
        height: 200px;
        display: block;
    }
    .blue {
        width: 50px;
        height: 50px;
        background-color: rgba(0, 0, 255, 0.5);
        display: block;
        top: -50px;
        position: relative;
    }
    .composited {
        will-change: transform;
    }
</style>
<script type="text/javascript" charset="utf-8">
    if (window.testRunner)
        testRunner.waitUntilDone();

    function doTest()
    {
        window.setTimeout(function() {
            makeWebGLLayer();
            if (window.internals)
                internals.forceCompositingUpdate(document);
            if (window.testRunner) {
                window.setTimeout(function() {
                    testRunner.notifyDone();
                }, 0);
            }
        }, 0);
    }

    function initWebGL(vshader, fshader, attribs, clearColor, clearDepth)
    {
        var canvas = document.getElementById('canvas');
        var gl = canvas.getContext("webgl");
        if (!gl) {
            alert("No WebGL context found");
            return null;
        }

        gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
        gl.clearDepth(clearDepth);

        gl.enable(gl.DEPTH_TEST);
        gl.enable(gl.BLEND);
        gl.blendFunc(gl.SRC_ALPHA, gl.ONE);

        return gl;
    }

    function makeWebGLLayer()
    {
        var gl = initWebGL("", "", [], [ 1.0, 0.0, 0.0, 1.0 ], 1);
        gl.viewport(0, 0, 200, 200);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    }

    window.addEventListener('load', doTest, false);
</script>
</head>
<body>
<div id="background">
    <canvas id="canvas"></canvas>
    <div class="blue composited"></div>
</div>
</body>
</html>
chromium/third_party/blink/web_tests/compositing/webgl/webgl-with-accelerated-background-color.html
