New issue
Advanced search Search tips

Issue 638055 link

Starred by 5 users

Issue metadata

Status: Started
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 3
Type: Feature

Blocked on:
issue 637543
issue 717833

Blocking:
issue 654664


Show other hotlists

Hotlists containing this issue:
style-dev-current


Sign in to add a comment

CSS Motion Path: offset-anchor and offset-position

Project Member Reported by ericwilligers@chromium.org, Aug 16 2016

Issue description

offset-position is the initial position of the path in the containing element.
https://drafts.fxtf.org/motion-1/#offset-position-property

offset-anchor is the point in the element that is positioned along the path.
https://drafts.fxtf.org/motion-1/#offset-anchor-property

The offset shorthand is also updated:
https://drafts.fxtf.org/motion-1/
<offset-path> && <offset-distance> && <offset-position> && <offset-anchor> && <offset-rotation>

 
Project Member

Comment 1 by bugdroid1@chromium.org, Aug 24 2016

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

commit 4c25391a90d84a475e3f4084bfa80cbcb18dc2cb
Author: ericwilligers <ericwilligers@chromium.org>
Date: Wed Aug 24 07:36:37 2016

CSS: <position> parser consumes only potentially valid tokens

When parsing <position>, consumePosition() always attempted to consume
four values, even when it was not possible for the next value to
legally appear in the current <position>.

For example, if the first value is a <percentage> or <length>, the
second value (if present) may only be
  top | center | bottom | <percentage> | <length>
and no third or fourth values are possible.

If the second value is center, no third or fourth values are possible.

left | right  may never be followed by  left | right.

BUG=638055

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

[modify] https://crrev.com/4c25391a90d84a475e3f4084bfa80cbcb18dc2cb/third_party/WebKit/LayoutTests/transforms/perspective-origin-parsing.html
[modify] https://crrev.com/4c25391a90d84a475e3f4084bfa80cbcb18dc2cb/third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp
[modify] https://crrev.com/4c25391a90d84a475e3f4084bfa80cbcb18dc2cb/third_party/WebKit/Source/core/css/parser/CSSPropertyParserHelpers.cpp

Project Member

Comment 2 by bugdroid1@chromium.org, Sep 22 2016

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

commit 72e3e282b889aa86071423648033f81d8bfc7b2d
Author: ericwilligers <ericwilligers@chromium.org>
Date: Thu Sep 22 02:19:11 2016

CSS Motion Path: offset-anchor and offset-position

offset-position is the initial position of the path in the containing element.
https://drafts.fxtf.org/motion-1/#offset-position-property

