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

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

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

        const 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";
    requestAnimationFrame(function() {
        draw();
        if (window.testRunner) {
            // Need to give the test system at least a frame to paint
            // after the draw() command, because notifyDone forces a
            // dump() and we're inside a rAF (which means it won't
            // do any of the post-layout/drawing work in Page::doAfterUpdateRendering)
            requestAnimationFrame(function() {
                testRunner.notifyDone();
            });
        }
    });

</script>
</canvas>