New issue
Advanced search Search tips

Issue 696412 link

Starred by 6 users

Issue metadata

Status: Fixed
Owner:
Closed: Dec 2017
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 3
Type: Task
Launch-M-Target: 59-Dev



Sign in to add a comment

Animation for offset-path CSS property

Project Member Reported by ericwilligers@chromium.org, Feb 27 2017

Issue description

Change description:
We now support CSS Animations and Transitions on the 'offset-path' CSS property.

Changes to API surface:
offset-path is now an animatable property. 

Public standards discussion:
https://github.com/w3c/fxtf-drafts/issues/33
https://drafts.fxtf.org/motion-1/#offset-path-property

 
Labels: Update-Quarterly

Comment 2 by owe...@chromium.org, Sep 12 2017

Labels: migrated-launch-owp Type-Task
This issue has been automatically relabelled type=task because type=launch-owp issues are now officially deprecated. The deprecation is because they were creating confusion about how to get launch approvals, which should be instead done via type=launch issues.

We recommend this issue be used for implementation tracking (for public visibility), but if you already have an issue for that, you may mark this as duplicate.

For more details see here: https://docs.google.com/document/d/1JA6RohjtZQc26bTrGoIE_bSXGXUDQz8vc6G0n_sZJ2o/edit

For any questions, please contact owencm, sshruthi, larforge
Project Member

Comment 3 by bugdroid1@chromium.org, Oct 21 2017

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

commit 1f371bb08385c98eacdbd4271244293918f0736a
Author: Eric Willigers <ericwilligers@chromium.org>
Date: Sat Oct 21 04:43:46 2017

CSS Motion Path: Animation of ray() paths

The angle in ray(<angle> <size> contain?) is interpolable,
provided the start and end rays are consistent with regards
to <size> and 'contain?'.

Spec:
https://drafts.fxtf.org/motion-1/#offset-path-property
https://drafts.fxtf.org/motion-1/#valdef-offsetpath-ray

The class CSSRayInterpolationType in introduced to perform
the ray interpolation.

CSS Transitions for rays are not yet fully implemented:
transitions where the end value has a different <size> or 'contain?'
current jump to 'none' instead of the end value.

BUG= 696412 

Change-Id: I617c1d94f3a5b4b3ee304bc2f454d10c6ad9cf18
Reviewed-on: https://chromium-review.googlesource.com/731203
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Reviewed-by: Stephen McGruer <smcgruer@chromium.org>
Cr-Commit-Position: refs/heads/master@{#510662}
[add] https://crrev.com/1f371bb08385c98eacdbd4271244293918f0736a/third_party/WebKit/LayoutTests/animations/composition/offset-path-composition.html
[add] https://crrev.com/1f371bb08385c98eacdbd4271244293918f0736a/third_party/WebKit/LayoutTests/animations/interpolation/offset-path-interpolation-005-expected.txt
[modify] https://crrev.com/1f371bb08385c98eacdbd4271244293918f0736a/third_party/WebKit/LayoutTests/animations/interpolation/offset-path-interpolation-005.html
[modify] https://crrev.com/1f371bb08385c98eacdbd4271244293918f0736a/third_party/WebKit/Source/core/animation/BUILD.gn
[modify] https://crrev.com/1f371bb08385c98eacdbd4271244293918f0736a/third_party/WebKit/Source/core/animation/CSSInterpolationTypesMap.cpp
[add] https://crrev.com/1f371bb08385c98eacdbd4271244293918f0736a/third_party/WebKit/Source/core/animation/CSSRayInterpolationType.cpp
[add] https://crrev.com/1f371bb08385c98eacdbd4271244293918f0736a/third_party/WebKit/Source/core/animation/CSSRayInterpolationType.h

Project Member

Comment 4 by bugdroid1@chromium.org, Nov 8 2017

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

commit 76322b6d6675b3cfe1cc2ca2c0012335a9e9956b
Author: Eric Willigers <ericwilligers@chromium.org>
Date: Wed Nov 08 04:43:55 2017

CSS Animation: absolute commands for offset-path/d

This was discussed in the Intent to Ship conversation
for offset-path animation, and in the CSS WG.
https://groups.google.com/a/chromium.org/d/msg/blink-dev/_DPl-JG6bV8/y2_GUwFVDwAJ
https://github.com/w3c/fxtf-drafts/issues/225#issuecomment-334322738

For now, we only convert to absolute commands when animating.

BUG= 696412 

Change-Id: If415cffc8a925c9539429b7c1c3b02859f6ec60a
Reviewed-on: https://chromium-review.googlesource.com/756645
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Reviewed-by: Darren Shen <shend@chromium.org>
Cr-Commit-Position: refs/heads/master@{#514743}
[modify] https://crrev.com/76322b6d6675b3cfe1cc2ca2c0012335a9e9956b/third_party/WebKit/LayoutTests/animations/interpolation/offset-path-interpolation-001.html
[modify] https://crrev.com/76322b6d6675b3cfe1cc2ca2c0012335a9e9956b/third_party/WebKit/LayoutTests/animations/interpolation/offset-path-interpolation-002.html
[modify] https://crrev.com/76322b6d6675b3cfe1cc2ca2c0012335a9e9956b/third_party/WebKit/LayoutTests/animations/interpolation/offset-path-interpolation-003.html
[modify] https://crrev.com/76322b6d6675b3cfe1cc2ca2c0012335a9e9956b/third_party/WebKit/LayoutTests/animations/interpolation/offset-path-interpolation-004.html
[modify] https://crrev.com/76322b6d6675b3cfe1cc2ca2c0012335a9e9956b/third_party/WebKit/LayoutTests/animations/interpolation/svg-d-interpolation-001.html
[modify] https://crrev.com/76322b6d6675b3cfe1cc2ca2c0012335a9e9956b/third_party/WebKit/LayoutTests/animations/interpolation/svg-d-interpolation-002.html
[modify] https://crrev.com/76322b6d6675b3cfe1cc2ca2c0012335a9e9956b/third_party/WebKit/LayoutTests/animations/interpolation/svg-d-interpolation-003.html
[modify] https://crrev.com/76322b6d6675b3cfe1cc2ca2c0012335a9e9956b/third_party/WebKit/LayoutTests/animations/interpolation/svg-d-interpolation-004.html
[modify] https://crrev.com/76322b6d6675b3cfe1cc2ca2c0012335a9e9956b/third_party/WebKit/Source/core/animation/CSSPathInterpolationType.cpp
[modify] https://crrev.com/76322b6d6675b3cfe1cc2ca2c0012335a9e9956b/third_party/WebKit/Source/core/animation/PathInterpolationFunctions.cpp
[modify] https://crrev.com/76322b6d6675b3cfe1cc2ca2c0012335a9e9956b/third_party/WebKit/Source/core/animation/PathInterpolationFunctions.h
[modify] https://crrev.com/76322b6d6675b3cfe1cc2ca2c0012335a9e9956b/third_party/WebKit/Source/core/animation/SVGPathInterpolationType.cpp

Project Member

Comment 5 by bugdroid1@chromium.org, Nov 27 2017

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

Labels: -M-59 M-63
Status: Fixed (was: Assigned)

Sign in to add a comment