Project: chromium Issues People Development process History Sign in
New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 13 users
Status: Fixed
Owner:
Closed: Nov 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Compat

Blocking:
issue 530714



Sign in to add a comment
SVG clipPath animation not updating while page is active
Reported by sara.sou...@gmail.com, Jul 6 2014 Back to list
UserAgent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36

Example URL:
http://codepen.io/SaraSoueidan/full/ed748493ee430cea36eeb4d321078f5e

Steps to reproduce the problem:
1. Create an animated <clipPath> (e.g using <circle ...> <animate ..> </circle>)
2. apply the clip path to an HTML image using the CSS `clip-path` property
3. Watch animation (it's frozen).
4. Switch tabs (so that page is inactive) then come back to demo page.

What is the expected behavior?
The animated clipPath should not be frozen. It should animate normally while the page is active.

What went wrong?
The clipPath animation is frozen at one point while the page is active. If you switch to another page and then come back, you see the clipPath updated as if it were animating normally in the background while the page was inactive.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes 

Chrome version: 35.0.1916.153  Channel: stable
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: Shockwave Flash 14.0 r0

The attached GIF shows how the bug is doing on Chrome Canary (Same applied for Chrome 35 stable) on Windows.
 
clippath-animation-bug.gif
1.6 MB View Download
Comment 1 by a...@chromium.org, Jul 7 2014
Cc: f...@opera.com
Labels: Needs-Feedback
fs@opera.com:Could you please confirm if this is the same as  Issue 391291 
Hi,

Yes I can confirm. It's definitely not the same. I'm familiar with Issue
391291 (I asked Vincent to file that one after making sure we both had the
same problem back then). It's a different one. I only have one clipPath
applied on the page, and the clipPath works except that it just doesn't
update while the page is active. It seems to be a repaint problem when the
page is active. :)
Comment 3 by f...@opera.com, Jul 7 2014
Labels: -OS-Windows -Needs-Feedback OS-All
Status: Available
Different issue, yes. Looks like the RenderLayer isn't notified on changes to the clip-path.

Attaching smaller TC.
clip-path-animated.html
691 bytes View Download
Comment 4 by f...@opera.com, Jul 7 2014
The same problem is also visible when mutating the clipPath sans animation.
clip-path-mutated.html
717 bytes View Download
Able to reproduce on Chrome35.0.1916.153 stable and chrome38.0.2082.0 canary channels.


Labels: Needs-Bisect
Cc: pdr@chromium.org ojan@chromium.org rponnada@chromium.org sfirsov@chromium.org
Labels: -Needs-Bisect M-38 Cr-Blink-Rendering
Able to repro this issue on Windows7 using: 38.0.2084.0 canary. 

1. Opened attached html file in comment4# - Red colored rectangle with Green colored circle at the middle is displayed
2. Change the tab and come back - Complete Green colored rectangle is displayed. 

This is non-regression issue, same behavior is observed from M26

This is working fine in Firefox.
Comment 8 by tkent@chromium.org, Jul 8 2014
Labels: Cr-Blink-SVG
Looks like non-SVG clip-path clients never register with the SVG resource cache (don't call SVGResourcesCache::{clientWasAddedToTree,clientStyleChanged}) -> they don't get invalidated on clip-path changes.

As I am seeing SVGResourcesCache::{clientWasAddedToTree,clientStyleChanged are intended for SVG clients only.Even If we call them for non-SVG clip-path clients, it will assert.

Actual issue could be , it is not getting invalided for repaint.
Any one give any pointers for this issue, I could investigate this issue further.
Thanks
Comment 11 by f...@opera.com, Jul 25 2014
I think some relevant places to look at are RenderSVGResourceContainer::addClientRenderLayer and how it's used to achieve the same for the 'filter' property (on HTML, see RenderLayerFilterInfo I think).
Thank you for the hint. I am working on this issue.
I am planning to introduce a new file similar to RenderLayerFilterInfo.
name like RenderLayerClipPathInfo and implement the needed. (Adding the Renderlayer to RenderSVGResourceContainer)
Can I go ahead with this approach ? Or anyone having any suggestions ? It will really helpful.

I have tried that and seeing clip path animation is working after this.

Submitted a patch. Could you review it please.

https://codereview.chromium.org/423823004/

Comment 15 by ojan@chromium.org, Oct 16 2014
Cc: -ojan@chromium.org
Labels: -Cr-Blink-Rendering Cr-Blink-Layout
Migrate from Cr-Blink-Rendering to Cr-Blink-Layout
Comment 17 by f...@opera.com, Jan 22 2015
 Issue 450256  has been merged into this issue.
I would love to use this feature in SVG animations. There is a lot of graphic possibility here that's being held back for lack of support. Has there been any off-thread review of the patch in #14? Thanks for revisiting this.
Blocking: chromium:530714
Comment 20 by f...@opera.com, Apr 14 2016
 Issue 603487  has been merged into this issue.
Comment 21 by pdr@chromium.org, Jun 24 2016
 Issue 621600  has been merged into this issue.
Comment 22 by pdr@chromium.org, Jun 24 2016
Attaching the testcase from 621600.
clipbug.html
644 bytes View Download
would love to see this sorted out, is there any hope?
Labels: Hotlist-Fixit
Comment 25 by f...@opera.com, Nov 8 2016
Owner: f...@opera.com
Status: Assigned
Assuming my new proxy construct sticks, this ought to be fairly easy to fix.
Project Member Comment 26 by bugdroid1@chromium.org, Nov 15 2016
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f

commit ad7c7f0de20e3ad160f063f1990c69ce97f7e16f
Author: fs <fs@opera.com>
Date: Tue Nov 15 16:35:37 2016

Use an SVGElementProxy in ReferenceClipPathOperation

This transforms ReferenceClipPathOperation into using the SVGElementProxy
mechanism. Currently only for PaintLayer clients.

PaintLayerFilterInfo is generalized to PaintLayerResourceInfo and used as
the proxy/resource client for the 'clip-path' property. This enables change
notifications to flow back to the PaintLayer from the <clipPath> subtree.

The SVGElementProxySet is made a little bit generic by moving it to
SVGElementRareData, however it's still only made available for the few element
types that are used with it.

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

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

[add] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/LayoutTests/css3/masking/clip-path-reference-mutated-expected.html
[add] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/LayoutTests/css3/masking/clip-path-reference-mutated.html
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/css/resolver/StyleBuilderConverter.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/layout/LayoutBoxModelObject.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/layout/svg/LayoutSVGResourceContainer.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/layout/svg/LayoutSVGResourceContainer.h
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/layout/svg/LayoutSVGResourceFilter.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/layout/svg/LayoutSVGResourceFilter.h
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/paint/BUILD.gn
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/paint/ClipPathClipper.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/paint/FilterPainter.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/paint/PaintLayer.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/paint/PaintLayer.h
[rename] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/paint/PaintLayerResourceInfo.cpp
[rename] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/paint/PaintLayerResourceInfo.h
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/style/BUILD.gn
[add] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/style/ClipPathOperation.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/style/ClipPathOperation.h
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/svg/SVGElement.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/svg/SVGElement.h
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/svg/SVGElementProxy.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/svg/SVGElementProxy.h
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/svg/SVGElementRareData.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/svg/SVGElementRareData.h
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/svg/SVGFilterElement.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/svg/SVGFilterElement.h

Comment 27 by f...@opera.com, Nov 16 2016
Status: Fixed
Sign in to add a comment