We should interpolate between paths. https://drafts.fxtf.org/motion-1/#offset-path-property
https://codereview.chromium.org/2720653002/ is ready for landing after blink-dev approval and M58 branchpoint.
Intent to ship https://groups.google.com/a/chromium.org/d/msg/blink-dev/_DPl-JG6bV8/y2_GUwFVDwAJ led to creation of SVG issue https://github.com/w3c/svgwg/issues/321 about path interpolation semantics.
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/be71768b74edc60f31b96861da8c05590403bdf0 commit be71768b74edc60f31b96861da8c05590403bdf0 Author: Eric Willigers <ericwilligers@chromium.org> Date: Tue Oct 17 10:56:38 2017 CSS Motion Path: Implement path() animation for the offset-path property We interpolate between paths when they have the same number and type of path segments. Intent to Ship: https://groups.google.com/a/chromium.org/d/msg/blink-dev/_DPl-JG6bV8/y2_GUwFVDwAJ BUG=696395 Change-Id: Ib5de282169cbb6ab4d5a4972d5e894dc000cf1d3 Reviewed-on: https://chromium-review.googlesource.com/706747 Commit-Queue: Eric Willigers <ericwilligers@chromium.org> Reviewed-by: Stephen McGruer <smcgruer@chromium.org> Cr-Commit-Position: refs/heads/master@{#509355} [modify] https://crrev.com/be71768b74edc60f31b96861da8c05590403bdf0/third_party/WebKit/LayoutTests/animations/interpolation/offset-interpolation.html [add] https://crrev.com/be71768b74edc60f31b96861da8c05590403bdf0/third_party/WebKit/LayoutTests/animations/interpolation/offset-path-interpolation-001.html [add] https://crrev.com/be71768b74edc60f31b96861da8c05590403bdf0/third_party/WebKit/LayoutTests/animations/interpolation/offset-path-interpolation-002.html [add] https://crrev.com/be71768b74edc60f31b96861da8c05590403bdf0/third_party/WebKit/LayoutTests/animations/interpolation/offset-path-interpolation-003.html [add] https://crrev.com/be71768b74edc60f31b96861da8c05590403bdf0/third_party/WebKit/LayoutTests/animations/interpolation/offset-path-interpolation-004.html [add] https://crrev.com/be71768b74edc60f31b96861da8c05590403bdf0/third_party/WebKit/LayoutTests/animations/interpolation/offset-path-interpolation-005.html [modify] https://crrev.com/be71768b74edc60f31b96861da8c05590403bdf0/third_party/WebKit/LayoutTests/animations/interpolation/svg-d-interpolation-001.html [modify] https://crrev.com/be71768b74edc60f31b96861da8c05590403bdf0/third_party/WebKit/LayoutTests/animations/interpolation/svg-d-interpolation-002.html [modify] https://crrev.com/be71768b74edc60f31b96861da8c05590403bdf0/third_party/WebKit/LayoutTests/animations/interpolation/svg-d-interpolation-003.html [modify] https://crrev.com/be71768b74edc60f31b96861da8c05590403bdf0/third_party/WebKit/LayoutTests/animations/interpolation/svg-d-interpolation-004.html [add] https://crrev.com/be71768b74edc60f31b96861da8c05590403bdf0/third_party/WebKit/LayoutTests/animations/responsive/animations-responsive-d.html [add] https://crrev.com/be71768b74edc60f31b96861da8c05590403bdf0/third_party/WebKit/LayoutTests/animations/responsive/animations-responsive-offset-path.html [modify] https://crrev.com/be71768b74edc60f31b96861da8c05590403bdf0/third_party/WebKit/Source/core/animation/CSSInterpolationTypesMap.cpp [modify] https://crrev.com/be71768b74edc60f31b96861da8c05590403bdf0/third_party/WebKit/Source/core/animation/CSSPathInterpolationType.cpp [modify] https://crrev.com/be71768b74edc60f31b96861da8c05590403bdf0/third_party/WebKit/Source/core/css/CSSProperties.json5 [modify] https://crrev.com/be71768b74edc60f31b96861da8c05590403bdf0/third_party/WebKit/Source/core/css/CSSPropertyEquality.cpp
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/464b2cee6712f17ac3da58ab3cd986302db6a1a1 commit 464b2cee6712f17ac3da58ab3cd986302db6a1a1 Author: Eric Willigers <ericwilligers@chromium.org> Date: Mon Nov 27 07:35:57 2017 CSS: WPT for offset-path animation Web platform tests for animation of path() strings and rays. Spec: https://drafts.fxtf.org/motion-1/#offset-path-property CSS WG discussion: https://github.com/w3c/fxtf-drafts/issues/225 RESOLVED: Computed-value normalize case of path commands (to the absolute version). BUG=696395, 696412 Change-Id: If084ed01addf86546e89efae8fe5053f5b87a282 Reviewed-on: https://chromium-review.googlesource.com/790012 Commit-Queue: Eric Willigers <ericwilligers@chromium.org> Reviewed-by: Darren Shen <shend@chromium.org> Cr-Commit-Position: refs/heads/master@{#519236} [add] https://crrev.com/464b2cee6712f17ac3da58ab3cd986302db6a1a1/third_party/WebKit/LayoutTests/external/wpt/css/motion/animation/offset-path-interpolation-001.html [add] https://crrev.com/464b2cee6712f17ac3da58ab3cd986302db6a1a1/third_party/WebKit/LayoutTests/external/wpt/css/motion/animation/offset-path-interpolation-002.html [add] https://crrev.com/464b2cee6712f17ac3da58ab3cd986302db6a1a1/third_party/WebKit/LayoutTests/external/wpt/css/motion/animation/offset-path-interpolation-003.html [add] https://crrev.com/464b2cee6712f17ac3da58ab3cd986302db6a1a1/third_party/WebKit/LayoutTests/external/wpt/css/motion/animation/offset-path-interpolation-004.html [add] https://crrev.com/464b2cee6712f17ac3da58ab3cd986302db6a1a1/third_party/WebKit/LayoutTests/external/wpt/css/motion/animation/offset-path-interpolation-005.html
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/53342c9ee1b5beda2602088d68348a69f8d226a1 commit 53342c9ee1b5beda2602088d68348a69f8d226a1 Author: Eric Willigers <ericwilligers@chromium.org> Date: Tue Sep 18 10:58:03 2018 CSS: path string computed style uses absolute commands The canonical computed style format for path strings uses absolute commands only. Discussed in https://github.com/w3c/svgwg/issues/321 Previously, Blink only normalized path string to absolute commands when they were animated. BUG=696395 Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_slimming_paint_v2;master.tryserver.blink:linux_trusty_blink_rel Change-Id: I773ceb40f22fc5ce1e5f7ea0b4eca6cc612e763e Reviewed-on: https://chromium-review.googlesource.com/1215150 Commit-Queue: Eric Willigers <ericwilligers@chromium.org> Reviewed-by: Fredrik Söderquist <fs@opera.com> Cr-Commit-Position: refs/heads/master@{#591996} [modify] https://crrev.com/53342c9ee1b5beda2602088d68348a69f8d226a1/third_party/WebKit/LayoutTests/css3/motion-path/offset.html [add] https://crrev.com/53342c9ee1b5beda2602088d68348a69f8d226a1/third_party/WebKit/LayoutTests/external/wpt/css/motion/offset-path-serialization.html [modify] https://crrev.com/53342c9ee1b5beda2602088d68348a69f8d226a1/third_party/WebKit/LayoutTests/external/wpt/css/motion/parsing/offset-parsing-valid.html [modify] https://crrev.com/53342c9ee1b5beda2602088d68348a69f8d226a1/third_party/WebKit/LayoutTests/external/wpt/css/motion/parsing/offset-path-parsing-valid-expected.txt [modify] https://crrev.com/53342c9ee1b5beda2602088d68348a69f8d226a1/third_party/WebKit/LayoutTests/external/wpt/css/motion/parsing/offset-path-parsing-valid.html [modify] https://crrev.com/53342c9ee1b5beda2602088d68348a69f8d226a1/third_party/WebKit/LayoutTests/external/wpt/svg/path/property/getComputedStyle.svg [add] https://crrev.com/53342c9ee1b5beda2602088d68348a69f8d226a1/third_party/WebKit/LayoutTests/external/wpt/svg/path/property/serialization.svg [modify] https://crrev.com/53342c9ee1b5beda2602088d68348a69f8d226a1/third_party/blink/renderer/core/css/css_path_value.cc [modify] https://crrev.com/53342c9ee1b5beda2602088d68348a69f8d226a1/third_party/blink/renderer/core/css/css_path_value.h [modify] https://crrev.com/53342c9ee1b5beda2602088d68348a69f8d226a1/third_party/blink/renderer/core/layout/svg/svg_layout_tree_as_text.cc [modify] https://crrev.com/53342c9ee1b5beda2602088d68348a69f8d226a1/third_party/blink/renderer/core/style/style_path.cc [modify] https://crrev.com/53342c9ee1b5beda2602088d68348a69f8d226a1/third_party/blink/renderer/core/svg/svg_path.cc [modify] https://crrev.com/53342c9ee1b5beda2602088d68348a69f8d226a1/third_party/blink/renderer/core/svg/svg_path_parser.cc [modify] https://crrev.com/53342c9ee1b5beda2602088d68348a69f8d226a1/third_party/blink/renderer/core/svg/svg_path_parser.h [modify] https://crrev.com/53342c9ee1b5beda2602088d68348a69f8d226a1/third_party/blink/renderer/core/svg/svg_path_utilities.cc [modify] https://crrev.com/53342c9ee1b5beda2602088d68348a69f8d226a1/third_party/blink/renderer/core/svg/svg_path_utilities.h
Comment 1 by ericwilligers@chromium.org
, Feb 27 2017