dom/canvas/test/webgl-conf/checkout/conformance2/textures/misc/canvas-remains-unchanged-after-used-in-webgl-texture.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 <!DOCTYPE html>
   7 <html>
   8 <head>
   9 <meta charset="utf-8">
  10 <link rel="stylesheet" href="../../../resources/js-test-style.css"/>
  11 <script src="../../../js/js-test-pre.js"></script>
  12 <script src="../../../js/webgl-test-utils.js"></script>
  13 </head>
  14 <body>
  15 <canvas id="c" width="16" height="16"></canvas>
  16 <div id="description"></div>
  17 <div id="console"></div>
  18 <script>
  19 "use strict";
  20 description('Tests canvas remains unchanged after it is used in webgl texutre');
  21
  22 debug("This is a regression test for <a href='https://bugs.chromium.org/p/chromium/issues/detail?id=446380'>Chromium Issue 446380</a>");
  23 debug("");
  24
  25 var wtu = WebGLTestUtils;
  26 var gl = wtu.create3DContext("c", undefined, 2);
  27
  28 function checkSourceCanvasImageData(imageDataBefore, imageDataAfter) {
  29   if (imageDataBefore.length != imageDataAfter.length) {
  30     testFailed("The size of image data in source canvas become different after it is used in webgl texture.");
  31     return;
  32   }
  33   for (var i = 0; i < imageDataAfter.length; i++) {
  34     if (imageDataBefore[i] != imageDataAfter[i]) {
  35       testFailed("Pixel values in source canvas have changed after canvas used in webgl texture.");
  36       return;
  37     }
  38   }
  39   testPassed("Pixel values in source canvas remain unchanged after canvas used in webgl texture.");
  40 }
  41
  42 function runTest(width, height) {
  43   var canvas = document.createElement("canvas");
  44   canvas.width = width;
  45   canvas.height = height;
  46   var ctx = canvas.getContext("2d");
  47   ctx.fillStyle = "rgba(1, 63, 127, 1)";
  48   ctx.fillRect(0, 0, canvas.width, canvas.height);
  49   var refCanvas = document.createElement("canvas");
  50   refCanvas.width = width;
  51   refCanvas.height = height;
  52   var refCtx = refCanvas.getContext("2d");
  53   refCtx.fillStyle = "rgba(1, 63, 127, 1)";
  54   refCtx.fillRect(0, 0, canvas.width, canvas.height);
  55   // A refCanvas with same data as canvas is used to get original image data, since
  56   // getImageData may change hardware accelerated status of canvas and we don't want to
  57   // omit testing for hardware accelerated canvas.
  58   var imageDataBefore = refCtx.getImageData(0, 0, refCanvas.width, refCanvas.height);
  59   var tex = gl.createTexture();
  60   gl.bindTexture(gl.TEXTURE_2D, tex);
  61   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
  62   wtu.glErrorShouldBe(gl, gl.NO_ERROR, "TexImage2D should succeed");
  63   checkSourceCanvasImageData(imageDataBefore, ctx.getImageData(0, 0, canvas.width, canvas.height));
  64   gl.deleteTexture(tex);
  65 }
  66
  67 runTest(2, 2);
  68 runTest(257, 257);
  69
  70 finishTest();
  71 </script>
  72 </body>
  73 </html>