dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/canvas-teximage-after-multiple-drawimages.html

   1 <!--
   2 Copyright (c) 2019 The Khronos Group Inc.
   3 Use of this source code is governed by an MIT-style license that can be
   4 found in the LICENSE.txt file.
   5 -->
   6
   7 <!DOCTYPE html>
   8 <html>
   9 <head>
  10 <meta charset="utf-8">
  11 <title>TexImage2D of 2D Canvas after multiple drawImages</title>
  12 <link rel="stylesheet" href="../../../resources/js-test-style.css"/>
  13 <script src="../../../js/js-test-pre.js"></script>
  14 <script src="../../../js/webgl-test-utils.js"></script>
  15 <script>
  16 "use strict";
  17 const wtu = WebGLTestUtils;
  18
  19 const sz = 512;
  20 let greenImage = null;
  21
  22 function loadImageAndStart(startFunc) {
  23   let c = document.createElement('canvas');
  24   c.width = sz;
  25   c.height = sz;
  26   let ctx = c.getContext('2d');
  27   ctx.fillStyle = 'rgb(0,255,0)';
  28   ctx.fillRect(0, 0, sz, sz);
  29   greenImage = wtu.makeImageFromCanvas(c, startFunc);
  30 }
  31
  32 function runTest() {
  33   description();
  34   debug('Regression test for <a href="http://crbug.com/878545">http://crbug.com/878545</a>');
  35   // Mimics the image-to-texture upload path from the old JavaScript
  36   // port of O3D, salvaged at https://github.com/petersont/o3d .
  37
  38   // Create a canvas and draw the entire image into it.
  39   let bigCanvas = document.createElement('canvas');
  40   bigCanvas.width = greenImage.naturalWidth;
  41   bigCanvas.height = greenImage.naturalHeight;
  42   let bc = bigCanvas.getContext('2d');
  43   bc.drawImage(greenImage, 0, 0, bigCanvas.width, bigCanvas.height);
  44   // Create a temp canvas to flip vertically.
  45   let tempCanvas = document.createElement('canvas');
  46   tempCanvas.width = bigCanvas.width;
  47   tempCanvas.height = bigCanvas.height;
  48   let tc = tempCanvas.getContext('2d');
  49   tc.translate(0, tempCanvas.height);
  50   tc.scale(1, -1);
  51   tc.drawImage(bigCanvas, 0, 0, tempCanvas.width, tempCanvas.height);
  52   // Set up to draw via WebGL.
  53   let c3d = document.getElementById('canvas');
  54   let gl = wtu.create3DContext(c3d);
  55   let prog = wtu.setupTexturedQuad(gl);
  56   gl.uniform1i(gl.getUniformLocation(prog, 'tex'), 0);
  57   let tex = gl.createTexture();
  58   // Iterate through the large canvas, drawing pieces of it to a
  59   // scratch canvas.
  60   let scratchCanvas = document.createElement('canvas');
  61   const width = tempCanvas.width / 2;
  62   const height = tempCanvas.height / 2;
  63   let bb = new Uint8Array(4 * c3d.width * c3d.height);
  64   for (let jj = 0; jj < 2; ++jj) {
  65     for (let ii = 0; ii < 2; ++ii) {
  66       // Prepare texture.
  67       scratchCanvas.width = width;
  68       scratchCanvas.height = height;
  69       let ctx = scratchCanvas.getContext('2d');
  70       ctx.save();
  71       ctx.translate(-(ii * width), -(jj * height));
  72       ctx.scale(1.0, 1.0);
  73       ctx.drawImage(tempCanvas, 0, 0, tempCanvas.width, tempCanvas.height);
  74       gl.bindTexture(gl.TEXTURE_2D, tex);
  75       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE,
  76                     scratchCanvas);
  77       ctx.restore();
  78       gl.generateMipmap(gl.TEXTURE_2D);
  79       // Draw and check that rendering occurred properly.
  80       gl.uniform1i(gl.getUniformLocation(prog, 'tex'), 0);
  81       wtu.drawUnitQuad(gl);
  82       let tolerance = 2;
  83       wtu.checkCanvasRect(gl, 1, 1, c3d.width - 2, c3d.height - 2,
  84                           [ 0, 255, 0, 255 ],
  85                           "should be green",
  86                           tolerance);
  87
  88     }
  89   }
  90
  91   finishTest();
  92 }
  93 </script>
  94 </head>
  95 <body onload="loadImageAndStart(runTest)">
  96 <div id="description"></div>
  97 <div id="console"></div>
  98 <canvas id="canvas" width="40" height="40"></canvas>
  99 </body>
 100 </html>