mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Auto merge of #15929 - n0max:canvas_drawimage_crop_fix, r=nox
Fix crop_area_bytes_length calculation and add tests <!-- Please describe your changes on the following line: --> - Fix crop_area_bytes_length calculation (the height was multiplied by itself) - Add tests for this error and for the case that the width is multiplied by itself --- <!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: --> - [X] `./mach build -d` does not report any errors - [X] `./mach test-tidy` does not report any errors - [X] These changes fix #15386 <!-- Either: --> - [X] There are tests for these changes <!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. --> <!-- Reviewable:start --> --- This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/15929) <!-- Reviewable:end -->
This commit is contained in:
commit
594a679002
8 changed files with 185 additions and 1 deletions
|
@ -746,7 +746,7 @@ fn crop_image(image_data: Vec<u8>,
|
|||
// (consecutive elements in a pixel row of the image are contiguous in memory)
|
||||
let stride = image_size.width * 4;
|
||||
let image_bytes_length = image_size.height * image_size.width * 4;
|
||||
let crop_area_bytes_length = crop_rect.size.height * crop_rect.size.height * 4;
|
||||
let crop_area_bytes_length = crop_rect.size.height * crop_rect.size.width * 4;
|
||||
// If the image size is less or equal than the crop area we do nothing
|
||||
if image_bytes_length <= crop_area_bytes_length {
|
||||
return image_data;
|
||||
|
|
|
@ -6033,6 +6033,30 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_14.html": [
|
||||
[
|
||||
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_14.html",
|
||||
[
|
||||
[
|
||||
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_14_ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_15.html": [
|
||||
[
|
||||
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_15.html",
|
||||
[
|
||||
[
|
||||
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_15_ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2.html": [
|
||||
[
|
||||
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2.html",
|
||||
|
@ -12845,6 +12869,16 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"2dcontext/2x4.png": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"2dcontext/4x2.png": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"2dcontext/best-practices/.gitkeep": [
|
||||
[
|
||||
{}
|
||||
|
@ -13295,6 +13329,16 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_14_ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_15_ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1_ref.html": [
|
||||
[
|
||||
{}
|
||||
|
@ -129763,6 +129807,14 @@
|
|||
"c67d3f646e86413722833d2308a9bfc793a916bf",
|
||||
"support"
|
||||
],
|
||||
"2dcontext/2x4.png": [
|
||||
"690bac789fecf2530b36dd889c68db3bd93ed9fd",
|
||||
"support"
|
||||
],
|
||||
"2dcontext/4x2.png": [
|
||||
"16f72935aaf97175593bcf27794506f0884f091b",
|
||||
"support"
|
||||
],
|
||||
"2dcontext/best-practices/.gitkeep": [
|
||||
"da39a3ee5e6b4b0d3255bfef95601890afd80709",
|
||||
"support"
|
||||
|
@ -130735,6 +130787,22 @@
|
|||
"30150e3530438d42704fda8b3623286658f6c724",
|
||||
"support"
|
||||
],
|
||||
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_14.html": [
|
||||
"fa83293cfbdbb67a9d5d27a20ac19ff5d9c46d07",
|
||||
"reftest"
|
||||
],
|
||||
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_14_ref.html": [
|
||||
"0feedb34e5ade7a4e58cb4eb92e2b958a06929fe",
|
||||
"support"
|
||||
],
|
||||
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_15.html": [
|
||||
"b37463cc33b46e9aba5bbe73244fd422ef38406e",
|
||||
"reftest"
|
||||
],
|
||||
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_15_ref.html": [
|
||||
"d6817ddb2ac78b524f7cc80ebd4f348aded4d89f",
|
||||
"support"
|
||||
],
|
||||
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1_ref.html": [
|
||||
"9a70c803aaf5bd8a843b18d6d16779575d4dc6f8",
|
||||
"support"
|
||||
|
|
BIN
tests/wpt/web-platform-tests/2dcontext/2x4.png
Normal file
BIN
tests/wpt/web-platform-tests/2dcontext/2x4.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.7 KiB |
BIN
tests/wpt/web-platform-tests/2dcontext/4x2.png
Normal file
BIN
tests/wpt/web-platform-tests/2dcontext/4x2.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.2 KiB |
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>Canvas test: 2d.drawImage.crop.2x4</title>
|
||||
<link rel="match" href="drawimage_html_image_14_ref.html">
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script>
|
||||
|
||||
var sourceWidth = 256;
|
||||
var sourceHeight = 512;
|
||||
var smoothingEnabled = false;
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var sourceImg = document.createElement('img');
|
||||
sourceImg.src = '../2x4.png'
|
||||
sourceImg.width = sourceWidth;
|
||||
sourceImg.height = sourceHeight;
|
||||
|
||||
sourceImg.onload = function() {
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.imageSmoothingEnabled = smoothingEnabled;
|
||||
|
||||
destCtx.drawImage(sourceImg, 64, 64, 192, 448, 0, 0, 30, 70);
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
}
|
||||
|
||||
</script>
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#destination {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
background-image: url("../2x4.png");
|
||||
background-position: -10px -10px;
|
||||
background-size: 40px 80px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
<div id="destination"></div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>Canvas test: 2d.drawImage.crop.4x2</title>
|
||||
<link rel="match" href="drawimage_html_image_15_ref.html">
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script>
|
||||
|
||||
var sourceWidth = 512;
|
||||
var sourceHeight = 256;
|
||||
var smoothingEnabled = false;
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var sourceImg = document.createElement('img');
|
||||
sourceImg.src = '../4x2.png'
|
||||
sourceImg.width = sourceWidth;
|
||||
sourceImg.height = sourceHeight;
|
||||
|
||||
sourceImg.onload = function() {
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.imageSmoothingEnabled = smoothingEnabled;
|
||||
|
||||
destCtx.drawImage(sourceImg, 64, 64, 448, 192, 0, 0, 70, 30);
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
}
|
||||
|
||||
</script>
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#destination {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
background-image: url("../4x2.png");
|
||||
background-position: -10px -10px;
|
||||
background-size: 80px 40px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
<div id="destination"></div>
|
||||
</body>
|
||||
</html>
|
Loading…
Add table
Add a link
Reference in a new issue