New issue
Advanced search Search tips
Note: Color blocks (like █ or █) mean that a user may not be available. Tooltip shows the reason.

Issue 765312 link

Starred by 1 user
Status: Fixed
Owner:
█ zakerinasab@chromium.org
Last visit > 30 days ago
Closed: Sep 2017
Cc:
█ junov@chromium.org
█ xlai@chromium.org
f...@opera.com
xidac...@chromium.org
fs...@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug

Blocking:
issue 766019



Sign in to add a comment

The effect of negative sx and sy in drawImage?

Project Member Reported by zakerinasab@chromium.org, Sep 14 2017 
The web platform test wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_12.html checks the proper clipping of the image when the source sx and sy are negative (Please see the attached test).

Safari draws the image as expected in the test reference, that is, a 25x25 rect starting from 0,0.

Chromium, Firefox and Opera do not pass the test. They draw the 25x25 rect starting from 25,25.

IE and Edge do not pass the test. They do not draw the image.

The spec says: "The source rectangle is the rectangle whose corners are the four points (sx, sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh)."

So the source rectangle will be (-25, -25) -> (25, 25). The question is, should the rectangle be clipped, as Safari does, or not, as Chromium, Firefox and Opera do?
2x2.png
1.5 KB View Download
drawImageNegativeSrcXY.html
1.0 KB View Download
Chromium.png
19.0 KB View Download
Firefox.png
14.6 KB View Download
Opera.png
20.2 KB View Download
Safari.png
65.5 KB View Download
Edge.PNG
4.8 KB View Download

Comment 1 by f...@opera.com, Sep 14 2017 

The Blink/Gecko behavior appears correct to me, based on:

  "When the source rectangle is outside the source image, the source rectangle must be clipped to the source image and the destination rectangle must be clipped in the same proportion."

(The source rectangle is clipped by 25 from top and left, and the destination rectangle is adjusted proportionally so it ends up as [25, 25] -> [50, 50])

Comment 2 by zakerinasab@chromium.org, Sep 14 2017 

So to cover proportional clipping of the destination, I'll change the drawImage command to this:

destCtx.drawImage(sourceImg, -20, -20, 50, 50, 20, 20, 125, 125);

- source is clipped by 20 from top and left.
- destination will get proportionally clipped by 50 from top and left as we are scaling the source image 2.5 times.
- the rect will be drawn from 70,70 to 100,100.

Blink/Gecko pass this test.

Comment 3 by junov@chromium.org, Sep 14 2017 

So I guess the right course of action here is to add a test to WPT, and file bugs against WebKit and Edge

Comment 4 by zakerinasab@chromium.org, Sep 18 2017

Blocking: 766019

Comment 5 by zakerinasab@chromium.org, Sep 19 2017 

The bug is already filed for WebKit: https://bugs.webkit.org/show_bug.cgi?id=67652.
I filed a new bug for Edge: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/13829710/

I will close this bug when the respective layout test is updated.
Project Member

Comment 6 by bugdroid1@chromium.org, Sep 25 2017 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/4d3c601cfc71f45fe2514add64bb87254f3b2b6f

commit 4d3c601cfc71f45fe2514add64bb87254f3b2b6f
Author: Reza.Zakerinasab <zakerinasab@chromium.org>
Date: Mon Sep 25 15:18:18 2017

Refactor wpt/2dcontext/drawing-images-to-the-canvas/ layout tests:

This change refactors wpt/2dcontext/drawing-images-to-the-canvas/ layout tests:

- Merge the similar layout tests where the only difference is the color space of the source image (generic RGB vs sRGB)
- Replace reference tests with proper testharness tests
- Investigate the layout tests that are failing on Chromium

Bug:  766019 ,  765270 ,  765312 ,  763933 
Change-Id: Icd995d7c2752ea42440147cca1d1921ef3c797d9
Reviewed-on: https://chromium-review.googlesource.com/670023
Reviewed-by: Xida Chen <xidachen@chromium.org>
Commit-Queue: Mohammad Reza Zakerinasab <zakerinasab@chromium.org>
Cr-Commit-Position: refs/heads/master@{#504057}
[modify] https://crrev.com/4d3c601cfc71f45fe2514add64bb87254f3b2b6f/third_party/WebKit/LayoutTests/TestExpectations
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/2x2-srgb.png
[modify] https://crrev.com/4d3c601cfc71f45fe2514add64bb87254f3b2b6f/third_party/WebKit/LayoutTests/external/wpt/2dcontext/2x2.png
[add] https://crrev.com/4d3c601cfc71f45fe2514add64bb87254f3b2b6f/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_1.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_10.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_10_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_11.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_11_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_12.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_12_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_1_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_2.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_2_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_3.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_3_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_4.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_4_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_5.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_5_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_6.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_6_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_7.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_7_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_8.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_8_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_9.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_9_ref.html
[add] https://crrev.com/4d3c601cfc71f45fe2514add64bb87254f3b2b6f/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10_srgb.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_11.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_11_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_12.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_12_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_13.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_13_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_14.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_14_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_15.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_15_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1_srgb.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2_srgb.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3_srgb.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4_srgb.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5_srgb.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_6.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_6_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_6_srgb.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_7.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_7_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_7_srgb.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_8.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_8_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_8_srgb.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_9.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_9_ref.html
[modify] https://crrev.com/4d3c601cfc71f45fe2514add64bb87254f3b2b6f/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_svg_image_1.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_svg_image_1_ref.html
[delete] https://crrev.com/35795ad419725909b9b2d44e3da5b8cc9c895f2e/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-images-to-the-canvas/drawimage_svg_image_1_srgb.html

Comment 7 by zakerinasab@chromium.org, Sep 25 2017

Status: Fixed (was: Assigned)
►

Sign in to add a comment