New issue
Advanced search Search tips

Issue 626097 link

Starred by 2 users

Issue metadata

Status: Fixed
Owner:
Closed: Sep 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: Compat



Sign in to add a comment

clip-path property not behaving correctly in column layout

Reported by lach...@heywood.net.au, Jul 6 2016

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36

Example URL:
http://codepen.io/lachieh/pen/AXoXWb

Steps to reproduce the problem:
1. create a container with css3 columns
2. add an absolute positioned element inside a relative position column item
3. clip that abspos element using clip-path: polygon()

What is the expected behavior?
each column item should show the abspos clipped element relative to itself.

What went wrong?
only the first column is displaying the clipped elements. This does not happen on firefox because FF doesn't support clip-path polygons. It behaves correctly on Safari.

Does it occur on multiple sites: No

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes 

Chrome version: 51.0.2704.106  Channel: stable
OS Version: OS X 10.11.5
Flash Version: Shockwave Flash 22.0 r0
 

Comment 1 Deleted

Possibly related to #527709 as the same issue occurs on transformed elements with an overflow:hidden parent

https://bugs.chromium.org/p/chromium/issues/detail?id=527709
Components: Blink
Components: -Blink Blink>Layout Blink>Paint

Comment 5 by f...@opera.com, Jul 7 2016

Components: -Blink>Layout Blink>Layout>MultiCol
Labels: -OS-Mac
Status: Available (was: Unconfirmed)
Another issue that could be related is  issue 530074 .
Project Member

Comment 6 by bugdroid1@chromium.org, Sep 1 2016

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

commit 422862958695797596356c0bb1d6f0e964f9ee83
Author: fs <fs@opera.com>
Date: Thu Sep 01 21:54:27 2016

Use LayoutSVGResourceClipper::resourceBoundingBox() in ClipPathClipper

Use the reference box to compute the clip-path bounds in ClipPathClipper,
using the resourceBoundingBox() method from LayoutSVGResourceClipper. This
should give reasonably tight-fitting bounds for the clip-as-mask code-path
which uses these bounds. It also means one less item to pass around.

This means that the clip-path code in PaintLayerPainter no longer needs
the |rootRelativeBounds| and associated bool, so that code can be pushed
down into FilterPainter with additional plumbing simplifications.

Also straighten out the code-flow in ClipPathClipper for less indented,
and hopefully easier to follow, code.

BUG= 633028 ,  626097 
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2

Review-Url: https://codereview.chromium.org/2279823002
Cr-Commit-Position: refs/heads/master@{#416073}

[modify] https://crrev.com/422862958695797596356c0bb1d6f0e964f9ee83/third_party/WebKit/Source/core/layout/svg/LayoutSVGResourceClipper.cpp
[modify] https://crrev.com/422862958695797596356c0bb1d6f0e964f9ee83/third_party/WebKit/Source/core/layout/svg/LayoutSVGResourceClipper.h
[modify] https://crrev.com/422862958695797596356c0bb1d6f0e964f9ee83/third_party/WebKit/Source/core/layout/svg/SVGLayoutSupport.cpp
[modify] https://crrev.com/422862958695797596356c0bb1d6f0e964f9ee83/third_party/WebKit/Source/core/layout/svg/SVGLayoutTreeAsText.cpp
[modify] https://crrev.com/422862958695797596356c0bb1d6f0e964f9ee83/third_party/WebKit/Source/core/paint/ClipPathClipper.cpp
[modify] https://crrev.com/422862958695797596356c0bb1d6f0e964f9ee83/third_party/WebKit/Source/core/paint/ClipPathClipper.h
[modify] https://crrev.com/422862958695797596356c0bb1d6f0e964f9ee83/third_party/WebKit/Source/core/paint/FilterPainter.cpp
[modify] https://crrev.com/422862958695797596356c0bb1d6f0e964f9ee83/third_party/WebKit/Source/core/paint/FilterPainter.h
[modify] https://crrev.com/422862958695797596356c0bb1d6f0e964f9ee83/third_party/WebKit/Source/core/paint/PaintLayerPainter.cpp

Project Member

Comment 7 by bugdroid1@chromium.org, Sep 3 2016

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

commit a73f1b21656e5e08eaca11b038770d166fc3fcd7
Author: fs <fs@opera.com>
Date: Sat Sep 03 08:05:48 2016

Compute better reference/visual boxes for clip-path in columns

clip-path's are applied before fragmentation, which means that we need
to adjust the coordinate space for the clip-path and its reference box
"manually" to get the correct visual coordinate space.

Also fix the origin used for clip-path to be the top-left corner of the
reference box. This only applies when SVG <clipPath> elements with
clipPathUnits='userSpaceOnUse' is referenced.

BUG= 626097 
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2

Review-Url: https://codereview.chromium.org/2300383002
Cr-Commit-Position: refs/heads/master@{#416451}

[add] https://crrev.com/a73f1b21656e5e08eaca11b038770d166fc3fcd7/third_party/WebKit/LayoutTests/css3/masking/clip-path-columns-shape-expected.html
[add] https://crrev.com/a73f1b21656e5e08eaca11b038770d166fc3fcd7/third_party/WebKit/LayoutTests/css3/masking/clip-path-columns-shape.html
[add] https://crrev.com/a73f1b21656e5e08eaca11b038770d166fc3fcd7/third_party/WebKit/LayoutTests/css3/masking/clip-path-columns-svg-clippath-usou-expected.html
[add] https://crrev.com/a73f1b21656e5e08eaca11b038770d166fc3fcd7/third_party/WebKit/LayoutTests/css3/masking/clip-path-columns-svg-clippath-usou.html
[modify] https://crrev.com/a73f1b21656e5e08eaca11b038770d166fc3fcd7/third_party/WebKit/Source/core/paint/PaintLayer.cpp
[modify] https://crrev.com/a73f1b21656e5e08eaca11b038770d166fc3fcd7/third_party/WebKit/Source/core/paint/PaintLayerPainter.cpp

Comment 8 by f...@opera.com, Sep 5 2016

Owner: f...@opera.com
Status: Fixed (was: Available)

Sign in to add a comment