src/third_party/webgl/src/sdk/tests/conformance/textures/tex-image-canvas-corruption.html

   1 <!--
   2
   3 /*
   4 ** Copyright (c) 2014 The Khronos Group Inc.
   5 **
   6 ** Permission is hereby granted, free of charge, to any person obtaining a
   7 ** copy of this software and/or associated documentation files (the
   8 ** "Materials"), to deal in the Materials without restriction, including
   9 ** without limitation the rights to use, copy, modify, merge, publish,
  10 ** distribute, sublicense, and/or sell copies of the Materials, and to
  11 ** permit persons to whom the Materials are furnished to do so, subject to
  12 ** the following conditions:
  13 **
  14 ** The above copyright notice and this permission notice shall be included
  15 ** in all copies or substantial portions of the Materials.
  16 **
  17 ** THE MATERIALS ARE PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  18 ** EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
  19 ** MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
  20 ** IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
  21 ** CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
  22 ** TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
  23 ** MATERIALS OR THE USE OR OTHER DEALINGS IN THE MATERIALS.
  24 */
  25
  26 -->
  27
  28 <!DOCTYPE html>
  29 <html>
  30 <head>
  31 <meta charset="utf-8">
  32 <link rel="stylesheet" href="../../resources/js-test-style.css"/>
  33 <script src="../../resources/js-test-pre.js"></script>
  34 <script src="../resources/webgl-test-utils.js"></script>
  35
  36 </head>
  37 <body>
  38 <canvas id="example"></canvas>
  39 <div id="description"></div>
  40 <div id="console"></div>
  41 <script>
  42 "use strict";
  43
  44 // Regression test for http://crbug.com/368582
  45 description('Tests to ensure that a 2D canvas is still usable after being used as the source for a texImage2D');
  46
  47 var wtu = WebGLTestUtils;
  48 var canvas = document.getElementById("example");
  49 canvas.width = 512;
  50 canvas.height = 512;
  51 var ctx = canvas.getContext("2d");
  52
  53 var image = new Image();
  54 image.src = '../resources/blue-1x1.jpg';
  55
  56 var gl = wtu.create3DContext();
  57 var texture = gl.createTexture();
  58
  59 function checkPixels() {
  60   // Read back the frame buffer
  61   var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
  62   var buf = imgData.data;
  63
  64   var expected = [0, 0, 255, 255];
  65   var tolerance = 2;
  66
  67   // Verify the frame buffer's contents
  68   var passed = true;
  69   for (var y = 0; y < canvas.height; y++) {
  70     for (var x = 0; x < canvas.width; x++) {
  71       var i = y * canvas.width + x;
  72       if (Math.abs(buf[4 * i + 0] - expected[0]) > tolerance ||
  73           Math.abs(buf[4 * i + 1] - expected[1]) > tolerance ||
  74           Math.abs(buf[4 * i + 2] - expected[2]) > tolerance ||
  75           Math.abs(buf[4 * i + 3] - expected[3]) > tolerance) {
  76           testFailed("pixel at (" + x + ", " + y +") was (" +
  77                      buf[4 * i + 0] + ", " +
  78                      buf[4 * i + 1] + ", " +
  79                      buf[4 * i + 2] + ", " +
  80                      buf[4 * i + 3] + "), should be (" +
  81                      expected[0] + ", " +
  82                      expected[1] + ", " +
  83                      expected[2] + ", " +
  84                      expected[3] + ")");
  85           passed = false;
  86           break;
  87       }
  88     }
  89
  90     if (!passed) {
  91       break;
  92     }
  93   }
  94
  95   if (passed)
  96       testPassed("All pixels matched expected values");
  97 }
  98
  99 function renderToCanvas() {
 100   // Clear the 2d canvas then draw the image to it (a blue pixel)
 101   ctx.clearRect(0, 0, canvas.width, canvas.height);
 102   ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
 103
 104   // Upload the results to a WebGL texture
 105   gl.bindTexture(gl.TEXTURE_2D, texture);
 106   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,
 107       gl.UNSIGNED_BYTE, canvas);
 108 }
 109
 110 image.onload = function() {
 111   renderToCanvas();
 112   renderToCanvas();
 113
 114   checkPixels();
 115
 116   finishTest();
 117 };
 118
 119 var successfullyParsed = true;
 120 </script>
 121 </body>
 122 </html>