gl-scissor-canvas-dimensions.html (2477B)
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>