qt-everywhere-src-5.15.1/qtbase/tests/baselineserver/src/templates/view.html

<h3>Lancelot Viewer</h3>

<p>
Zoom:
<input name="zoom" id="z1" type="radio" checked="Checked">1x</input>
<input name="zoom" id="z2" type="radio">2x</input>
<input name="zoom" id="z4" type="radio">4x</input>
</p>

<p><table>
<tr>
<td><input name="imgselect" id="baseline" type="radio" checked="Checked">Baseline</input></td>
<td>%1</td>
</tr>
<tr>
<td><input name="imgselect" id="rendered" type="radio">Rendered</input></td>
<td>%2</td>
</tr>
<tr>
<td><input name="imgselect" id="compared" type="radio">Differences</input></td>
<td></td>
</tr>
</table></p>


<p><table cellspacing="25"><tr>
<td valign="top">
<canvas id="c" width="800" height="800"></canvas>
</td>
<td valign="top">
%4
</td>
</tr></table></p>

<script>
  var canvas = document.getElementById("c");
  var context = canvas.getContext("2d");
  var cat = new Image();
  cat.src = "%1";
  var z = 1;
  cat.onload = function() {
    context.mozImageSmoothingEnabled = false;
    context.drawImage(cat, 0, 0, z*cat.width, z*cat.height);
  };

  var bbut = document.getElementById("baseline");
  bbut.onclick = function() {
    cat.src = "%1";
  };

  var rbut = document.getElementById("rendered");
  rbut.onclick = function() {
    cat.src = "%2";
  };

  var cbut = document.getElementById("compared");
  cbut.onclick = function() {
    cat.src = "%3";
  };

  function setZoom(zoom)
  {
    z = zoom;
    canvas.width = z*800;
    canvas.height = z*800;
    context.mozImageSmoothingEnabled = false;
    context.drawImage(cat, 0, 0, z*cat.width, z*cat.height);
  }

  var z1but = document.getElementById("z1");
  z1but.onclick = function() {
      setZoom(1);
  };

  var z2but = document.getElementById("z2");
  z2but.onclick = function() {
      setZoom(2);
  };

  var z4but = document.getElementById("z4");
  z4but.onclick = function() {
      setZoom(4);
  };
</script>