<style>
canvas {
    width: 10px;
    height: 10px;
}
</style>
<script>
if (window.testRunner) {
    testRunner.waitUntilDone();
}

const WIDTH = 10;
const HEIGHT = 10;

const COLORS = [
    [0, 0, 1, 1],
    [0, 1, 1, 1],
    [0, 0.5, 0, 1],
    [1, 0, 1, 1],
    [1, 1, 0.5, 1],
    [0.5, 0, 1, 1],
    [0.5, 0.5, 0.5, 1],
    [0.5, 0.5, 1, 1],
    [0.25, 0, 1, 1],
    [0, 1, 0, 1]
];

let canvas;
let gl;
let currentFrame = 0;

function step1() {

    // Step 1. Create a WebGL canvas and render into it.
    // We do this for 10 frames, each time a different color ending in pure green (0, 1, 0, 1).

    canvas = document.querySelector("canvas");
    canvas.width = WIDTH;
    canvas.height = HEIGHT;

    gl = canvas.getContext("webgl");

    function clearToColor() {
        if (currentFrame >= COLORS.length) {
            requestAnimationFrame(step2);
            return;
        }

        gl.clearColor(...COLORS[currentFrame]);
        gl.clear(gl.COLOR_BUFFER_BIT);

        currentFrame++;
        requestAnimationFrame(clearToColor);
    }

    clearToColor();
}

function step2() {

    // Step 2. Create a framebuffer and render into it, but don't draw into the canvas.");

    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, WIDTH, HEIGHT, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);

    const framebuffer = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);

    // Clear framebuffer to red (1, 0, 0, 1). This color was not used above.

    gl.clearColor(1, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.bindFramebuffer(gl.FRAMEBUFFER, null);

    // Step 3. Remove the canvas from its parent.

    canvas.parentNode.removeChild(canvas);

    // Step 4. Insert the canvas into a new parent.

    document.getElementById("container2").appendChild(canvas);

    // End result should be a green canvas.

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

function runTest() {
    requestAnimationFrame(step1);
}

window.addEventListener("load", runTest, false);
</script>
<div id="container1">
<canvas></canvas>
</div>
<div id="container2">
</div>