dom/canvas/test/webgl-conf/checkout/extra/tex-image-with-video-test.js

   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
   7 // This block needs to be outside the onload handler in order for this
   8 // test to run reliably in WebKit's test harness (at least the
   9 // Chromium port). https://bugs.webkit.org/show_bug.cgi?id=87448
  10 initTestingHarness();
  11
  12 var old = debug;
  13 var debug = function(msg) {
  14   console.log(msg);
  15   old(msg);
  16 };
  17
  18 function generateTest(pixelFormat, pixelType, prologue) {
  19     var wtu = WebGLTestUtils;
  20     var gl = null;
  21     var textureLoc = null;
  22     var successfullyParsed = false;
  23
  24     // Test each format separately because many browsers implement each
  25     // differently. Some might be GPU accelerated, some might not. Etc...
  26     var videos = [
  27       { src: "../resources/red-green.mp4"         , type: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"', },
  28       { src: "../resources/red-green.webmvp8.webm", type: 'video/webm; codecs="vp8, vorbis"',           },
  29       { src: "../resources/red-green.webmvp9.webm", type: 'video/webm; codecs="vp9"',                   },
  30     ];
  31
  32     var videoNdx = 0;
  33     var video;
  34
  35     function runNextVideo() {
  36         if (video) {
  37             video.pause();
  38         }
  39
  40         if (videoNdx == videos.length) {
  41             finishTest();
  42             return;
  43         }
  44
  45         var info = videos[videoNdx++];
  46         debug("");
  47         debug("testing: " + info.type);
  48         video = document.createElement("video");
  49         video.muted = true;
  50         var canPlay = true;
  51         if (!video.canPlayType) {
  52           testFailed("video.canPlayType required method missing");
  53           runNextVideo();
  54           return;
  55         }
  56
  57         if(!video.canPlayType(info.type).replace(/no/, '')) {
  58           debug(info.type + " unsupported");
  59           runNextVideo();
  60           return;
  61         };
  62
  63         document.body.appendChild(video);
  64         video.type = info.type;
  65         video.crossOrigin = 'anonymous';
  66         video.src = info.src;
  67         wtu.startPlayingAndWaitForVideo(video, runTest);
  68     }
  69
  70     var init = function()
  71     {
  72         description('Verify texImage2D and texSubImage2D code paths taking video elements (' + pixelFormat + '/' + pixelType + ')');
  73
  74         gl = wtu.create3DContext("example");
  75
  76         if (!prologue(gl)) {
  77             finishTest();
  78             return;
  79         }
  80
  81         var program = wtu.setupTexturedQuad(gl);
  82
  83         gl.clearColor(0,0,0,1);
  84         gl.clearDepth(1);
  85
  86         textureLoc = gl.getUniformLocation(program, "tex");
  87         runNextVideo();
  88     }
  89
  90     function runOneIteration(videoElement, useTexSubImage2D, flipY, topColor, bottomColor)
  91     {
  92         debug('Testing ' + (useTexSubImage2D ? 'texSubImage2D' : 'texImage2D') +
  93               ' with flipY=' + flipY);
  94         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  95         // Disable any writes to the alpha channel
  96         gl.colorMask(1, 1, 1, 0);
  97         var texture = gl.createTexture();
  98         // Bind the texture to texture unit 0
  99         gl.bindTexture(gl.TEXTURE_2D, texture);
 100         // Set up texture parameters
 101         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
 102         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
 103         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
 104         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 105         // Set up pixel store parameters
 106         gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);
 107         gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
 108         // Upload the videoElement into the texture
 109         if (useTexSubImage2D) {
 110             // Initialize the texture to black first
 111             gl.texImage2D(gl.TEXTURE_2D, 0, gl[pixelFormat],
 112                           videoElement.videoWidth, videoElement.videoHeight, 0,
 113                           gl[pixelFormat], gl[pixelType], null);
 114             gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl[pixelFormat], gl[pixelType], videoElement);
 115         } else {
 116             gl.texImage2D(gl.TEXTURE_2D, 0, gl[pixelFormat], gl[pixelFormat], gl[pixelType], videoElement);
 117         }
 118
 119         var c = document.createElement("canvas");
 120         c.width = 16;
 121         c.height = 16;
 122         c.style.border = "1px solid black";
 123         var ctx = c.getContext("2d");
 124         ctx.drawImage(videoElement, 0, 0, 16, 16);
 125         document.body.appendChild(c);
 126
 127         // Point the uniform sampler to texture unit 0
 128         gl.uniform1i(textureLoc, 0);
 129         // Draw the triangles
 130         wtu.clearAndDrawUnitQuad(gl, [0, 0, 0, 255]);
 131         // Check a few pixels near the top and bottom and make sure they have
 132         // the right color.
 133         var tolerance = 5;
 134         debug("Checking lower left corner");
 135         wtu.checkCanvasRect(gl, 4, 4, 2, 2, bottomColor,
 136                             "shouldBe " + bottomColor, tolerance);
 137         debug("Checking upper left corner");
 138         wtu.checkCanvasRect(gl, 4, gl.canvas.height - 8, 2, 2, topColor,
 139                             "shouldBe " + topColor, tolerance);
 140     }
 141
 142     function runTest(videoElement)
 143     {
 144         var red = [255, 0, 0];
 145         var green = [0, 255, 0];
 146         runOneIteration(videoElement, false, true, red, green);
 147         runOneIteration(videoElement, false, false, green, red);
 148         runOneIteration(videoElement, true, true, red, green);
 149         runOneIteration(videoElement, true, false, green, red);
 150
 151         wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");
 152
 153         runNextVideo();
 154     }
 155
 156     return init;
 157 }