Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

createImageBitmap for out of bound clipping #27040

Merged
merged 1 commit into from
Feb 4, 2021
+54 −31
Merged

createImageBitmap for out of bound clipping #27040

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 54 additions & 31 deletions html/canvas/element/manual/imagebitmap/createImageBitmap-bounds.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,64 @@
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/html/canvas/resources/canvas-tests.js"></script>
<div id="results"></div>
<script>
promise_test(function(t) {
return new Promise(function(resolve, reject) {
const image = new Image();
image.onload = function() { resolve(image); };
image.onerror = function() { reject(); };
image.src = "/images/green-16x16.png";
}).then(function(image) {
return createImageBitmap(image, 8, 8, 16, 16);
}).then(function(imageBitmap) {
const color = 204;
const color = 204;
function testClip( name, sx, sy, sw, sh, expectedColors, expectedWidth, expectedHeight ) {
promise_test(function(t) {
return new Promise(function(resolve, reject) {
const image = new Image();
image.onload = function() { resolve(image); };
image.onerror = function() { reject(); };
image.src = "/images/green-16x16.png";
}).then(function(image) {
return createImageBitmap(image, sx, sy, sw, sh);
}).then(function(imageBitmap) {

const canvas = document.createElement("canvas");
canvas.width = 16;
canvas.height = 16;
assert_equals(imageBitmap.width, expectedWidth);
assert_equals(imageBitmap.height, expectedHeight);

// debug
document.body.appendChild(canvas);
canvas.setAttribute("style", "width: 100px; height: 100px;");
const canvas = document.createElement("canvas");
canvas.width = 16;
canvas.height = 16;

const ctx = canvas.getContext("2d");
ctx.fillStyle = `rgb(${color}, ${color}, ${color})`;
ctx.fillRect(0, 0, 20, 20);
ctx.drawImage(imageBitmap, 0, 0);
// debug
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this useful for those viewing the test? If so, maybe make that more explicit.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That was actually there in the previous version.
I only made the canvases all fit in the same container (otherwise new ones would have been after test results).
Not sure how useful it is, nor how to make that more explicit, any suggestion?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe "Show canvas for those running the tests manually." but feel free to disregard given it was an existing issue.

document.getElementById("results").append(canvas);
canvas.setAttribute("style", "width: 100px; height: 100px;");

const expected = [
[ 4, 4, 0,255,0,255],
[12, 4, color,color,color,255],
[ 4, 12, color,color,color,255],
[12, 12, color,color,color,255],
];
for (let [x, y, r, g, b, a] of expected) {
_assertPixel(canvas, x,y, r,g,b,a, `${x},${y}`, `${r},${g},${b},${a}`);
}
const ctx = canvas.getContext("2d");
ctx.fillStyle = `rgb(${color}, ${color}, ${color})`;
ctx.fillRect(0, 0, 20, 20);
ctx.drawImage(imageBitmap, 0, 0);

});
});
for (let [x, y, r, g, b, a] of expectedColors) {
_assertPixel(canvas, x,y, r,g,b,a, `${x},${y}`, `${r},${g},${b},${a}`);
}
});
}, name);
}
testClip( "simple clip inside",
8, 8, 8, 8, [
[ 4, 4, 0,255,0,255], [12, 4, color,color,color,255],
[ 4, 12, color,color,color,255], [12, 12, color,color,color,255]
], 8, 8
);
testClip( "clip outside negative",
-8, -8, 16, 16, [
[ 4, 4, color,color,color,255], [12, 4, color,color,color,255],
[ 4, 12, color,color,color,255], [12, 12, 0,255,0,255]
], 16, 16
);
testClip( "clip outside positive",
8, 8, 16, 16, [
[ 4, 4, 0,255,0,255], [12, 4, color,color,color,255],
[ 4, 12, color,color,color,255], [12, 12, color,color,color,255]
], 16, 16
);
testClip( "clip inside using negative width and height",
24, 24, -16, -16, [
[ 4, 4, 0,255,0,255], [12, 4, color,color,color,255],
[ 4, 12, color,color,color,255], [12, 12, color,color,color,255]
], 16, 16
);
</script>