dom/canvas/test/webgl-conf/checkout/conformance/rendering/gl-viewport-test.html

   1 <!--
   2 Copyright (c) 2019 The Khronos Group Inc.
   3 Use of this source code is governed by an MIT-style license that can be
   4 found in the LICENSE.txt file.
   5 -->
   6
   7 <!DOCTYPE html>
   8 <html>
   9 <head>
  10 <meta charset="utf-8">
  11 <title>WebGL Viewport Test</title>
  12 <link rel="stylesheet" href="../../resources/js-test-style.css"/>
  13 <script src="../../js/js-test-pre.js"></script>
  14 <script src="../../js/webgl-test-utils.js"></script>
  15 <style>
  16 canvas {
  17     border: 1px solid #000;
  18 }
  19 </style>
  20 </head>
  21 <body>
  22 <canvas id="canvas1" width="64" height="128"> </canvas>
  23 <canvas id="canvas2" width="64" height="128"> </canvas>
  24 <div id="description"></div>
  25 <div id="console"></div>
  26 <script>
  27 "use strict";
  28 description();
  29 var wtu = WebGLTestUtils;
  30
  31 function test(canvas, attribs) {
  32   var gl = wtu.create3DContext(canvas, attribs);
  33
  34   if (!gl) {
  35     testFailed("context does not exist");
  36   } else {
  37     testPassed("context exists");
  38
  39     var blue = [0, 0, 255, 255];
  40     var black = [0, 0, 0, 0];
  41
  42     var draw = function(viewportX, viewportY, viewportWidth, viewportHeight) {
  43       gl.viewport(viewportX, viewportY, viewportWidth, viewportHeight);
  44       gl.clear(gl.COLOR_BUFFER_BIT);
  45       wtu.drawUByteColorQuad(gl, blue);
  46     };
  47
  48     var drawAndCheck = function(viewportX, viewportY, viewportWidth, viewportHeight) {
  49       var clipSpaceToPixelSpace = function(clip, viewportOffset, viewportSize, max) {
  50         var pixel = viewportSize / 2 * clip + viewportOffset + viewportSize / 2;
  51         return Math.min(max, Math.max(0, pixel));
  52       };
  53
  54       var x1 = clipSpaceToPixelSpace(-0.5, viewportX, viewportWidth, gl.canvas.width);
  55       var x2 = clipSpaceToPixelSpace( 0.5, viewportX, viewportWidth, gl.canvas.width);
  56       var y1 = clipSpaceToPixelSpace(-0.5, viewportY, viewportHeight, gl.canvas.height);
  57       var y2 = clipSpaceToPixelSpace( 0.5, viewportY, viewportHeight, gl.canvas.height);
  58       var width = x2 - x1;
  59       var height = y2 - y1;
  60
  61       debug("checking viewport: " + viewportX + ", " + viewportY + ", " + viewportWidth + ", " + viewportHeight);
  62       debug("rect: " + x1 + ", " + y1 + ", " + width + ", " + height);
  63       draw(viewportX, viewportY, viewportWidth, viewportHeight);
  64       wtu.checkAreaInAndOut(gl, x1, y1, width, height, blue, black);
  65     };
  66
  67     var program = wtu.setupSimpleColorProgram(gl);
  68     wtu.setupQuad(gl, {scale: 0.5});
  69
  70     var w = gl.canvas.width;
  71     var h = gl.canvas.height;
  72
  73     drawAndCheck(0, 0, w, h);
  74     drawAndCheck(0, 0, w/2, h/4);
  75     drawAndCheck(0, 0, w/4, h/2);
  76     drawAndCheck(0, 0, w*2, h*2);
  77
  78     drawAndCheck(-w, 0, w, h);
  79     drawAndCheck(0, -h, w, h);
  80     drawAndCheck(w, 0, w, h);
  81     drawAndCheck(0, h, w, h);
  82
  83     drawAndCheck(w/4, h/2, w, h);
  84     drawAndCheck(w/4, h/2, w/2, h/4);
  85     drawAndCheck(w/2, h/4, w/4, h/2);
  86     drawAndCheck(w/2, h/4, w, h*2);
  87
  88     drawAndCheck(-w, 0, w*2, h);
  89     drawAndCheck(0, -h/4, w/2, h);
  90     drawAndCheck(-w/4, 0, w, h/2);
  91     drawAndCheck(0, -h, w*2, h*2);
  92
  93     debug("");
  94     wtu.glErrorShouldBe(gl, gl.NO_ERROR, "there should be no errors");
  95   }
  96 }
  97
  98 debug("test antialias: false");
  99 test(document.getElementById("canvas1"), {antialias: false});
 100
 101 debug("");
 102 debug("test antialias: true");
 103 test(document.getElementById("canvas2"), {antialias: true});
 104
 105 debug("");
 106 var successfullyParsed = true;
 107
 108 </script>
 109 <script src="../../js/js-test-post.js"></script>
 110
 111 </body>
 112 </html>