texture-npot-video.html

Enable keyboard shortcuts

<!--

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"' />

</video>

</body>

</html>