gl-viewport-test.html (3347B)
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>