diff options
Diffstat (limited to 'dom/canvas/test/webgl-conf/checkout/extra/texture-sizing.html')
| -rw-r--r-- | dom/canvas/test/webgl-conf/checkout/extra/texture-sizing.html | 229 |
1 files changed, 229 insertions, 0 deletions
diff --git a/dom/canvas/test/webgl-conf/checkout/extra/texture-sizing.html b/dom/canvas/test/webgl-conf/checkout/extra/texture-sizing.html new file mode 100644 index 0000000000..efbb65fea7 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/texture-sizing.html @@ -0,0 +1,229 @@ +<!-- +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> |