gecko-dev/dom/file/tests/test_fileapi_slice_image.html

140 строки
3.8 KiB
HTML

<!DOCTYPE HTML>
<html>
<head>
<title>Test for File API + Slice</title>
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<script type="text/javascript" src="common_blob.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<p id="display">
<canvas id=canvas width=1100 height=1100 hidden moz-opaque></canvas>
<canvas id=testcanvas hidden moz-opaque></canvas>
</p>
<script type="text/javascript">
SimpleTest.waitForExplicitFinish();
SimpleTest.requestLongerTimeout(4);
// Create files containing data we'll test with. We'll want long
// strings to ensure they span multiple buffers while loading
let canvasData;
let testBinaryData;
function imageLoadHandler(event, resolve) {
let origcanvas = $("canvas");
let testcanvas = $("testcanvas");
let image = event.target;
is(image.naturalWidth, origcanvas.width, "width correct");
is(image.naturalHeight, origcanvas.height, "height correct");
testcanvas.width = origcanvas.width;
testcanvas.height = origcanvas.height;
testcanvas.getContext("2d").drawImage(image, 0, 0);
// Do not use |is(testcanvas.toDataURL("image/png"), origcanvas.toDataURL("image/png"), "...");| that results in a _very_ long line.
let origDataURL = origcanvas.toDataURL("image/png");
let testDataURL = testcanvas.toDataURL("image/png");
is(testDataURL.length, origDataURL.length,
"Length of correct image data");
ok(testDataURL == origDataURL,
"Content of correct image data");
resolve();
}
createCanvasURL()
.then(data => {
for (var i = 0; i < 256; i++) {
testBinaryData += String.fromCharCode(i);
}
while (testBinaryData.length < 20000) {
testBinaryData += testBinaryData;
}
canvasData = data;
})
// image in the middle
.then(() => {
return createFile(testBinaryData + canvasData + testBinaryData, "middleTestFile");
})
// image in the middle - loader
.then(file => {
return new Promise(resolve => {
is(file.size, canvasData.length + testBinaryData.length * 2, "correct file size (middle)");
var img = new Image();
img.src = URL.createObjectURL(file.slice(testBinaryData.length,
testBinaryData.length + canvasData.length));
img.onload = event => {
imageLoadHandler(event, resolve);
}
});
})
// image at start
.then(() => {
return createFile(canvasData + testBinaryData, "startTestFile");
})
// image at start - loader
.then(file => {
return new Promise(resolve => {
is(file.size, canvasData.length + testBinaryData.length, "correct file size (start)");
var img = new Image();
img.src = URL.createObjectURL(file.slice(0, canvasData.length));
img.onload = event => {
imageLoadHandler(event, resolve);
}
});
})
// image at end
.then(() => {
return createFile(testBinaryData + canvasData, "endTestFile");
})
// image at end - loader
.then(file => {
return new Promise(resolve => {
is(file.size, canvasData.length + testBinaryData.length, "correct file size (end)");
var img = new Image();
img.src = URL.createObjectURL(file.slice(testBinaryData.length,
testBinaryData.length + canvasData.length));
img.onload = event => {
imageLoadHandler(event, resolve);
}
});
})
// image past end
.then(() => {
return createFile(testBinaryData + canvasData, "pastEndTestFile");
})
// image past end - loader
.then(file => {
return new Promise(resolve => {
is(file.size, canvasData.length + testBinaryData.length, "correct file size (end)");
var img = new Image();
img.src = URL.createObjectURL(file.slice(testBinaryData.length,
testBinaryData.length + canvasData.length + 1000));
img.onload = event => {
imageLoadHandler(event, resolve);
}
});
})
.then(SimpleTest.finish);
</script>
</body>
</html>