Source code
Revision control
Copy as Markdown
Other Tools
<!--
Copyright (c) 2019 The Khronos Group Inc.
Use of this source code is governed by an MIT-style license that can be
found in the LICENSE.txt file.
-->
<!DOCTYPE html>
<html>
<head>
<title>Testing resolution of texture uploads</title>
<style>
.result {
margin-bottom: 20px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.description, .element, .render, .log {
border: 1px solid black;
margin: 5px;
width: 200px;
height: 200px;
max-width: 200px;
max-height: 200px;
}
.render canvas {
width: 200px;
height: 200px;
}
p {
margin: 0;
padding: 5px 10px;
}
.viacss {
width: 200px;
height: 200px;
}
</style>
<script src="../js/webgl-test-utils.js"> </script>
<script>
var outOfPageSVG = new Image();
outOfPageSVG.src = "sample.svg";
function runTest() {
var wtu = WebGLTestUtils;
var results = document.querySelectorAll(".result");
for (var i = 0; i < results.length; i++) {
var result = results[i];
var img = result.querySelector("img");
if (result.classList.contains("out-of-page")) {
img = outOfPageSVG;
}
if (result.classList.contains("set-dimensions")) {
img.width = 200;
img.height = 200;
}
var out = result.querySelector(".output");
out.innerHTML = "img.width = " + img.width + "<br>img.height = " + img.height + "<br>img.naturalWidth = " + img.naturalWidth + "<br>img.naturalHeight = " + img.naturalHeight;
var canvas = document.createElement("canvas");
canvas.width = 200 * window.devicePixelRatio;
canvas.height = 200 * window.devicePixelRatio;
result.querySelector(".render").appendChild(canvas);
var gl = wtu.create3DContext(canvas);
gl.enable(gl.BLEND);
gl.disable(gl.DEPTH_TEST);
var program = wtu.setupSimpleTextureProgram(gl, 0, 1);
var buffers = wtu.setupUnitQuad(gl, 0, 1);
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
var loc = gl.getUniformLocation(program, "tex");
gl.uniform1i(loc, 0);
wtu.clearAndDrawUnitQuad(gl, [0, 255, 0, 255]);
}
}
window.addEventListener("load", function () {
runTest();
}, false);
</script>
</head>
<body>
<div class="result">
<div class="description">
<p>IMG to SVG with 200x200 attributes</p>
</div>
<div class="element">
<img src="sample.svg" width="200" height="200">
</div>
<div class="render">
</div>
<div class="log">
<p class="output"></p>
</div>
</div>
<div class="result">
<div class="description">
<p>IMG to 100x100 PNG with 200x200 attributes</p>
</div>
<div class="element">
<img src="sample-100.png" width="200" height="200">
</div>
<div class="render">
</div>
<div class="log">
<p class="output"></p>
</div>
</div>
<div class="result">
<div class="description">
<p>IMG to 200x200 PNG with 200x200 attributes</p>
</div>
<div class="element">
<img src="sample-200.png" width="200" height="200">
</div>
<div class="render">
</div>
<div class="log">
<p class="output"></p>
</div>
</div>
<div class="result">
<div class="description">
<p>IMG to 400x400 PNG with 200x200 attributes</p>
</div>
<div class="element">
<img src="sample-400.png" width="200" height="200">
</div>
<div class="render">
</div>
<div class="log">
<p class="output"></p>
</div>
</div>
<div class="result">
<div class="description">
<p>IMG SRCSET to multiple PNGs with 200x200 attributes</p>
</div>
<div class="element">
<img src="sample-100.png" srcset="sample-200.png 1x, sample-400.png 2x" width="200" height="200">
</div>
<div class="render">
</div>
<div class="log">
<p class="output"></p>
</div>
</div>
<div class="result">
<div class="description">
<p>IMG to SVG with no attributes - 200x200 sizing via CSS</p>
</div>
<div class="element">
<img src="sample.svg" class="viacss">
</div>
<div class="render">
</div>
<div class="log">
<p class="output"></p>
</div>
</div>
<div class="result">
<div class="description">
<p>IMG to 400x400 PNG with no attributes - 200x200 sizing via CSS</p>
</div>
<div class="element">
<img src="sample-400.png" class="viacss">
</div>
<div class="render">
</div>
<div class="log">
<p class="output"></p>
</div>
</div>
<div class="result">
<div class="description">
<p>
IMG to SVG with no attributes and no sizing via CSS<br>
(although the width and height of the container set a size)
</p>
</div>
<div class="element">
<img src="sample.svg">
</div>
<div class="render">
</div>
<div class="log">
<p class="output"></p>
</div>
</div>
<div class="result out-of-page">
<div class="description">
<p>Out of page SVG with no dimensions</p>
</div>
<div class="element">
Not a child of document
</div>
<div class="render">
</div>
<div class="log">
<p class="output"></p>
</div>
</div>
<div class="result out-of-page set-dimensions">
<div class="description">
<p>Out of page SVG with 200x200 specified</p>
</div>
<div class="element">
Not a child of document
</div>
<div class="render">
</div>
<div class="log">
<p class="output"></p>
</div>
</div>
</body>
</html>