New issue
Advanced search Search tips

Issue 734116 link

Starred by 5 users

Issue metadata

Status: Fixed
Owner:
Closed: Jul 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Android , Windows , Chrome , Mac
Pri: 2
Type: Bug-Regression



Sign in to add a comment

Clipping of non-PaintLayer children under filter does not apply

Reported by srt19...@gmail.com, Jun 16 2017

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.86 Safari/537.36

Steps to reproduce the problem:
See https://jsfiddle.net/HRsvX/172/

What is the expected behavior?
With "overflow:hidden" on the <svg> element, the grain filter should be clipped to the svg element.

What went wrong?
The grain filter is visible past the SVG element boundaries.  This seems to also break other SVG functionality, e.g., an <image> element within the <svg> will also start to extend past the boundaries once the filter is in place.

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 59.0.3071.86  Channel: n/a
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: Shockwave Flash 25.0 r0

Caused by setting x="-20%" y="-20%" width="120%" height="120%" on the filter.
 
Labels: BugSource-User PaintTeamTriaged-20170616 OS-Android OS-Chrome OS-Linux OS-Mac
Status: Available (was: Unconfirmed)
If the <div> has overflow hidden we do clip the filter. Odd bug.

Comment 2 by srt19...@gmail.com, Jun 16 2017

Oh, sorry yes, I meant to note that.  

I've tried this in Firefox and they have a different bug :-)

Comment 3 by pdr@chromium.org, Jun 16 2017

Labels: Needs-Bisect
We've changed this code recently. I wonder if it is a regression.

Testers, can you please use the following url:
http://output.jsbin.com/xohepu/quiet
I'll bisect. Note that test team will not bisect promptly unless it's a P1 regression.
Cc: pdr@chromium.org f...@opera.com
Labels: -Type-Bug Type-Bug-Regression
Owner: chrishtr@chromium.org
Status: Assigned (was: Available)
Good call pdr@.

CHANGELOG URL:
  https://chromium.googlesource.com/chromium/src/+log/d2122a68e4106aabcde2b9a4ac766350ed68de2c..1459bd0dc4107bcde17077387bd5705097d51c44

of which

https://chromium.googlesource.com/chromium/src/+/9dde8ce672f222dc77bd460ac703a2bef6910bc7

Over to chrishtr@.
Labels: -Needs-Bisect
Labels: ReleaseBlock-Stable M-60
Just to update the issue,
Still able to reproduce the issue on Mac 10.12.5 using latest canary #61.0.3148.0.

chrishtr@ - Gentle ping...!!
Could you please have a look into the issue.

Thanks...!!
Still able to reproduce the issue on Mac 10.12.5 using latest chrome version 61.0.3153.0

@chrishtr :  Could you please look into this issue as it has been marked as a stable blocker.

Thanks!

Status: WontFix (was: Assigned)
The filter on an element is outside of its overflow clip. I fixed that in the
commit mentioned in comment 5. Other browsers have the same behavior.

Comment 11 by srt19...@gmail.com, Jul 10 2017

