Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS animations in SVG do not repaint when SVG is zoomed #9138

Conversation

Ahmad-S792
Copy link
Contributor

@Ahmad-S792 Ahmad-S792 commented Jan 25, 2023

CSS animations in SVG do not repaint when SVG is zoomed
https://bugs.webkit.org/show_bug.cgi?id=199364
rdar://problem/52459928

Reviewed by NOBODY (OOPS!).

Partial Merge - https://src.chromium.org/viewvc/blink?view=revision&revision=174874

This patch changes the coordinate system used by RenderImage for invalidation
rects to account for zoom. When an SVG image issues invalidations to its
ImageResource clients, the invalidation rect does not contain zoom. This is
due to how SVG images work internally: images are laid out without zoom so
that relative sizes are resolved correctly; as a result the invalidation
rects do not include zoom. This patch simply removes the zoom from the image
size in RenderImage::repaintOrMarkForLayout and clarifies the comment.

This change should not affect bitmap image invalidation because bitmaps (even
animated gifs) do not use invalidation rects.

From local build testing, I have verified that this does indeed fix an issue
described on test case from the bug.

* Source/WebCore/rendering/RenderImage.cpp:
(RenderImage::repaintOrMarkForLayout): Update Comment and simplify logic
to remove for 'zoom' factor
* LayoutTests/svg/repaint/resources/animate-center.svg: Add Test Case Resource
* LayoutTests/svg/repaint/image-animation-with-zoom.html: Add Test Case
* LayoutTests/svg/repaint/image-animation-with-zoom-expected.txt: Add Test Case Expectation

84bc61d

Misc iOS, tvOS & watchOS macOS Linux Windows
βœ… πŸ§ͺ style βœ… πŸ›  ios βœ… πŸ›  mac βœ… πŸ›  wpe βœ… πŸ›  πŸ§ͺ win
βœ… πŸ§ͺ bindings βœ… πŸ›  ios-sim βœ… πŸ›  mac-AS-debug βœ… πŸ›  gtk βœ… πŸ›  wincairo
βœ… πŸ§ͺ webkitperl βœ… πŸ§ͺ ios-wk2 βœ… πŸ§ͺ api-mac βœ… πŸ§ͺ gtk-wk2
βœ… πŸ§ͺ api-ios βœ… πŸ§ͺ mac-wk1 βœ… πŸ§ͺ api-gtk
βœ… πŸ›  tv βœ… πŸ§ͺ mac-wk2
βœ… πŸ›  tv-sim βœ… πŸ§ͺ mac-AS-debug-wk2
βœ… πŸ›  watch βœ… πŸ§ͺ mac-wk2-stress
βœ… πŸ›  watch-sim

@Ahmad-S792 Ahmad-S792 added the SVG For bugs in the SVG implementation. label Jan 25, 2023
@Ahmad-S792 Ahmad-S792 self-assigned this Jan 25, 2023
@Ahmad-S792
Copy link
Contributor Author

NOTE - I didn't took the test case from Blink patch because in PR4727, @shallawa mentioned that this will lead to flaky issue due to timeout of 220. Although, in previous attempt, @shallawa did local testing and the patch was not fixing the issue but upon later local testing, I verified that this does fix the issue and it might be due to removing CSS border-width zoom quirk in this commit. Hence, I thought to do PR again after local testing without test-case.

@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Jan 26, 2023
@Ahmad-S792
Copy link
Contributor Author

NOTE - 'windows' build failure error seems to suggest 'JavaScriptCoreSharedScripts.rule' exited with code 1.', so nothing seems to suggest that this could be because of this change.

@Ahmad-S792 Ahmad-S792 force-pushed the fix199364-svg-render-image-css-animation-fix branch from d1e0959 to 024ce43 Compare January 26, 2023 01:10
@Ahmad-S792 Ahmad-S792 added Images For bugs in image handling. and removed merging-blocked Applied to prevent a change from being merged SVG For bugs in the SVG implementation. labels Jan 26, 2023
@Ahmad-S792 Ahmad-S792 added the request-merge-queue Request a pull request to be added to merge-queue once ready label Jan 27, 2023
CSS animations in SVG do not repaint when SVG is zoomed
https://bugs.webkit.org/show_bug.cgi?id=199364
rdar://problem/52459928

Reviewed by NOBODY (OOPS!).

Partial Merge - https://src.chromium.org/viewvc/blink?view=revision&revision=174874

This patch changes the coordinate system used by RenderImage for invalidation
rects to account for zoom. When an SVG image issues invalidations to its
ImageResource clients, the invalidation rect does not contain zoom. This is
due to how SVG images work internally: images are laid out without zoom so
that relative sizes are resolved correctly; as a result the invalidation
rects do not include zoom. This patch simply removes the zoom from the image
size in RenderImage::repaintOrMarkForLayout and clarifies the comment.

This change should not affect bitmap image invalidation because bitmaps (even
animated gifs) do not use invalidation rects.

From local build testing, I have verified that this does indeed fix an issue
described on test case from the bug.

* Source/WebCore/rendering/RenderImage.cpp:
(RenderImage::repaintOrMarkForLayout): Update Comment and simplify logic
to remove for 'zoom' factor
* LayoutTests/svg/repaint/resources/animate-center.svg: Add Test Case Resource
* LayoutTests/svg/repaint/image-animation-with-zoom.html: Add Test Case
* LayoutTests/svg/repaint/image-animation-with-zoom-expected.txt: Add Test Case Expectation
@Ahmad-S792 Ahmad-S792 force-pushed the fix199364-svg-render-image-css-animation-fix branch from 024ce43 to 84bc61d Compare January 30, 2023 18:00
@Ahmad-S792
Copy link
Contributor Author

@smfr - I took test from Chromium patch and tried to apply two tricks to make it less flaky fo future: 1) Small Size of Image 2) Shorter set-timeout. Can you have suggest any other?

@Ahmad-S792
Copy link
Contributor Author

@smfr - I took test from Chromium patch and tried to apply two tricks to make it less flaky fo future: 1) Small Size of Image 2) Shorter set-timeout. Can you have suggest any other?

@smfr - Any suggestion / help? Or can I close this PR?

@Ahmad-S792
Copy link
Contributor Author

@smfr - I took test from Chromium patch and tried to apply two tricks to make it less flaky fo future: 1) Small Size of Image 2) Shorter set-timeout. Can you have suggest any other?

@smfr - Any suggestion / help? Or can I close this PR?

@smfr - I am closing my PR. If you want me to reopen, happy to do so and do any changes, I will keep my branch for time being. I have uploaded video on bug as well that it does indeed fix bug.

Comment on lines +10 to +13
@keyframes keyframes {
0% { fill: pink }
100% { fill: green }
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you use the same value from from and to, and provided it's different to the underlying value (not red), does this help with the flakiness? You'd also need to ensure that this modified version of the test also fails prior to your patch.

@Ahmad-S792 Ahmad-S792 removed the request-merge-queue Request a pull request to be added to merge-queue once ready label May 21, 2023
@Ahmad-S792 Ahmad-S792 deleted the fix199364-svg-render-image-css-animation-fix branch October 2, 2023 13:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Images For bugs in image handling.
Projects
None yet
4 participants