| <!DOCTYPE html> |
| <title>Test "video" as a source for "canvas".</title> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <video></video> |
| <canvas width="160" height="120"></canvas> |
| <script> |
| async_test(function(t) { |
| var ctx; |
| var width; |
| var height; |
| var results = { |
| current: 0, |
| values: [ |
| // Different platforms may take different RGB conversion paths or |
| // have slight rounding differences, so allow multiple values here. |
| { time: 0, r: [255], g: [255], b: [0] }, |
| { time: 2, r: [0], g: [3], b: [240, 243] }, |
| { time: 4, r: [0], g: [31], b: [213, 216] }, |
| { time: 6, r: [0], g: [48], b: [182, 185] }, |
| { time: 8, r: [0], g: [75, 76], b: [153, 155] }, |
| { time: 10, r: [0], g: [96, 97], b: [126, 128] } |
| ] |
| }; |
| |
| var video = document.querySelector("video"); |
| |
| video.onloadedmetadata = t.step_func(function() { |
| width = video.videoWidth / 2; |
| height = video.videoHeight / 2; |
| |
| ctx = document.querySelector("canvas").getContext("2d"); |
| ctx.fillStyle = "yellow"; |
| ctx.fillRect(0, 0, width, height); |
| testFrame(); |
| }); |
| |
| video.onseeked = t.step_func(function() { |
| ctx.drawImage(video, 0, 0, width, height); |
| testFrame(); |
| }); |
| |
| function testFrame() { |
| var expected = results.values[results.current]; |
| var frame = ctx.getImageData(0, 0, width, height); |
| var r = frame.data[4 * 2 * width + 16 + 0]; |
| var g = frame.data[4 * 2 * width + 16 + 1]; |
| var b = frame.data[4 * 2 * width + 16 + 2]; |
| |
| assert_true(expected.r.includes(r)); |
| assert_true(expected.g.includes(g)); |
| assert_true(expected.b.includes(b)); |
| |
| if (++results.current == results.values.length) |
| t.done(); |
| else |
| video.currentTime = results.values[results.current].time; |
| } |
| |
| video.src = "content/counting.webm"; |
| }); |
| </script> |
