dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/texture-npot-video.html

   1 <!--
   2 Copyright (c) 2019 The Khronos Group Inc.
   3 Use of this source code is governed by an MIT-style license that can be
   4 found in the LICENSE.txt file.
   5 -->
   6 <!DOCTYPE html>
   7 <html>
   8 <head>
   9 <meta charset="utf-8">
  10 <link rel="stylesheet" href="../../../resources/js-test-style.css"/>
  11 <script src="../../../js/js-test-pre.js"></script>
  12 <script src="../../../js/webgl-test-utils.js"></script>
  13 <script>
  14 "use strict";
  15 var wtu = WebGLTestUtils;
  16 var gl = null;
  17 var textureLoc = null;
  18 var successfullyParsed = false;
  19
  20 initTestingHarness();
  21
  22 function logVisibility(isOnload)
  23 {
  24     let prefix = '';
  25     if (isOnload)
  26         prefix = 'Upon load: ';
  27     if (document.hidden) {
  28         console.log(prefix + '*** Tab was backgrounded (if running in automated test harness, why?) ***');
  29     } else {
  30         console.log(prefix + 'Tab was foregrounded');
  31     }
  32 }
  33
  34 function init()
  35 {
  36     description('Verify npot video');
  37
  38     document.addEventListener("visibilitychange", visibilityChanged, false);
  39
  40     logVisibility(true);
  41
  42     var canvas = document.getElementById("example");
  43     gl = wtu.create3DContext(canvas);
  44     var program = wtu.setupTexturedQuad(gl);
  45
  46     gl.clearColor(0,0,0,1);
  47     gl.clearDepth(1);
  48     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  49     // Disable any writes to the alpha channel
  50     gl.colorMask(1, 1, 1, 0);
  51
  52     textureLoc = gl.getUniformLocation(program, "tex");
  53
  54     var video = document.getElementById("vid");
  55     wtu.startPlayingAndWaitForVideo(video, runTest);
  56 }
  57
  58 function visibilityChanged() {
  59     logVisibility(false);
  60 }
  61
  62 function runOneIteration(videoElement, useTexSubImage2D, flipY, topColor, bottomColor, badMinFilter, badClamp, genMips)
  63 {
  64     debug('Testing ' + (useTexSubImage2D ? 'texSubImage2D' : 'texImage2D') +
  65           ' with flipY=' + flipY);
  66     var texture = gl.createTexture();
  67     // Bind the texture to texture unit 0
  68     gl.bindTexture(gl.TEXTURE_2D, texture);
  69     // Set up pixel store parameters
  70     gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);
  71     // Upload the videoElement into the texture
  72     debug("size: " + videoElement.videoWidth + "x" + videoElement.videoHeight);
  73     if (useTexSubImage2D) {
  74         // Initialize the texture to black first
  75         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA,
  76                       videoElement.videoWidth, videoElement.videoHeight, 0,
  77                       gl.RGBA, gl.UNSIGNED_BYTE, null);
  78         gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, videoElement);
  79     } else {
  80         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, videoElement);
  81     }
  82
  83     // Set up texture parameters
  84     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  85     if (badMinFilter) {
  86         debug("bad min filter");
  87         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
  88     } else {
  89         debug("good min filter");
  90         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  91     }
  92     if (badClamp) {
  93         debug("bad clamp");
  94         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
  95         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
  96     } else {
  97         debug("good clamp");
  98         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  99         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 100     }
 101     if (genMips) {
 102         debug("generate mips");
 103         gl.generateMipmap(gl.TEXTURE_2D);
 104         wtu.glErrorShouldBe(gl, gl.INVALID_OPERATION, "should be INVALID_OPERATION");
 105     }
 106
 107 //    var c = document.createElement("canvas");
 108 //    c.width = 16;
 109 //    c.height = 16;
 110 //    c.style.border = "1px solid black";
 111 //    var ctx = c.getContext("2d");
 112 //    ctx.drawImage(videoElement, 0, 0, 16, 16);
 113 //    document.body.appendChild(c);
 114
 115     // Point the uniform sampler to texture unit 0
 116     gl.uniform1i(textureLoc, 0);
 117     // Draw the triangles
 118     wtu.clearAndDrawUnitQuad(gl, [0, 0, 0, 255]);
 119     // Check a few pixels near the top and bottom and make sure they have
 120     // the right color.
 121     var tolerance = 5;
 122     debug("Checking lower left corner");
 123     wtu.checkCanvasRect(gl, 4, 4, 2, 2, bottomColor,
 124                         "shouldBe " + bottomColor, tolerance);
 125     debug("Checking upper left corner");
 126     wtu.checkCanvasRect(gl, 4, gl.canvas.height - 8, 2, 2, topColor,
 127                         "shouldBe " + topColor, tolerance);
 128     debug("");
 129 }
 130
 131 function runTest(videoElement)
 132 {
 133     var red = [255, 0, 0];
 134     var green = [0, 255, 0];
 135     var black = [0, 0, 0];
 136     runOneIteration(videoElement, false, true, black, black, true, true, true);
 137     runOneIteration(videoElement, false, true, black, black, true, false, false);
 138     runOneIteration(videoElement, false, true, black, black, false, true, false);
 139     runOneIteration(videoElement, false, true, black, black, true, true, false);
 140     runOneIteration(videoElement, false, true, green, red, false, false, false);
 141     runOneIteration(videoElement, false, false, red, green, false, false, false);
 142     runOneIteration(videoElement, true, true, green, red, false, false, false);
 143     runOneIteration(videoElement, true, false, red, green, false, false, false);
 144
 145     wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");
 146     finishTest();
 147 }
 148 </script>
 149 </head>
 150 <body onload="init()">
 151 <canvas id="example" width="64" height="48"></canvas>
 152 <div id="description"></div>
 153 <div id="console"></div>
 154 <video id="vid" style="display:none;" muted>
 155   <source src="../../../resources/npot-video.mp4"  type='video/mp4; codecs="avc1.42E01E"' />
 156   <source src="../../../resources/npot-video.webmvp8.webm" type='video/webm; codecs="vp8"' />
 157 </video>
 158 </body>
 159 </html>