gl-viewport-test.html

Enable keyboard shortcuts

<!--

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>

<meta charset="utf-8">

<title>WebGL Viewport Test</title>

<link rel="stylesheet" href="../../resources/js-test-style.css"/>

<script src="../../js/js-test-pre.js"></script>

<script src="../../js/webgl-test-utils.js"></script>

<style>

canvas {

    border: 1px solid #000;

</style>

</head>

<body>

<canvas id="canvas1" width="64" height="128"> </canvas>

<canvas id="canvas2" width="64" height="128"> </canvas>

<div id="description"></div>

<div id="console"></div>

<script>

"use strict";

description();

var wtu = WebGLTestUtils;

function test(canvas, attribs) {

  var gl = wtu.create3DContext(canvas, attribs);

  if (!gl) {

    testFailed("context does not exist");

  } else {

    testPassed("context exists");

    var blue = [0, 0, 255, 255];

    var black = [0, 0, 0, 0];

    var draw = function(viewportX, viewportY, viewportWidth, viewportHeight) {

      gl.viewport(viewportX, viewportY, viewportWidth, viewportHeight);

      gl.clear(gl.COLOR_BUFFER_BIT);

      wtu.drawUByteColorQuad(gl, blue);

};

    var drawAndCheck = function(viewportX, viewportY, viewportWidth, viewportHeight) {

      var clipSpaceToPixelSpace = function(clip, viewportOffset, viewportSize, max) {

        var pixel = viewportSize / 2 * clip + viewportOffset + viewportSize / 2;

        return Math.min(max, Math.max(0, pixel));

};

      var x1 = clipSpaceToPixelSpace(-0.5, viewportX, viewportWidth, gl.canvas.width);

      var x2 = clipSpaceToPixelSpace( 0.5, viewportX, viewportWidth, gl.canvas.width);

      var y1 = clipSpaceToPixelSpace(-0.5, viewportY, viewportHeight, gl.canvas.height);

      var y2 = clipSpaceToPixelSpace( 0.5, viewportY, viewportHeight, gl.canvas.height);

      var width = x2 - x1;

      var height = y2 - y1;

      debug("checking viewport: " + viewportX + ", " + viewportY + ", " + viewportWidth + ", " + viewportHeight);

      debug("rect: " + x1 + ", " + y1 + ", " + width + ", " + height);

      draw(viewportX, viewportY, viewportWidth, viewportHeight);

      wtu.checkAreaInAndOut(gl, x1, y1, width, height, blue, black);

};

    var program = wtu.setupSimpleColorProgram(gl);

    wtu.setupQuad(gl, {scale: 0.5});

    var w = gl.canvas.width;

    var h = gl.canvas.height;

    drawAndCheck(0, 0, w, h);

    drawAndCheck(0, 0, w/2, h/4);

    drawAndCheck(0, 0, w/4, h/2);

    drawAndCheck(0, 0, w*2, h*2);

    drawAndCheck(-w, 0, w, h);

    drawAndCheck(0, -h, w, h);

    drawAndCheck(w, 0, w, h);

    drawAndCheck(0, h, w, h);

    drawAndCheck(w/4, h/2, w, h);

    drawAndCheck(w/4, h/2, w/2, h/4);

    drawAndCheck(w/2, h/4, w/4, h/2);

    drawAndCheck(w/2, h/4, w, h*2);

    drawAndCheck(-w, 0, w*2, h);

    drawAndCheck(0, -h/4, w/2, h);

    drawAndCheck(-w/4, 0, w, h/2);

    drawAndCheck(0, -h, w*2, h*2);

    debug("");

    wtu.glErrorShouldBe(gl, gl.NO_ERROR, "there should be no errors");

debug("test antialias: false");

test(document.getElementById("canvas1"), {antialias: false});

debug("");

debug("test antialias: true");

test(document.getElementById("canvas2"), {antialias: true});

debug("");

var successfullyParsed = true;

</script>

<script src="../../js/js-test-post.js"></script>

</body>

</html>