summaryrefslogtreecommitdiffstats
path: root/dom/canvas/test/webgl-conf/checkout/extra/texture-sizing.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
commit36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree105e8c98ddea1c1e4784a60a5a6410fa416be2de /dom/canvas/test/webgl-conf/checkout/extra/texture-sizing.html
parentInitial commit. (diff)
downloadfirefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz
firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
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.html229
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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-24 00:10:07 +0000