2011-01-11 Adrienne Walker <enne@google.com>
[WebKit-https.git] / LayoutTests / fast / canvas / webgl / tex-image-and-sub-image-2d-with-video.html
1 <html>
2 <head>
3 <link rel="stylesheet" href="../../js/resources/js-test-style.css"/>
4 <script src="../../js/resources/js-test-pre.js"></script>
5 <script src="resources/webgl-test.js"></script>
6 <script src="resources/webgl-test-utils.js"></script>
7 <script>
8 var wtu = WebGLTestUtils;
9 var gl = null;
10 var textureLoc = null;
11 var successfullyParsed = false;
12
13 if (window.initNonKhronosFramework) {
14     window.initNonKhronosFramework(true);
15 }
16
17 function init()
18 {
19     description('Verify texImage2D and texSubImage2D code paths taking Video Elements');
20
21     var canvas = document.getElementById("example");
22     gl = wtu.create3DContext(canvas);
23     var program = wtu.setupTexturedQuad(gl);
24
25     gl.clearColor(0,0,0,1);
26     gl.clearDepth(1);
27
28     textureLoc = gl.getUniformLocation(gl.program, "tex");
29
30     var video = document.getElementById("vid");
31     video.addEventListener(
32         "playing", function() { runTest(video); }, true);
33     video.play();
34 }
35
36 // These two declarations need to be global for "shouldBe" to see them
37 var buf = null;
38 var idx = 0;
39 var pixel = [0, 0, 0];
40 var correctColor = null;
41
42 function runOneIteration(videoElement, useTexSubImage2D, flipY, topColor, bottomColor)
43 {
44     debug('Testing ' + (useTexSubImage2D ? 'texSubImage2D' : 'texImage2D') +
45           ' with flipY=' + flipY);
46     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
47     // Disable any writes to the alpha channel
48     gl.colorMask(1, 1, 1, 0);
49     var texture = gl.createTexture();
50     // Bind the texture to texture unit 0
51     gl.bindTexture(gl.TEXTURE_2D, texture);
52     // Set up texture parameters
53     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
54     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
55     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
56     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
57     // Set up pixel store parameters
58     gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);
59     gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
60     // Upload the videoElement into the texture
61     if (useTexSubImage2D) {
62         // Initialize the texture to black first
63         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA,
64                       videoElement.videoWidth, videoElement.videoHeight, 0,
65                       gl.RGBA, gl.UNSIGNED_BYTE, null);
66         gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, videoElement);
67     } else {
68         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, videoElement);
69     }
70
71     var c = document.createElement("canvas");
72     c.width = 16;
73     c.height = 16;
74     c.style.border = "1px solid black";
75     var ctx = c.getContext("2d");
76     ctx.drawImage(videoElement, 0, 0, 16, 16);
77     document.body.appendChild(c);
78
79     // Point the uniform sampler to texture unit 0
80     gl.uniform1i(textureLoc, 0);
81     // Draw the triangles
82     wtu.drawQuad(gl, [0, 0, 0, 255]);
83     // Check a few pixels near the top and bottom and make sure they have
84     // the right color.
85     debug("Checking lower left corner");
86     wtu.checkCanvasRect(gl, 4, 4, 2, 2, bottomColor,
87                         "shouldBe " + bottomColor);
88     debug("Checking upper left corner");
89     wtu.checkCanvasRect(gl, 4, gl.canvas.height - 8, 2, 2, topColor,
90                         "shouldBe " + topColor);
91 }
92
93 function runTest(videoElement)
94 {
95     var red = [255, 0, 0];
96     var green = [0, 255, 0];
97     runOneIteration(videoElement, false, true, red, green);
98     runOneIteration(videoElement, false, false, green, red);
99     runOneIteration(videoElement, true, true, red, green);
100     runOneIteration(videoElement, true, false, green, red);
101
102     finishTest();
103 }
104 </script>
105 </head>
106 <body onload="init()">
107 <canvas id="example" width="32px" height="32px"></canvas>
108 <div id="description"></div>
109 <div id="console"></div>
110 <video width="640" height="228" id="vid" controls>
111   <source src="resources/red-green.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
112   <source src="resources/red-green.webmvp8.webm" type='video/webm; codecs="vp8, vorbis"' />
113   <source src="resources/red-green.theora.ogv"  type='video/ogg; codecs="theora, vorbis"' />
114 </video>
115 </body>
116 </html>