canvas-teximage-after-multiple-drawimages.html

Enable keyboard shortcuts

<!--

Copyright (c) 2019 The Khronos Group Inc.

Use of this source code is governed by an MIT-style license that can be

found in the LICENSE.txt file.

-->

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>TexImage2D of 2D Canvas after multiple drawImages</title>

<link rel="stylesheet" href="../../../resources/js-test-style.css"/>

<script src="../../../js/js-test-pre.js"></script>

<script src="../../../js/webgl-test-utils.js"></script>

<script>

"use strict";

const wtu = WebGLTestUtils;

const sz = 512;

let greenImage = null;

function loadImageAndStart(startFunc) {

  let c = document.createElement('canvas');

  c.width = sz;

  c.height = sz;

  let ctx = c.getContext('2d');

  ctx.fillStyle = 'rgb(0,255,0)';

  ctx.fillRect(0, 0, sz, sz);

  greenImage = wtu.makeImageFromCanvas(c, startFunc);

function runTest() {

  description();

  debug('Regression test for <a href="http://crbug.com/878545">http://crbug.com/878545</a>');

  // Mimics the image-to-texture upload path from the old JavaScript

  // port of O3D, salvaged at https://github.com/petersont/o3d .

  // Create a canvas and draw the entire image into it.

  let bigCanvas = document.createElement('canvas');

  bigCanvas.width = greenImage.naturalWidth;

  bigCanvas.height = greenImage.naturalHeight;

  let bc = bigCanvas.getContext('2d');

  bc.drawImage(greenImage, 0, 0, bigCanvas.width, bigCanvas.height);

  // Create a temp canvas to flip vertically.

  let tempCanvas = document.createElement('canvas');

  tempCanvas.width = bigCanvas.width;

  tempCanvas.height = bigCanvas.height;

  let tc = tempCanvas.getContext('2d');

  tc.translate(0, tempCanvas.height);

  tc.scale(1, -1);

  tc.drawImage(bigCanvas, 0, 0, tempCanvas.width, tempCanvas.height);

  // Set up to draw via WebGL.

  let c3d = document.getElementById('canvas');

  let gl = wtu.create3DContext(c3d);

  let prog = wtu.setupTexturedQuad(gl);

  gl.uniform1i(gl.getUniformLocation(prog, 'tex'), 0);

  let tex = gl.createTexture();

  // Iterate through the large canvas, drawing pieces of it to a

  // scratch canvas.

  let scratchCanvas = document.createElement('canvas');

  const width = tempCanvas.width / 2;

  const height = tempCanvas.height / 2;

  let bb = new Uint8Array(4 * c3d.width * c3d.height);

  for (let jj = 0; jj < 2; ++jj) {

    for (let ii = 0; ii < 2; ++ii) {

      // Prepare texture.

      scratchCanvas.width = width;

      scratchCanvas.height = height;

      let ctx = scratchCanvas.getContext('2d');

      ctx.save();

      ctx.translate(-(ii * width), -(jj * height));

      ctx.scale(1.0, 1.0);

      ctx.drawImage(tempCanvas, 0, 0, tempCanvas.width, tempCanvas.height);

      gl.bindTexture(gl.TEXTURE_2D, tex);

      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE,

                    scratchCanvas);

      ctx.restore();

      gl.generateMipmap(gl.TEXTURE_2D);

      // Draw and check that rendering occurred properly.

      gl.uniform1i(gl.getUniformLocation(prog, 'tex'), 0);

      wtu.drawUnitQuad(gl);

      let tolerance = 2;

      wtu.checkCanvasRect(gl, 1, 1, c3d.width - 2, c3d.height - 2,

                          [ 0, 255, 0, 255 ],

                          "should be green",

                          tolerance);

  finishTest();

</script>

</head>

<body onload="loadImageAndStart(runTest)">

<div id="description"></div>

<div id="console"></div>

<canvas id="canvas" width="40" height="40"></canvas>

</body>

</html>