The default value of offset-position is auto (the element's current position).

offset-anchor is the point in the element that is positioned along the path.
https://drafts.fxtf.org/motion-1/#offset-anchor-property

The default value of offset-anchor is center.

This patch defines the new properties, and verifies they can be parsed,
stored and read.

Not yet implemented:
- updating the 'offset' shorthand
- animation
- using the new properties when computing the motion path transforms.

Intent to Implement: https://groups.google.com/a/chromium.org/d/msg/blink-dev/uqDmsIj6zJY/cS-Vp_XG2oYJ

BUG=638055

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

[add] https://crrev.com/72e3e282b889aa86071423648033f81d8bfc7b2d/third_party/WebKit/LayoutTests/css3/motion-path/offset-anchor.html
[add] https://crrev.com/72e3e282b889aa86071423648033f81d8bfc7b2d/third_party/WebKit/LayoutTests/css3/motion-path/offset-position.html
[modify] https://crrev.com/72e3e282b889aa86071423648033f81d8bfc7b2d/third_party/WebKit/LayoutTests/fast/css/getComputedStyle/computed-style-listing-expected.txt
[modify] https://crrev.com/72e3e282b889aa86071423648033f81d8bfc7b2d/third_party/WebKit/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-listing-expected.txt
[modify] https://crrev.com/72e3e282b889aa86071423648033f81d8bfc7b2d/third_party/WebKit/LayoutTests/platform/android/webexposed/css-properties-as-js-properties-expected.txt
[modify] https://crrev.com/72e3e282b889aa86071423648033f81d8bfc7b2d/third_party/WebKit/LayoutTests/svg/css/getComputedStyle-listing-expected.txt
[modify] https://crrev.com/72e3e282b889aa86071423648033f81d8bfc7b2d/third_party/WebKit/LayoutTests/webexposed/css-properties-as-js-properties-expected.txt
[modify] https://crrev.com/72e3e282b889aa86071423648033f81d8bfc7b2d/third_party/WebKit/Source/core/css/CSSComputedStyleDeclaration.cpp
[modify] https://crrev.com/72e3e282b889aa86071423648033f81d8bfc7b2d/third_party/WebKit/Source/core/css/CSSProperties.in
[modify] https://crrev.com/72e3e282b889aa86071423648033f81d8bfc7b2d/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp
[modify] https://crrev.com/72e3e282b889aa86071423648033f81d8bfc7b2d/third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp
[modify] https://crrev.com/72e3e282b889aa86071423648033f81d8bfc7b2d/third_party/WebKit/Source/core/css/resolver/StyleBuilderConverter.cpp
[modify] https://crrev.com/72e3e282b889aa86071423648033f81d8bfc7b2d/third_party/WebKit/Source/core/css/resolver/StyleBuilderConverter.h
[modify] https://crrev.com/72e3e282b889aa86071423648033f81d8bfc7b2d/third_party/WebKit/Source/core/frame/UseCounter.cpp
[modify] https://crrev.com/72e3e282b889aa86071423648033f81d8bfc7b2d/third_party/WebKit/Source/core/style/ComputedStyle.h
[modify] https://crrev.com/72e3e282b889aa86071423648033f81d8bfc7b2d/third_party/WebKit/Source/core/style/StyleMotionData.cpp
[modify] https://crrev.com/72e3e282b889aa86071423648033f81d8bfc7b2d/third_party/WebKit/Source/core/style/StyleMotionData.h
[modify] https://crrev.com/72e3e282b889aa86071423648033f81d8bfc7b2d/third_party/WebKit/Source/core/style/StyleTransformData.cpp
[modify] https://crrev.com/72e3e282b889aa86071423648033f81d8bfc7b2d/third_party/WebKit/Source/platform/RuntimeEnabledFeatures.in
[modify] https://crrev.com/72e3e282b889aa86071423648033f81d8bfc7b2d/tools/metrics/histograms/histograms.xml

Project Member

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

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

commit 4a69c4cc2f00ee6f4949037f3cbb382bee467f9d
Author: ericwilligers <ericwilligers@chromium.org>
Date: Fri Sep 23 05:15:36 2016

CSS Motion Path: animate offset-anchor and offset-position

offset-position and offset-anchor are both animatable as
<position>.
https://drafts.fxtf.org/motion-1/#offset-position-property
https://drafts.fxtf.org/motion-1/#offset-anchor-property

BUG=638055

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

[add] https://crrev.com/4a69c4cc2f00ee6f4949037f3cbb382bee467f9d/third_party/WebKit/LayoutTests/animations/composition/offset-anchor-composition.html
[add] https://crrev.com/4a69c4cc2f00ee6f4949037f3cbb382bee467f9d/third_party/WebKit/LayoutTests/animations/composition/offset-position-composition.html
[add] https://crrev.com/4a69c4cc2f00ee6f4949037f3cbb382bee467f9d/third_party/WebKit/LayoutTests/animations/interpolation/offset-anchor-interpolation.html
[add] https://crrev.com/4a69c4cc2f00ee6f4949037f3cbb382bee467f9d/third_party/WebKit/LayoutTests/animations/interpolation/offset-position-interpolation.html
[modify] https://crrev.com/4a69c4cc2f00ee6f4949037f3cbb382bee467f9d/third_party/WebKit/Source/core/animation/CSSPositionInterpolationType.h
[modify] https://crrev.com/4a69c4cc2f00ee6f4949037f3cbb382bee467f9d/third_party/WebKit/Source/core/animation/LengthListPropertyFunctions.cpp
[modify] https://crrev.com/4a69c4cc2f00ee6f4949037f3cbb382bee467f9d/third_party/WebKit/Source/core/animation/PropertyInterpolationTypesMapping.cpp
[modify] https://crrev.com/4a69c4cc2f00ee6f4949037f3cbb382bee467f9d/third_party/WebKit/Source/core/animation/animatable/AnimatableLengthPoint.cpp
[modify] https://crrev.com/4a69c4cc2f00ee6f4949037f3cbb382bee467f9d/third_party/WebKit/Source/core/animation/animatable/AnimatableLengthPoint.h
[modify] https://crrev.com/4a69c4cc2f00ee6f4949037f3cbb382bee467f9d/third_party/WebKit/Source/core/animation/css/CSSAnimatableValueFactory.cpp
[modify] https://crrev.com/4a69c4cc2f00ee6f4949037f3cbb382bee467f9d/third_party/WebKit/Source/core/css/CSSProperties.in
[modify] https://crrev.com/4a69c4cc2f00ee6f4949037f3cbb382bee467f9d/third_party/WebKit/Source/core/css/CSSPropertyEquality.cpp
[modify] https://crrev.com/4a69c4cc2f00ee6f4949037f3cbb382bee467f9d/third_party/WebKit/Source/core/css/resolver/AnimatedStyleBuilder.cpp

Project Member

Comment 4 by bugdroid1@chromium.org, Oct 5 2016

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

commit 96a59f8297eaff8ff8f70f35ec489d7f47e0e6c8
Author: ericwilligers <ericwilligers@chromium.org>
Date: Wed Oct 05 02:56:57 2016

CSS Motion Path: offset-shorthand requires path before distance rotation

We require offset-path to appear first, then offset-distance and
offset-rotation.

Standards discussion is continuing, this is intentionally conservative.

Spec (not yet updated):
https://drafts.fxtf.org/motion-1/#offset-shorthand

BUG=638055

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

[add] https://crrev.com/96a59f8297eaff8ff8f70f35ec489d7f47e0e6c8/third_party/WebKit/LayoutTests/css-parser/offset-parsing.html
[modify] https://crrev.com/96a59f8297eaff8ff8f70f35ec489d7f47e0e6c8/third_party/WebKit/LayoutTests/css3/motion-path/combine-offset-translation-and-rotation.html
[modify] https://crrev.com/96a59f8297eaff8ff8f70f35ec489d7f47e0e6c8/third_party/WebKit/LayoutTests/css3/motion-path/combine-rotation.html
[modify] https://crrev.com/96a59f8297eaff8ff8f70f35ec489d7f47e0e6c8/third_party/WebKit/LayoutTests/css3/motion-path/combine-translation.html
[modify] https://crrev.com/96a59f8297eaff8ff8f70f35ec489d7f47e0e6c8/third_party/WebKit/LayoutTests/css3/motion-path/zero-length.html
[modify] https://crrev.com/96a59f8297eaff8ff8f70f35ec489d7f47e0e6c8/third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp
[modify] https://crrev.com/96a59f8297eaff8ff8f70f35ec489d7f47e0e6c8/third_party/WebKit/Source/core/css/parser/CSSPropertyParser.h

Blocking: 654664
Project Member

Comment 6 by bugdroid1@chromium.org, Nov 9 2016

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

commit 29e3535e5c89d73a975bcd0a97aaefe3c8653e80
Author: ericwilligers <ericwilligers@chromium.org>
Date: Wed Nov 09 09:06:20 2016

CSS Motion Path: Place offset-anchor on the path

The offset-anchor, not transform-origin, is placed on the
path that is specified by offset-path.

"offset-anchor: auto" is not yet supported.

Spec: https://drafts.fxtf.org/motion-1/#offset-anchor-property

BUG=638055

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

[add] https://crrev.com/29e3535e5c89d73a975bcd0a97aaefe3c8653e80/third_party/WebKit/LayoutTests/css3/motion-path/combine-anchor-transform-expected.html
[add] https://crrev.com/29e3535e5c89d73a975bcd0a97aaefe3c8653e80/third_party/WebKit/LayoutTests/css3/motion-path/combine-anchor-transform.html
[add] https://crrev.com/29e3535e5c89d73a975bcd0a97aaefe3c8653e80/third_party/WebKit/LayoutTests/css3/motion-path/combine-independent-anchor-expected.html
[add] https://crrev.com/29e3535e5c89d73a975bcd0a97aaefe3c8653e80/third_party/WebKit/LayoutTests/css3/motion-path/combine-independent-anchor.html
[modify] https://crrev.com/29e3535e5c89d73a975bcd0a97aaefe3c8653e80/third_party/WebKit/LayoutTests/css3/motion-path/combine-motion-translation-and-rotation.html
[modify] https://crrev.com/29e3535e5c89d73a975bcd0a97aaefe3c8653e80/third_party/WebKit/LayoutTests/css3/motion-path/combine-offset-translation-and-rotation.html
[modify] https://crrev.com/29e3535e5c89d73a975bcd0a97aaefe3c8653e80/third_party/WebKit/LayoutTests/css3/motion-path/combine-translation.html
[modify] https://crrev.com/29e3535e5c89d73a975bcd0a97aaefe3c8653e80/third_party/WebKit/LayoutTests/css3/motion-path/compute-distance.html
[add] https://crrev.com/29e3535e5c89d73a975bcd0a97aaefe3c8653e80/third_party/WebKit/LayoutTests/css3/motion-path/offset-anchor-rotation-expected.html
[add] https://crrev.com/29e3535e5c89d73a975bcd0a97aaefe3c8653e80/third_party/WebKit/LayoutTests/css3/motion-path/offset-anchor-rotation.html
[modify] https://crrev.com/29e3535e5c89d73a975bcd0a97aaefe3c8653e80/third_party/WebKit/LayoutTests/css3/motion-path/zero-length.html
[modify] https://crrev.com/29e3535e5c89d73a975bcd0a97aaefe3c8653e80/third_party/WebKit/LayoutTests/transforms/combine-transforms-properties-motion-path.html
[modify] https://crrev.com/29e3535e5c89d73a975bcd0a97aaefe3c8653e80/third_party/WebKit/Source/core/style/ComputedStyle.cpp
[modify] https://crrev.com/29e3535e5c89d73a975bcd0a97aaefe3c8653e80/third_party/WebKit/Source/core/style/ComputedStyle.h

Labels: Update-Monthly
Blockedon: 717833
Labels: -Update-Monthly

Sign in to add a comment