dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/texture-hd-dpi.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>WebGL HD-DPI issues texture conformance test.</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 </head>
  16 <body>
  17 <canvas id="example" width="4" height="4" style="width: 40px; height: 30px;"></canvas>
  18 <div id="description"></div>
  19 <div id="console"></div>
  20 <script>
  21 "use strict";
  22 description();
  23 var wtu = WebGLTestUtils;
  24 var gl = wtu.create3DContext("example");
  25 var program = wtu.setupTexturedQuad(gl);
  26
  27 function fillInMips(gl, size) {
  28   // fill in the mips
  29   var level = 1;
  30   for (;;) {
  31     size /= 2;
  32     if (size < 1) {
  33       break;
  34     }
  35     var numBytes = size * size * 4;
  36     var pixels = new Uint8Array(numBytes);
  37     for (var jj = 0; jj < numBytes; jj += 4) {
  38       pixels[jj + 0] = 0;
  39       pixels[jj + 1] = 255;
  40       pixels[jj + 2] = 0;
  41       pixels[jj + 3] = 255;
  42     }
  43     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
  44   }
  45 }
  46
  47 function testCanvas(size) {
  48   debug("");
  49   debug("testing 2D canvas size " + size + ", " + size);
  50
  51   var canvas = document.createElement("canvas");
  52   canvas.width = size;
  53   canvas.height = size;
  54   var ctx = canvas.getContext("2d");
  55   ctx.fillStyle = "rgb(0,255,0)";
  56   ctx.fillRect(0, 0, size, size);
  57
  58   var tex = gl.createTexture();
  59   gl.bindTexture(gl.TEXTURE_2D, tex);
  60   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
  61
  62   fillInMips(gl, size);
  63
  64   // Draw. If this an HD-DPI device and the 2d canvas is double res or larger
  65   // the implementation must scale to CSS pixels (ie, canvas.width, canvas.height)(
  66   // when doing the copy in texImage2D. If it has not scaled and instead done
  67   // a direct copy of the larger texture this test will not have created enough mips
  68   // and will therefore not be "texture complete" and will render in black.
  69   wtu.clearAndDrawUnitQuad(gl);
  70   wtu.checkCanvas(gl, [0, 255, 0, 255], "should be green");
  71 }
  72
  73 function testWebGL(size) {
  74   debug("");
  75   debug("testing WebGL canvas size " + size + ", " + size);
  76
  77   var canvas = document.createElement("canvas");
  78   canvas.width = size;
  79   canvas.height = size;
  80   var gl2 = wtu.create3DContext(canvas);
  81   gl2.clearColor(0,1,0,1);
  82   gl2.clear(gl.COLOR_BUFFER_BIT);
  83
  84   var tex = gl.createTexture();
  85   gl.bindTexture(gl.TEXTURE_2D, tex);
  86   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
  87
  88   fillInMips(gl, size);
  89
  90   // Draw. If this an HD-DPI device check for 2 possible bugs.
  91   //
  92   // 1) the WebGL canvas is double res or larger. That's just a bug period and
  93   //    is checked for in another test but would also fail here.
  94   //
  95   // 2) the WebGL canvas is single res but the code the scales a double res
  96   //    2d canvas also mistakenly scales a single res WebGL canvas.
  97   //
  98   // If it has been scaled then we'll have the wrong kind of mips chain here.
  99   // Level 0 will be half resolution. Level 1 will be the same resolution
 100   // and will therefore not be "texture complete" and will render in black.
 101   wtu.clearAndDrawUnitQuad(gl);
 102   wtu.checkCanvas(gl, [0, 255, 0, 255], "should be green");
 103 }
 104
 105 testCanvas(4);
 106 testCanvas(512);
 107 testWebGL(4);
 108 testWebGL(512);
 109 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors");
 110
 111 var successfullyParsed = true;
 112 </script>
 113 <script src="../../../js/js-test-post.js"></script>
 114
 115 </body>
 116 </html>
 117