dom/canvas/test/webgl-conf/checkout/conformance/rendering/gl-scissor-canvas-dimensions.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 Scissor Canvas Dimensions 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     width: 64px;
  19     height: 64px;
  20 }
  21 </style>
  22 </head>
  23 <body>
  24 <canvas id="canvas1" width="16" height="16"> </canvas>
  25 <canvas id="canvas2" width="16" height="16"> </canvas>
  26 <div id="description"></div>
  27 <div id="console"></div>
  28 <script>
  29 "use strict";
  30 description("Check that scissoring is initially disabled and that the scissor rect does not change when canvas size changes.");
  31
  32 var wtu = WebGLTestUtils;
  33
  34 function testInit(canvas, attribs) {
  35   var gl = wtu.create3DContext(canvas, attribs);
  36   if (!gl) {
  37     testFailed("context does not exist");
  38     return;
  39   }
  40   debug("Testing that scissor test is initially disabled");
  41   // Setting the scissor rect should have no effect on drawing.
  42   gl.scissor(0, 0, 1, 1);
  43   gl.clearColor(0, 1, 0, 1);
  44   gl.clear(gl.COLOR_BUFFER_BIT);
  45   wtu.glErrorShouldBe(gl, gl.NO_ERROR, "there should be no errors");
  46   wtu.checkCanvasRect(gl, 0, 0, canvas.width, canvas.height, [0, 255, 0, 255], "whole canvas should be green");
  47 }
  48
  49 function testCanvasSizeChange(canvas, attribs) {
  50   var gl = wtu.create3DContext(canvas, attribs);
  51   if (!gl) {
  52     testFailed("context does not exist");
  53     return;
  54   }
  55   debug("Testing that scissor rect dimensions do not change if the canvas is resized.");
  56   canvas.width = 32;
  57   canvas.height = 32;
  58   gl.viewport(0, 0, 32, 32);
  59   gl.enable(gl.SCISSOR_TEST);
  60   gl.clearColor(0, 1, 0, 1);
  61   gl.clear(gl.COLOR_BUFFER_BIT);
  62   wtu.glErrorShouldBe(gl, gl.NO_ERROR, "there should be no errors");
  63   wtu.checkCanvasRect(gl, 0, 0, 16, 16, [0, 255, 0, 255], "area inside scissor should be green");
  64   wtu.checkCanvasRect(gl, 0, 16, 32, 16, [0, 0, 0, 0], "area outside scissor should be black");
  65   wtu.checkCanvasRect(gl, 16, 0, 16, 16, [0, 0, 0, 0], "area outside scissor should be black");
  66 }
  67
  68 testInit(document.getElementById("canvas1"), {antialias: false});
  69 debug("");
  70 testCanvasSizeChange(document.getElementById("canvas2"), {antialias: false});
  71
  72 var successfullyParsed = true;
  73
  74 </script>
  75 <script src="../../js/js-test-post.js"></script>
  76
  77 </body>
  78 </html>