texture-sizing.html (5564B)
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>