<!--
Copyright (c) 2022 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="../../../../webgl_test_files/resources/js-test-style.css"/>
<script src="../../../../webgl_test_files/js/js-test-pre.js"></script>
<script src="../../../../webgl_test_files/js/webgl-test-utils.js"></script>
<script>
"use strict";
var wtu = WebGLTestUtils;
var gl = null;
var textureLoc = null;
var successfullyParsed = false;
var blue = [0, 0, 248];
var yellow = [255, 255, 0];
var black = [0, 0, 0];
initTestingHarness();

function init()
{
    description('Verify optimization of repeated uploads of HTMLVideoElement to a texture');

    const canvas = document.getElementById("example");
    gl = wtu.create3DContext(canvas, { antialias: false, depth: false });
    const program = wtu.setupTexturedQuad(gl);
    gl.clearColor(0,0,0,1);
    gl.clearDepth(1);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    const textureLoc = gl.getUniformLocation(program, "tex");
    gl.uniform1i(textureLoc, 0);
    gl.viewport(0, 0, canvas.width, canvas.height);

    const video1 = document.getElementById("video1");
    const video2 = document.getElementById("video2");
    wtu.startPlayingAndWaitForVideo(video1, (video) => {
        wtu.startPlayingAndWaitForVideo(video2, (video) => {
            runTest(video1, video2);
        });
    });
}

function checkFramebufferHasVideo2(gl)
{
    const leftColor = blue;
    const rightColor = yellow;
    const tolerance = 5;
    debug("Checking mid left border");
    wtu.checkCanvasRect(gl, 4, 20, 2, 2, leftColor, "shouldBe " + leftColor, tolerance);
    debug("Checking mid right border");
    wtu.checkCanvasRect(gl, gl.canvas.width - 4, gl.canvas.height - 20, 2, 2, rightColor, "shouldBe " + rightColor, tolerance);
}

function testTwoTexturesBug1(video1, video2)
{
    debug("Testing uploading same video to two different textures does not skip the latter upload")
    const textures = [gl.createTexture(), gl.createTexture()];
    // Initialize texture[0] to some specific content that fails the test.
    // Initialization is done with video to exercise the video content identification
    // algorithm.
    gl.bindTexture(gl.TEXTURE_2D, textures[0]);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video1);

    // Try to fool the video content identification algorithm by first uploading
    // the passing content to some other, untested texture.
    gl.bindTexture(gl.TEXTURE_2D, textures[1]);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video2);

    // Update texture[0] to some content that passes the test.
    gl.bindTexture(gl.TEXTURE_2D, textures[0]);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video2);

    // Verify that the texture[0] received the new content.
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    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);

    wtu.clearAndDrawUnitQuad(gl, [255, 0, 0, 255]);
    checkFramebufferHasVideo2(gl);
}

function runTest(video1, video2)
{
    testTwoTexturesBug1(video1, video2);
    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="video1" >
  <source src="../../../../webgl_test_files/resources/red-green.mp4"  type='video/mp4; codecs="avc1.42E01E"' />
  <source src="../../../../webgl_test_files/resources/red-green.webmvp8.webm" type='video/webm; codecs="vp8"' />
  <source src="../../../../webgl_test_files/resources/red-green.theora.ogv"  type='video/ogg; codecs="theora"' />
</video>
<video id="video2" >
    <source src="../../../../webgl_test_files/resources/video-rotation-0.mp4"  type='video/mp4; codecs="avc1.42E01E"' />
  </video>
</body>
</html>