<!--
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>
