<!--
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>
