101 lines
3.3 KiB
HTML
101 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
<canvas id="canvas" width=100 height=100></div>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<script>
|
|
window.jsTestIsAsync = true;
|
|
|
|
if (window.internals)
|
|
internals.settings.setAnimatedImageDebugCanvasDrawingEnabled(true);
|
|
|
|
var imageData;
|
|
|
|
function loadImage(src) {
|
|
return new Promise(resolve => {
|
|
let image = new Image;
|
|
image.src = src;
|
|
return image.decode().then(() => { resolve(image); });
|
|
});
|
|
}
|
|
|
|
async function testImage(image, colors, frameRate)
|
|
{
|
|
let canvas = document.getElementById('canvas');
|
|
var previousValue = null;
|
|
|
|
while (colors.length) {
|
|
let color = colors.shift();
|
|
previousValue = await shouldBecome(image, canvas, color, previousValue, frameRate);
|
|
}
|
|
}
|
|
|
|
function shouldBecome(image, canvas, color, previousValue, frameRate)
|
|
{
|
|
return new Promise(resolve => {
|
|
let referenceData = colorToImageData(color);
|
|
|
|
var test = () => {
|
|
let context = canvas.getContext('2d');
|
|
context.drawImage(image, 0, 0, canvas.width, canvas.height);
|
|
let imageData = context.getImageData(0, 0, 1, 1).data;
|
|
|
|
if (arraysAreApproximatelyEqual(imageData, referenceData, 2)) {
|
|
testPassed(`Image eventually became ${ color }`);
|
|
resolve(imageData);
|
|
return;
|
|
}
|
|
|
|
if (previousValue && !arraysAreApproximatelyEqual(imageData, previousValue, 2)) {
|
|
testFailed(`Image changed to an unexpected value (was ${ imageData.toString() }, expected ${ color })`);
|
|
resolve(imageData);
|
|
return;
|
|
}
|
|
|
|
setTimeout(test, 1000 / frameRate);
|
|
};
|
|
|
|
test();
|
|
});
|
|
}
|
|
|
|
function colorToImageData(color)
|
|
{
|
|
let canvas = document.createElement('canvas');
|
|
canvas.width = 1;
|
|
canvas.height = 1;
|
|
let context = canvas.getContext('2d');
|
|
context.fillStyle = color;
|
|
context.fillRect(0, 0, 1, 1);
|
|
return context.getImageData(0, 0, 1, 1).data;
|
|
}
|
|
|
|
function arraysAreApproximatelyEqual(test, target, tolerance)
|
|
{
|
|
if (test.length != target.length)
|
|
return false;
|
|
|
|
for (let i = 0; i < test.length; ++i) {
|
|
if (Math.abs(test[i] - target[i]) > tolerance)
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
function endTest() {
|
|
finishJSTest();
|
|
if (window.testRunner)
|
|
testRunner.notifyDone();
|
|
}
|
|
|
|
description('Test that an mp4 media file loaded as an image can be painted in a canvas.')
|
|
|
|
loadImage("resources/animated-red-green-blue.mp4").then(image => {
|
|
testImage(image, ['red', 'green', 'blue', 'red', 'green', 'blue', 'red'], 100).then(endTest, endTest);
|
|
});
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|