<!DOCTYPE html>
<html>
<script>
    function doUpdate()
    {
        document.getElementsByTagName('canvas')[0].style.top = "60px";

        if (window.testRunner) {
            testRunner.displayAndTrackRepaints();
            testRunner.notifyDone();
        }
    }

    function init()
    {
        if (window.testRunner)
            doUpdate();
        else {
            // Delay canvas layer update if test runs without testRunner to
            // allow first layer update to be processed on UI side.
            window.setTimeout(doUpdate, 100);
        }
    }
</script>
<body onload="init()">
<script>
if (window.testRunner)
    testRunner.waitUntilDone();
</script>
<span id="description" style="color: white">
This test is only useful as a pixel test. You should see red canvas of size 100x100.
</span>
<br>
<style>
canvas {
    outline: 1px solid blue;
}
body {
    background-color: darkblue;
}
</style>
<script>

if (window.testRunner) {
    testRunner.dumpAsText(true);
    document.getElementById("description").style.position = "absolute";
    document.getElementById("description").style.top = "-5000px"; 
}

var can = document.createElement('canvas');
can.width = can.height = 100;
can.style.position = "absolute";
can.style.left = "40px";
can.style.top = "40px";
document.body.appendChild(can);
var ctx = can.getContext("experimental-webgl");
ctx.clearColor(1, 0, 0, 1);
ctx.clear(ctx.COLOR_BUFFER_BIT);

if (window.testRunner)
    testRunner.displayAndTrackRepaints();
</script>
</body>
</html>