<canvas style="width:100px; height:100px;">
<script type="text/javascript">
    if (window.testRunner)
        testRunner.waitUntilDone();

    var canvas = document.querySelector("canvas");

    function draw() {
        // For the purpose of this test, we want the backing store metrics to
        // not match the layout metrics.
        var scaleFactor = 2;
        canvas.width = canvas.clientWidth * scaleFactor;
        canvas.height = canvas.clientHeight * scaleFactor;

        var gl = canvas.getContext("webgl");
        gl.clearColor(0, 0, 0, 1);
        gl.clear(gl.COLOR_BUFFER_BIT);
    }

    // Size the canvas once at the initial 100px by 100px size.
    draw();

    // Now change the layout size of the canvas and in the next animation
    // frame, after we know the layout size has taken effect, change the
    // size of the backing store.
    canvas.style.width = "50px";
    canvas.style.height = "50px";
    window.requestAnimationFrame(function() {
        draw();
        if (window.testRunner)
            testRunner.notifyDone();
    });

</script>
</canvas>