src/third_party/webgl/src/sdk/tests/conformance/canvas/to-data-url-test.html

   1 <!--
   2
   3 /*
   4 ** Copyright (c) 2012 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 <!DOCTYPE html>
  28 <html>
  29 <head>
  30 <meta charset="utf-8">
  31 <title>WebGL toDataURL test</title>
  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 </head>
  36 <body>
  37 <canvas width="20" height="20" style="border: 1px solid black; width: 16px; height: 16px" id="c3d"></canvas>
  38 <canvas width="20" height="20" style="border: 1px solid black; width: 16px; height: 16px" id="c2d"></canvas>
  39 <div id="description"></div>
  40 <div id="console"></div>
  41 <script type="text/javascript">
  42 var wtu = WebGLTestUtils;
  43 var numTests = 10;
  44 var gl;
  45 var ctx;
  46
  47 var main = function() {
  48   description();
  49   ctx = document.getElementById("c2d").getContext("2d");
  50   gl = wtu.create3DContext("c3d");
  51
  52   if (!gl) {
  53     testFailed("can't create 3d context");
  54     return;
  55   }
  56
  57   var clearRect = function(gl, x, y, width, height, color) {
  58     gl.clearColor(color[0] / 255, color[1] / 255, color[2] / 255, color[3] / 255);
  59     gl.scissor(x, y, width, height);
  60     gl.clear(gl.COLOR_BUFFER_BIT);
  61   };
  62
  63   var testSize = function(gl, width, height, callback) {
  64     debug("testing " + width + " by " + height);
  65     gl.canvas.width = width;
  66     gl.canvas.height = height;
  67     gl.viewport(0, 0, width, height);
  68     gl.enable(gl.SCISSOR_TEST);
  69
  70     var bottomColor = [255, 0, 0, 255];
  71     var topColor = [0, 255, 0, 255];
  72     var rightColor = [0, 0, 255, 255];
  73     var halfHeight = Math.floor(height / 2);
  74     var topHeight = height - halfHeight;
  75     var canvasTopHeight = height - topHeight;
  76     clearRect(gl, 0, 0, width, halfHeight, bottomColor);
  77     clearRect(gl, 0, halfHeight, width, topHeight, topColor);
  78     clearRect(gl, width - 1, 0, 1, height, rightColor);
  79
  80     var img = new Image();
  81     img.onload = function() {
  82       ctx.canvas.width = width;
  83       ctx.canvas.height = height;
  84       ctx.drawImage(img, 0, 0);
  85       wtu.checkCanvasRect(ctx, 0, 0, width - 1, topHeight, topColor);
  86       wtu.checkCanvasRect(ctx, 0, topHeight, width - 1, halfHeight, bottomColor);
  87       wtu.checkCanvasRect(ctx, width - 1, 0, 1, height, rightColor);
  88       debug("");
  89       callback();
  90     };
  91     img.src = gl.canvas.toDataURL();
  92   };
  93
  94   var tests = [
  95     { width:  16    , height:  16    , },
  96     { width:  16 - 1, height:  16    , },
  97     { width:  16 - 1, height:  16 - 1, },
  98     { width:  16 + 1, height:  16 - 1, },
  99     { width:  16 - 1, height:  16 + 1, },
 100     { width: 256    , height: 256    , },
 101     { width: 256 - 1, height: 256    , },
 102     { width: 256 - 1, height: 256 - 1, },
 103     { width: 256 + 1, height: 256 - 1, },
 104     { width: 256 - 1, height: 256 + 1, },
 105     { width: 512    , height: 512    , },
 106     { width: 512 - 1, height: 512    , },
 107     { width: 512 - 1, height: 512 - 1, },
 108     { width: 512 + 1, height: 512 - 1, },
 109     { width: 512 - 1, height: 512 + 1, },
 110   ];
 111   var testIndex = 0;
 112   var runNextTest = function() {
 113     if (testIndex == tests.length) {
 114       finishTest();
 115       return;
 116     }
 117     var test = tests[testIndex++];
 118     testSize(gl, test.width, test.height, function() {
 119       setTimeout(runNextTest, 100);
 120     })
 121   };
 122   runNextTest();
 123 };
 124 main();
 125 var successfullyParsed = true;
 126 </script>
 127 </body>
 128 </html>
 129