dom/canvas/test/webgl-conf/checkout/extra/texture-sizing.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 <title>Testing resolution of texture uploads</title>
  10 <style>
  11
  12 .result {
  13     margin-bottom: 20px;
  14     display: -webkit-flex;
  15     display: flex;
  16     -webkit-flex-direction: row;
  17     flex-direction: row;
  18 }
  19
  20 .description, .element, .render, .log {
  21     border: 1px solid black;
  22     margin: 5px;
  23     width: 200px;
  24     height: 200px;
  25     max-width: 200px;
  26     max-height: 200px;
  27 }
  28
  29 .render canvas {
  30     width: 200px;
  31     height: 200px;
  32 }
  33
  34 p {
  35     margin: 0;
  36     padding: 5px 10px;
  37 }
  38 .viacss {
  39     width: 200px;
  40     height: 200px;
  41 }
  42 </style>
  43 <script src="../js/webgl-test-utils.js"> </script>
  44 <script>
  45
  46 var outOfPageSVG = new Image();
  47 outOfPageSVG.src = "sample.svg";
  48
  49 function runTest() {
  50   var wtu = WebGLTestUtils;
  51   var results = document.querySelectorAll(".result");
  52   for (var i = 0; i < results.length; i++) {
  53     var result = results[i];
  54     var img = result.querySelector("img");
  55     if (result.classList.contains("out-of-page")) {
  56       img = outOfPageSVG;
  57     }
  58     if (result.classList.contains("set-dimensions")) {
  59       img.width = 200;
  60       img.height = 200;
  61     }
  62     var out = result.querySelector(".output");
  63     out.innerHTML = "img.width = " + img.width + "<br>img.height = " + img.height + "<br>img.naturalWidth = " + img.naturalWidth + "<br>img.naturalHeight = " + img.naturalHeight;
  64
  65     var canvas = document.createElement("canvas");
  66     canvas.width = 200 * window.devicePixelRatio;
  67     canvas.height = 200 * window.devicePixelRatio;
  68     result.querySelector(".render").appendChild(canvas);
  69     var gl = wtu.create3DContext(canvas);
  70     gl.enable(gl.BLEND);
  71     gl.disable(gl.DEPTH_TEST);
  72
  73     var program = wtu.setupSimpleTextureProgram(gl, 0, 1);
  74     var buffers = wtu.setupUnitQuad(gl, 0, 1);
  75     var tex = gl.createTexture();
  76     gl.bindTexture(gl.TEXTURE_2D, tex);
  77     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  78     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  79     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  80     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
  81     var loc = gl.getUniformLocation(program, "tex");
  82     gl.uniform1i(loc, 0);
  83
  84     wtu.clearAndDrawUnitQuad(gl, [0, 255, 0, 255]);
  85   }
  86 }
  87
  88 window.addEventListener("load", function () {
  89   runTest();
  90 }, false);
  91 </script>
  92 </head>
  93 <body>
  94 <div class="result">
  95   <div class="description">
  96     <p>IMG to SVG with 200x200 attributes</p>
  97   </div>
  98   <div class="element">
  99     <img src="sample.svg" width="200" height="200">
 100   </div>
 101   <div class="render">
 102   </div>
 103   <div class="log">
 104     <p class="output"></p>
 105   </div>
 106 </div>
 107 <div class="result">
 108   <div class="description">
 109     <p>IMG to 100x100 PNG with 200x200 attributes</p>
 110   </div>
 111   <div class="element">
 112     <img src="sample-100.png" width="200" height="200">
 113   </div>
 114   <div class="render">
 115   </div>
 116   <div class="log">
 117     <p class="output"></p>
 118   </div>
 119 </div>
 120 <div class="result">
 121   <div class="description">
 122     <p>IMG to 200x200 PNG with 200x200 attributes</p>
 123   </div>
 124   <div class="element">
 125     <img src="sample-200.png" width="200" height="200">
 126   </div>
 127   <div class="render">
 128   </div>
 129   <div class="log">
 130     <p class="output"></p>
 131   </div>
 132 </div>
 133 <div class="result">
 134   <div class="description">
 135     <p>IMG to 400x400 PNG with 200x200 attributes</p>
 136   </div>
 137   <div class="element">
 138     <img src="sample-400.png" width="200" height="200">
 139   </div>
 140   <div class="render">
 141   </div>
 142   <div class="log">
 143     <p class="output"></p>
 144   </div>
 145 </div>
 146 <div class="result">
 147   <div class="description">
 148     <p>IMG SRCSET to multiple PNGs with 200x200 attributes</p>
 149   </div>
 150   <div class="element">
 151     <img src="sample-100.png" srcset="sample-200.png 1x, sample-400.png 2x" width="200" height="200">
 152   </div>
 153   <div class="render">
 154   </div>
 155   <div class="log">
 156     <p class="output"></p>
 157   </div>
 158 </div>
 159 <div class="result">
 160   <div class="description">
 161     <p>IMG to SVG with no attributes - 200x200 sizing via CSS</p>
 162   </div>
 163   <div class="element">
 164     <img src="sample.svg" class="viacss">
 165   </div>
 166   <div class="render">
 167   </div>
 168   <div class="log">
 169     <p class="output"></p>
 170   </div>
 171 </div>
 172 <div class="result">
 173   <div class="description">
 174     <p>IMG to 400x400 PNG with no attributes - 200x200 sizing via CSS</p>
 175   </div>
 176   <div class="element">
 177     <img src="sample-400.png" class="viacss">
 178   </div>
 179   <div class="render">
 180   </div>
 181   <div class="log">
 182     <p class="output"></p>
 183   </div>
 184 </div>
 185 <div class="result">
 186   <div class="description">
 187     <p>
 188       IMG to SVG with no attributes and no sizing via CSS<br>
 189       (although the width and height of the container set a size)
 190     </p>
 191   </div>
 192   <div class="element">
 193     <img src="sample.svg">
 194   </div>
 195   <div class="render">
 196   </div>
 197   <div class="log">
 198     <p class="output"></p>
 199   </div>
 200 </div>
 201 <div class="result out-of-page">
 202   <div class="description">
 203     <p>Out of page SVG with no dimensions</p>
 204   </div>
 205   <div class="element">
 206     Not a child of document
 207   </div>
 208   <div class="render">
 209   </div>
 210   <div class="log">
 211     <p class="output"></p>
 212   </div>
 213 </div>
 214 <div class="result out-of-page set-dimensions">
 215   <div class="description">
 216     <p>Out of page SVG with 200x200 specified</p>
 217   </div>
 218   <div class="element">
 219     Not a child of document
 220   </div>
 221   <div class="render">
 222   </div>
 223   <div class="log">
 224     <p class="output"></p>
 225   </div>
 226 </div>
 227
 228 </body>
 229 </html>