Source code
Revision control
Copy as Markdown
Other Tools
<!--
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 HD-DPI issues texture conformance 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>
</head>
<body>
<canvas id="example" width="4" height="4" style="width: 40px; height: 30px;"></canvas>
<div id="description"></div>
<div id="console"></div>
<script>
"use strict";
description();
var wtu = WebGLTestUtils;
var gl = wtu.create3DContext("example");
var program = wtu.setupTexturedQuad(gl);
function fillInMips(gl, size) {
// fill in the mips
var level = 1;
for (;;) {
size /= 2;
if (size < 1) {
break;
}
var numBytes = size * size * 4;
var pixels = new Uint8Array(numBytes);
for (var jj = 0; jj < numBytes; jj += 4) {
pixels[jj + 0] = 0;
pixels[jj + 1] = 255;
pixels[jj + 2] = 0;
pixels[jj + 3] = 255;
}
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
}
}
function testCanvas(size) {
debug("");
debug("testing 2D canvas size " + size + ", " + size);
var canvas = document.createElement("canvas");
canvas.width = size;
canvas.height = size;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(0,255,0)";
ctx.fillRect(0, 0, size, size);
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
fillInMips(gl, size);
// Draw. If this an HD-DPI device and the 2d canvas is double res or larger
// the implementation must scale to CSS pixels (ie, canvas.width, canvas.height)(
// when doing the copy in texImage2D. If it has not scaled and instead done
// a direct copy of the larger texture this test will not have created enough mips
// and will therefore not be "texture complete" and will render in black.
wtu.clearAndDrawUnitQuad(gl);
wtu.checkCanvas(gl, [0, 255, 0, 255], "should be green");
}
function testWebGL(size) {
debug("");
debug("testing WebGL canvas size " + size + ", " + size);
var canvas = document.createElement("canvas");
canvas.width = size;
canvas.height = size;
var gl2 = wtu.create3DContext(canvas);
gl2.clearColor(0,1,0,1);
gl2.clear(gl.COLOR_BUFFER_BIT);
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
fillInMips(gl, size);
// Draw. If this an HD-DPI device check for 2 possible bugs.
//
// 1) the WebGL canvas is double res or larger. That's just a bug period and
// is checked for in another test but would also fail here.
//
// 2) the WebGL canvas is single res but the code the scales a double res
// 2d canvas also mistakenly scales a single res WebGL canvas.
//
// If it has been scaled then we'll have the wrong kind of mips chain here.
// Level 0 will be half resolution. Level 1 will be the same resolution
// and will therefore not be "texture complete" and will render in black.
wtu.clearAndDrawUnitQuad(gl);
wtu.checkCanvas(gl, [0, 255, 0, 255], "should be green");
}
testCanvas(4);
testCanvas(512);
testWebGL(4);
testWebGL(512);
wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors");
var successfullyParsed = true;
</script>
<script src="../../../js/js-test-post.js"></script>
</body>
</html>