diff options
Diffstat (limited to 'dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/texture-npot-video.html')
| -rw-r--r-- | dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/texture-npot-video.html | 160 |
1 files changed, 160 insertions, 0 deletions
diff --git a/dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/texture-npot-video.html b/dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/texture-npot-video.html new file mode 100644 index 0000000000..ef979d4c5a --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/texture-npot-video.html @@ -0,0 +1,160 @@ +<!-- +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"> +<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> +<script> +"use strict"; +var wtu = WebGLTestUtils; +var gl = null; +var textureLoc = null; +var successfullyParsed = false; + +initTestingHarness(); + +function logVisibility(isOnload) +{ + let prefix = ''; + if (isOnload) + prefix = 'Upon load: '; + if (document.hidden) { + console.log(prefix + '*** Tab was backgrounded (if running in automated test harness, why?) ***'); + } else { + console.log(prefix + 'Tab was foregrounded'); + } +} + +function init() +{ + description('Verify npot video'); + + document.addEventListener("visibilitychange", visibilityChanged, false); + + logVisibility(true); + + var canvas = document.getElementById("example"); + gl = wtu.create3DContext(canvas); + var program = wtu.setupTexturedQuad(gl); + + gl.clearColor(0,0,0,1); + gl.clearDepth(1); + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + // Disable any writes to the alpha channel + gl.colorMask(1, 1, 1, 0); + + textureLoc = gl.getUniformLocation(program, "tex"); + + var video = document.getElementById("vid"); + wtu.startPlayingAndWaitForVideo(video, runTest); +} + +function visibilityChanged() { + logVisibility(false); +} + +function runOneIteration(videoElement, useTexSubImage2D, flipY, topColor, bottomColor, badMinFilter, badClamp, genMips) +{ + debug('Testing ' + (useTexSubImage2D ? 'texSubImage2D' : 'texImage2D') + + ' with flipY=' + flipY); + var texture = gl.createTexture(); + // Bind the texture to texture unit 0 + gl.bindTexture(gl.TEXTURE_2D, texture); + // Set up pixel store parameters + gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY); + // Upload the videoElement into the texture + debug("size: " + videoElement.videoWidth + "x" + videoElement.videoHeight); + if (useTexSubImage2D) { + // Initialize the texture to black first + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, + videoElement.videoWidth, videoElement.videoHeight, 0, + gl.RGBA, gl.UNSIGNED_BYTE, null); + gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, videoElement); + } else { + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, videoElement); + } + + // Set up texture parameters + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); + if (badMinFilter) { + debug("bad min filter"); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST); + } else { + debug("good min filter"); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + } + if (badClamp) { + debug("bad clamp"); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); + } else { + debug("good clamp"); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + } + if (genMips) { + debug("generate mips"); + gl.generateMipmap(gl.TEXTURE_2D); + wtu.glErrorShouldBe(gl, gl.INVALID_OPERATION, "should be INVALID_OPERATION"); + } + +// var c = document.createElement("canvas"); +// c.width = 16; +// c.height = 16; +// c.style.border = "1px solid black"; +// var ctx = c.getContext("2d"); +// ctx.drawImage(videoElement, 0, 0, 16, 16); +// document.body.appendChild(c); + + // Point the uniform sampler to texture unit 0 + gl.uniform1i(textureLoc, 0); + // Draw the triangles + wtu.clearAndDrawUnitQuad(gl, [0, 0, 0, 255]); + // Check a few pixels near the top and bottom and make sure they have + // the right color. + var tolerance = 5; + debug("Checking lower left corner"); + wtu.checkCanvasRect(gl, 4, 4, 2, 2, bottomColor, + "shouldBe " + bottomColor, tolerance); + debug("Checking upper left corner"); + wtu.checkCanvasRect(gl, 4, gl.canvas.height - 8, 2, 2, topColor, + "shouldBe " + topColor, tolerance); + debug(""); +} + +function runTest(videoElement) +{ + var red = [255, 0, 0]; + var green = [0, 255, 0]; + var black = [0, 0, 0]; + runOneIteration(videoElement, false, true, black, black, true, true, true); + runOneIteration(videoElement, false, true, black, black, true, false, false); + runOneIteration(videoElement, false, true, black, black, false, true, false); + runOneIteration(videoElement, false, true, black, black, true, true, false); + runOneIteration(videoElement, false, true, green, red, false, false, false); + runOneIteration(videoElement, false, false, red, green, false, false, false); + runOneIteration(videoElement, true, true, green, red, false, false, false); + runOneIteration(videoElement, true, false, red, green, false, false, false); + + wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors"); + finishTest(); +} +</script> +</head> +<body onload="init()"> +<canvas id="example" width="64" height="48"></canvas> +<div id="description"></div> +<div id="console"></div> +<video id="vid" style="display:none;" muted> + <source src="../../../resources/npot-video.mp4" type='video/mp4; codecs="avc1.42E01E"' /> + <source src="../../../resources/npot-video.webmvp8.webm" type='video/webm; codecs="vp8"' /> + <source src="../../../resources/npot-video.theora.ogv" type='video/ogg; codecs="theora"' /> +</video> +</body> +</html> |