1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/content/canvas/test/webgl-conformance/conformance/textures/tex-image-and-sub-image-2d-with-video.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,125 @@
1.4 +<!--
1.5 +Copyright (c) 2011 The Chromium Authors. All rights reserved.
1.6 +Use of this source code is governed by a BSD-style license that can be
1.7 +found in the LICENSE file.
1.8 + -->
1.9 +<!DOCTYPE html>
1.10 +<html>
1.11 +<head>
1.12 +<meta charset="utf-8">
1.13 +<link rel="stylesheet" href="../../resources/js-test-style.css"/>
1.14 +<script src="../../resources/js-test-pre.js"></script>
1.15 +<script src="../resources/webgl-test.js"></script>
1.16 +<script src="../resources/webgl-test-utils.js"></script>
1.17 +<script>
1.18 +var wtu = WebGLTestUtils;
1.19 +var gl = null;
1.20 +var textureLoc = null;
1.21 +var successfullyParsed = false;
1.22 +
1.23 +if (window.initNonKhronosFramework) {
1.24 + window.initNonKhronosFramework(true);
1.25 +}
1.26 +
1.27 +function init()
1.28 +{
1.29 + description('Verify texImage2D and texSubImage2D code paths taking Video Elements');
1.30 +
1.31 + gl = wtu.create3DContext("example");
1.32 + var program = wtu.setupTexturedQuad(gl);
1.33 +
1.34 + gl.clearColor(0,0,0,1);
1.35 + gl.clearDepth(1);
1.36 +
1.37 + textureLoc = gl.getUniformLocation(program, "tex");
1.38 +
1.39 + var video = document.getElementById("vid");
1.40 + video.addEventListener(
1.41 + "playing", function() { runTest(video); }, true);
1.42 + video.loop = true;
1.43 + video.play();
1.44 +}
1.45 +
1.46 +// These two declarations need to be global for "shouldBe" to see them
1.47 +var buf = null;
1.48 +var idx = 0;
1.49 +var pixel = [0, 0, 0];
1.50 +var correctColor = null;
1.51 +
1.52 +function runOneIteration(videoElement, useTexSubImage2D, flipY, topColor, bottomColor)
1.53 +{
1.54 + debug('Testing ' + (useTexSubImage2D ? 'texSubImage2D' : 'texImage2D') +
1.55 + ' with flipY=' + flipY);
1.56 + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
1.57 + // Disable any writes to the alpha channel
1.58 + gl.colorMask(1, 1, 1, 0);
1.59 + var texture = gl.createTexture();
1.60 + // Bind the texture to texture unit 0
1.61 + gl.bindTexture(gl.TEXTURE_2D, texture);
1.62 + // Set up texture parameters
1.63 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
1.64 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
1.65 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
1.66 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
1.67 + // Set up pixel store parameters
1.68 + gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);
1.69 + gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
1.70 + // Upload the videoElement into the texture
1.71 + if (useTexSubImage2D) {
1.72 + // Initialize the texture to black first
1.73 + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA,
1.74 + videoElement.videoWidth, videoElement.videoHeight, 0,
1.75 + gl.RGBA, gl.UNSIGNED_BYTE, null);
1.76 + gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, videoElement);
1.77 + } else {
1.78 + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, videoElement);
1.79 + }
1.80 +
1.81 + var c = document.createElement("canvas");
1.82 + c.width = 16;
1.83 + c.height = 16;
1.84 + c.style.border = "1px solid black";
1.85 + var ctx = c.getContext("2d");
1.86 + ctx.drawImage(videoElement, 0, 0, 16, 16);
1.87 + document.body.appendChild(c);
1.88 +
1.89 + // Point the uniform sampler to texture unit 0
1.90 + gl.uniform1i(textureLoc, 0);
1.91 + // Draw the triangles
1.92 + wtu.drawQuad(gl, [0, 0, 0, 255]);
1.93 + // Check a few pixels near the top and bottom and make sure they have
1.94 + // the right color.
1.95 + debug("Checking lower left corner");
1.96 + wtu.checkCanvasRect(gl, 4, 4, 2, 2, bottomColor,
1.97 + "shouldBe " + bottomColor);
1.98 + debug("Checking upper left corner");
1.99 + wtu.checkCanvasRect(gl, 4, gl.canvas.height - 8, 2, 2, topColor,
1.100 + "shouldBe " + topColor);
1.101 +}
1.102 +
1.103 +function runTest(videoElement)
1.104 +{
1.105 + var red = [255, 0, 0];
1.106 + var green = [0, 255, 0];
1.107 + runOneIteration(videoElement, false, true, red, green);
1.108 + runOneIteration(videoElement, false, false, green, red);
1.109 + runOneIteration(videoElement, true, true, red, green);
1.110 + runOneIteration(videoElement, true, false, green, red);
1.111 +
1.112 + glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");
1.113 + videoElement.removeEventListener("playing", runTest);
1.114 + finishTest();
1.115 +}
1.116 +</script>
1.117 +</head>
1.118 +<body onload="init()">
1.119 +<canvas id="example" width="32px" height="32px"></canvas>
1.120 +<div id="description"></div>
1.121 +<div id="console"></div>
1.122 +<video width="640" height="228" id="vid" controls>
1.123 + <source src="../resources/red-green.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
1.124 + <source src="../resources/red-green.webmvp8.webm" type='video/webm; codecs="vp8, vorbis"' />
1.125 + <source src="../resources/red-green.theora.ogv" type='video/ogg; codecs="theora, vorbis"' />
1.126 +</video>
1.127 +</body>
1.128 +</html>
