third_party/WebKit/LayoutTests/fast/canvas/webgl/canvas-test.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2   "http://www.w3.org/TR/html4/loose.dtd">
   3 <html>
   4 <head>
   5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   6 <title>WebGL Canvas Conformance Tests</title>
   7 <script src="resources/desktop-gl-constants.js" type="text/javascript"></script>
   8 <script src="../../../resources/js-test.js"></script>
   9 <script src="resources/webgl-test.js"></script>
  10 <script src="../../../resources/run-after-layout-and-paint.js"></script>
  11 </head>
  12 <body>
  13 <div id="description"></div>
  14 <div id="console"></div>
  15 <canvas id="canvas" style="width: 50px; height: 50px;"> </canvas>
  16 <canvas id="canvas2d" width="40" height="40"> </canvas>
  17 <script>
  18 jsTestIsAsync = true;
  19 if (window.initNonKhronosFramework) {
  20   window.initNonKhronosFramework(true);
  21 }
  22
  23 description("This test ensures WebGL implementations interact correctly with the canvas tag.");
  24
  25 debug("");
  26 debug("Canvas.getContext");
  27
  28 var canvas = document.getElementById("canvas");
  29 var canvas2d = document.getElementById("canvas2d");
  30 var ctx2d = canvas2d.getContext("2d");
  31 var gl = create3DContext(canvas);
  32 if (!gl) {
  33   testFailed("context does not exist");
  34 } else {
  35   testPassed("context exists");
  36
  37   debug("");
  38   debug("Checking canvas and WebGL interaction");
  39
  40   // Check that a canvas with no width or height is 300x150 pixels
  41   shouldBe('canvas.width', '300');
  42   shouldBe('canvas.height', '150');
  43
  44   // Check get a 4 value gl parameter as a csv string.
  45   function getValue4v(name) {
  46     var v = gl.getParameter(name);
  47     var result = '' +
  48         v[0] + ',' +
  49         v[1] + ',' +
  50         v[2] + ',' +
  51         v[3];
  52     return result;
  53   }
  54
  55   function getViewport() {
  56     return getValue4v(gl.VIEWPORT);
  57   }
  58
  59   function getClearColor() {
  60     return getValue4v(gl.COLOR_CLEAR_VALUE);
  61   }
  62
  63   function isAboutEqual(a, b) {
  64     return Math.abs(a - b) < 0.01;
  65   }
  66
  67   function isAboutEqualInt(a, b) {
  68     return Math.abs(a - b) < 3;
  69   }
  70
  71   function checkCanvasContentIs(r3d,g3d,b3d,a3d) {
  72     var r2d;
  73     var g2d;
  74     var b2d;
  75     var a2d;
  76
  77     function checkPixel(x, y, r3d,g3d,b3d,a3d) {
  78       var offset = (y * 40 + x) * 4;
  79       r2d = imgData.data[offset];
  80       g2d = imgData.data[offset + 1];
  81       b2d = imgData.data[offset + 2];
  82       a2d = imgData.data[offset + 3];
  83       //debug('' + x + ', ' + y + "(" + offset + ") = " + r2d + ", " + g2d + ", " + b2d + ", " + a2d);
  84       return isAboutEqualInt(r2d, r3d) &&
  85              isAboutEqualInt(g2d, g3d) &&
  86              isAboutEqualInt(b2d, b3d) &&
  87              isAboutEqualInt(a2d, a3d);
  88     }
  89
  90     function checkPixels(r3d,g3d,b3d,a3d) {
  91       return checkPixel(0, 0, r3d, g3d, b3d, a3d) &&
  92              checkPixel(0, 39, r3d, g3d, b3d, a3d) &&
  93              checkPixel(39, 0, r3d, g3d, b3d, a3d) &&
  94              checkPixel(39, 39, r3d, g3d, b3d, a3d) &&
  95              checkPixel(0, 0, r3d, g3d, b3d, a3d);
  96     };
  97
  98     // Set to just take the color from the 3d canvas
  99     ctx2d.globalCompositeOperation = 'copy';
 100
 101     // fill 2d canvas with orange
 102     ctx2d.fillStyle = "rgb(255,192,128)";
 103     ctx2d.fillRect (0, 0, 40, 40);
 104
 105     // get the image data
 106     var imgData = ctx2d.getImageData(0, 0, 40, 40);
 107
 108     // check it got cleared.
 109     if (!checkPixels(255, 192, 128, 255)) {
 110       testFailed("unable to fill 2d context.");
 111       return;
 112     }
 113
 114     // draw 3d canvas on top.
 115     ctx2d.drawImage(canvas, 0,0, 40, 40);
 116
 117     // get the image data
 118     var imgData = ctx2d.getImageData(0, 0, 40, 40);
 119
 120     // Check it's the expected color.
 121     if (!checkPixels(r3d, g3d, b3d, a3d)) {
 122      testFailed("pixels are " + r2d + "," + g2d + "," + b2d + "," + a2d +
 123                 " expected " + r3d + "," + g3d + "," + b3d + "," + a3d);
 124     } else {
 125       testPassed("pixels are " + r3d + "," + g3d + "," + b3d + "," + a3d);
 126     }
 127   }
 128
 129   checkCanvasContentIs(0, 0, 0, 0);
 130   shouldBe('getViewport()', '"0,0,300,150"');
 131
 132   // Change the display size of the canvas and check
 133   // the viewport size does not change.
 134   debug("");
 135   debug("change display size of canvas and see that viewport does not change");
 136   canvas.style.width = "100px";
 137   canvas.style.height = "25px";
 138   runAfterLayoutAndPaint(function() {
 139     if (canvas.clientWidth == 100 &&
 140         canvas.clientHeight == 25) {
 141       shouldBe('getViewport()', '"0,0,300,150"');
 142       shouldBe('canvas.width', '300');
 143       shouldBe('canvas.height', '150');
 144
 145       // Change the actual size of the canvas
 146       // Check that the viewport does not change.
 147       // Check that the clear color does not change.
 148       // Check that the color mask does not change.
 149       debug("");
 150       debug("change the actual size of the canvas and see that the viewport does not change");
 151       gl.clearColor(0.25, 0.5, 0.75, 1);
 152       gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 153       checkCanvasContentIs(64, 128, 192, 255);
 154       gl.colorMask(0,0,0,0);
 155       canvas.width = 400;
 156       canvas.height = 10;
 157
 158       var v = gl.getParameter(gl.COLOR_CLEAR_VALUE);
 159       assertMsg(isAboutEqual(v[0], 0.25) &&
 160                 isAboutEqual(v[1], 0.5) &&
 161                 isAboutEqual(v[2], 0.75) &&
 162                 isAboutEqual(v[3], 1),
 163                 "gl.clearColor should not change after canvas resize");
 164       v = gl.getParameter(gl.COLOR_WRITEMASK);
 165       assertMsg(isAboutEqual(v[0], 0) &&
 166                 isAboutEqual(v[1], 0) &&
 167                 isAboutEqual(v[2], 0) &&
 168                 isAboutEqual(v[3], 0),
 169                 "gl.colorMask should not change after canvas resize");
 170       shouldBe('getViewport()', '"0,0,300,150"');
 171       checkCanvasContentIs(0, 0, 0, 0);
 172
 173       debug("");
 174
 175       finishJSTest();
 176     }
 177   });
 178 }
 179
 180 </script>
 181 <script>
 182 </script>
 183
 184 </body>
 185 </html>