I understand the comment about the filter being outside the overflow clip of the underlying element (although I don't necessarily agree :-) but this bug also causes the element itself to overflow improperly, e.g., if the element includes an image, the image is not clipped properly once the filter is in place.

https://jsfiddle.net/wnyb68fb/


Status: Assigned (was: WontFix)
Ah yes, that is true. The old behavior was also broken, because the
turbulence filter should extend beyond the bounds of the SVG.
Summary: Clipping of non-PaintLayer children under filter does not apply (was: SVG element doesn't properly implement overflow: hidden)
The content is not clipped because PaintLayerPaintingInfo::clip_to_dirty_rect
is set to false when painting under a filter.

This behavior can be traced back to the following commit in 2012:

https://chromium.googlesource.com/chromium/src/+/a324bf22e2473ecb2a95f408dd7b246c74bcfdd5

The aim of that commit was to not clip to the dirty rect. This is because filters
which move pixels may map source pixels which are outside of the dirty rect into
pixels which are inside.

However, either a side-effect or a subsequently introduced bug resulting from that change
is that no overflow/css/control clips are applied to the foreground painting phase of
non-positioned children. This is incorrect.

The code needs to be changed to omit the dirty rect from the clip, but include other
clips.
Labels: -M-60 M-61
Labels: -ReleaseBlock-Stable
Project Member

Comment 16 by bugdroid1@chromium.org, Jul 14 2017

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

commit efa4c64c5f765c79a32f55fc4106687fbcda0645
Author: Chris Harrelson <chrishtr@chromium.org>
Date: Fri Jul 14 23:45:49 2017

Apply non-dirty-rect clips to content under filter.

Previously, we omitted these clips, as an inadvertent side-effect
of avoiding clipping to the dirty rect.

Bug:  734116 
Change-Id: I6dcd92b80b8158f36689d5b48d92a0bdf43bb016
Reviewed-on: https://chromium-review.googlesource.com/567520
Commit-Queue: Chris Harrelson <chrishtr@chromium.org>
Reviewed-by: Philip Rogers <pdr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#486944}
[modify] https://crrev.com/efa4c64c5f765c79a32f55fc4106687fbcda0645/third_party/WebKit/LayoutTests/fast/clip/css-clip-filter-order-expected.html
[add] https://crrev.com/efa4c64c5f765c79a32f55fc4106687fbcda0645/third_party/WebKit/LayoutTests/paint/filters/clip-under-filter-expected.png
[add] https://crrev.com/efa4c64c5f765c79a32f55fc4106687fbcda0645/third_party/WebKit/LayoutTests/paint/filters/clip-under-filter-expected.txt
[add] https://crrev.com/efa4c64c5f765c79a32f55fc4106687fbcda0645/third_party/WebKit/LayoutTests/paint/filters/clip-under-filter.html
[add] https://crrev.com/efa4c64c5f765c79a32f55fc4106687fbcda0645/third_party/WebKit/LayoutTests/platform/linux/paint/filters/clip-under-filter-expected.png
[add] https://crrev.com/efa4c64c5f765c79a32f55fc4106687fbcda0645/third_party/WebKit/LayoutTests/platform/mac/paint/filters/clip-under-filter-expected.txt
[add] https://crrev.com/efa4c64c5f765c79a32f55fc4106687fbcda0645/third_party/WebKit/LayoutTests/platform/win/paint/filters/clip-under-filter-expected.png
[modify] https://crrev.com/efa4c64c5f765c79a32f55fc4106687fbcda0645/third_party/WebKit/Source/core/paint/FilterPainter.cpp
[modify] https://crrev.com/efa4c64c5f765c79a32f55fc4106687fbcda0645/third_party/WebKit/Source/core/paint/FilterPainter.h
[modify] https://crrev.com/efa4c64c5f765c79a32f55fc4106687fbcda0645/third_party/WebKit/Source/core/paint/PaintLayerClipper.cpp
[modify] https://crrev.com/efa4c64c5f765c79a32f55fc4106687fbcda0645/third_party/WebKit/Source/core/paint/PaintLayerClipperTest.cpp
[modify] https://crrev.com/efa4c64c5f765c79a32f55fc4106687fbcda0645/third_party/WebKit/Source/core/paint/PaintLayerPainter.cpp
[modify] https://crrev.com/efa4c64c5f765c79a32f55fc4106687fbcda0645/third_party/WebKit/Source/core/paint/PaintLayerPainter.h
[modify] https://crrev.com/efa4c64c5f765c79a32f55fc4106687fbcda0645/third_party/WebKit/Source/core/paint/PaintLayerPaintingInfo.h

Status: Fixed (was: Assigned)
Project Member

Comment 18 by bugdroid1@chromium.org, Jul 28 2017

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

commit 21cfe2d238708828554124c8a6f98895e3f39577
Author: Tien-Ren Chen <trchen@chromium.org>
Date: Fri Jul 28 01:58:10 2017

[Blink] Restore CSS clip and filter application order

There was a previous bug [1] that prevented overflow clip from being
applied in the presence of a filter on the same element. The CL [2]
fixed the overflow/filter interaction but inadvertently changed
clip/filter interaction:

Buggy behavior prior to [2]:
output <-- clip/clip-path/mask <-- filter <-- children

Buggy behavior after [2]:
output <-- clip/clip-path/mask <-- filter <-- clip <-- overflow <-- children

This CL restores clip/filter interaction so that they will be applied
in the following order:
output <-- clip/clip-path/mask <-- filter <-- overflow <-- children

[1]  https://crbug.com/734116 
[2] https://chromium-review.googlesource.com/c/567520

BUG= 734116 , 747511 

Cq-Include-Trybots: master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2
Change-Id: I1b2e1441de89fd486f50bba10c8a20108d557dc2
Reviewed-on: https://chromium-review.googlesource.com/588137
Reviewed-by: Chris Harrelson <chrishtr@chromium.org>
Commit-Queue: Tien-Ren Chen <trchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#490201}
[modify] https://crrev.com/21cfe2d238708828554124c8a6f98895e3f39577/third_party/WebKit/LayoutTests/FlagExpectations/enable-slimming-paint-v2
[modify] https://crrev.com/21cfe2d238708828554124c8a6f98895e3f39577/third_party/WebKit/LayoutTests/fast/clip/css-clip-filter-order-expected.html
[add] https://crrev.com/21cfe2d238708828554124c8a6f98895e3f39577/third_party/WebKit/LayoutTests/paint/filters/clip-filter-overflow-clip-expected.html
[add] https://crrev.com/21cfe2d238708828554124c8a6f98895e3f39577/third_party/WebKit/LayoutTests/paint/filters/clip-filter-overflow-clip.html
[add] https://crrev.com/21cfe2d238708828554124c8a6f98895e3f39577/third_party/WebKit/LayoutTests/paint/filters/clip-under-filter-2-expected.html
[add] https://crrev.com/21cfe2d238708828554124c8a6f98895e3f39577/third_party/WebKit/LayoutTests/paint/filters/clip-under-filter-2.html
[modify] https://crrev.com/21cfe2d238708828554124c8a6f98895e3f39577/third_party/WebKit/LayoutTests/paint/filters/clip-under-filter-expected.png
[modify] https://crrev.com/21cfe2d238708828554124c8a6f98895e3f39577/third_party/WebKit/Source/core/paint/PaintLayerClipper.cpp
[modify] https://crrev.com/21cfe2d238708828554124c8a6f98895e3f39577/third_party/WebKit/Source/core/paint/PaintLayerClipperTest.cpp
[modify] https://crrev.com/21cfe2d238708828554124c8a6f98895e3f39577/third_party/WebKit/Source/core/paint/PaintLayerPainter.cpp

Comment 19 by phistuck@gmail.com, Jul 28 2017

Does this also fix  issue 430867 ?
Cc: chrishtr@chromium.org
 Issue 430867  has been merged into this issue.
Project Member

Comment 21 by bugdroid1@chromium.org, Jul 31 2017

Labels: merge-merged-3163
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/9f6679fa0478c177d446ec6679e3135f5eaef352

commit 9f6679fa0478c177d446ec6679e3135f5eaef352
Author: Tien-Ren Chen <trchen@chromium.org>
Date: Mon Jul 31 22:03:46 2017

[Blink] Restore CSS clip and filter application order

There was a previous bug [1] that prevented overflow clip from being
applied in the presence of a filter on the same element. The CL [2]
fixed the overflow/filter interaction but inadvertently changed
clip/filter interaction:

Buggy behavior prior to [2]:
output <-- clip/clip-path/mask <-- filter <-- children

Buggy behavior after [2]:
output <-- clip/clip-path/mask <-- filter <-- clip <-- overflow <-- children

This CL restores clip/filter interaction so that they will be applied
in the following order:
output <-- clip/clip-path/mask <-- filter <-- overflow <-- children

[1]  https://crbug.com/734116 
[2] https://chromium-review.googlesource.com/c/567520

BUG= 734116 , 747511 
TBR=trchen@chromium.org

(cherry picked from commit 21cfe2d238708828554124c8a6f98895e3f39577)

Cq-Include-Trybots: master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2
Change-Id: I1b2e1441de89fd486f50bba10c8a20108d557dc2
Reviewed-on: https://chromium-review.googlesource.com/588137
Reviewed-by: Chris Harrelson <chrishtr@chromium.org>
Commit-Queue: Tien-Ren Chen <trchen@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#490201}
Reviewed-on: https://chromium-review.googlesource.com/595107
Reviewed-by: Tien-Ren Chen <trchen@chromium.org>
Cr-Commit-Position: refs/branch-heads/3163@{#189}
Cr-Branched-From: ff259bab28b35d242e10186cd63af7ed404fae0d-refs/heads/master@{#488528}
[modify] https://crrev.com/9f6679fa0478c177d446ec6679e3135f5eaef352/third_party/WebKit/LayoutTests/fast/clip/css-clip-filter-order-expected.html
[add] https://crrev.com/9f6679fa0478c177d446ec6679e3135f5eaef352/third_party/WebKit/LayoutTests/paint/filters/clip-filter-overflow-clip-expected.html
[add] https://crrev.com/9f6679fa0478c177d446ec6679e3135f5eaef352/third_party/WebKit/LayoutTests/paint/filters/clip-filter-overflow-clip.html
[add] https://crrev.com/9f6679fa0478c177d446ec6679e3135f5eaef352/third_party/WebKit/LayoutTests/paint/filters/clip-under-filter-2-expected.html
[add] https://crrev.com/9f6679fa0478c177d446ec6679e3135f5eaef352/third_party/WebKit/LayoutTests/paint/filters/clip-under-filter-2.html
[modify] https://crrev.com/9f6679fa0478c177d446ec6679e3135f5eaef352/third_party/WebKit/LayoutTests/paint/filters/clip-under-filter-expected.png
[modify] https://crrev.com/9f6679fa0478c177d446ec6679e3135f5eaef352/third_party/WebKit/Source/core/paint/PaintLayerClipper.cpp
[modify] https://crrev.com/9f6679fa0478c177d446ec6679e3135f5eaef352/third_party/WebKit/Source/core/paint/PaintLayerClipperTest.cpp
[modify] https://crrev.com/9f6679fa0478c177d446ec6679e3135f5eaef352/third_party/WebKit/Source/core/paint/PaintLayerPainter.cpp

Sign in to add a comment