1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
<!--
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>
|
