New issue
Advanced search Search tips

Issue 641245 link

Starred by 5 users

Issue metadata

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

Blocking:
issue 649922
issue 654664


Show other hotlists

Hotlists containing this issue:
style-dev-current


Sign in to add a comment

CSS Motion Path: offset-path can specify ray with angle and size

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

Issue description

https://drafts.fxtf.org/motion-1/

offset-path can be ray(<angle> && <size>? && contain?)

Then the path is a ray in the direction specified by <angle> (clockwise from vertically upwards).

 <size> is
  closest-side | closest-corner | farthest-side | farthest-corner 

The distance corresponding to 100% is the distance (ignoring angle) to the closest-side | closest-corner | farthest-side | farthest-corner.

 
Summary: CSS Motion Path: offset-path can specify ray with angle and size (was: CSS Motion Path: offset-path and offset-distance can specify angle and size)
<size> was previously in offset-distance. It is now part of offset-path.

The 'contain' option can be addressed in a separate issue.

Description: Show this description
Blocking: 649922
Blocking: 654664
Labels: Update-Monthly
Project Member

Comment 6 by bugdroid1@chromium.org, May 16 2017

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

commit 2319cee58d13a3ab8d876c263fc130b2405f725b
Author: ericwilligers <ericwilligers@chromium.org>
Date: Tue May 16 02:30:18 2017

CSS Motion Path: Support parsing of ray(<angle>) paths

Spec: https://drafts.fxtf.org/motion-1/
offset-path can be ray(<angle> && <size> && contain?)

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

BUG=641245

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

[add] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/LayoutTests/css-parser/offset-path-parsing.html
[modify] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/Source/core/css/BUILD.gn
[modify] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/Source/core/css/BasicShapeFunctions.cpp
[modify] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/Source/core/css/CSSProperties.json5
[add] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/Source/core/css/CSSRayValue.cpp
[add] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/Source/core/css/CSSRayValue.h
[modify] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/Source/core/css/CSSValue.cpp
[modify] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/Source/core/css/CSSValue.h
[modify] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/Source/core/css/CSSValueKeywords.json5
[modify] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp
[modify] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/Source/core/css/properties/CSSPropertyOffsetPathUtils.cpp
[modify] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/Source/core/css/resolver/StyleBuilderConverter.cpp
[modify] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/Source/core/css/resolver/StyleBuilderConverter.h
[modify] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/Source/core/style/BUILD.gn
[modify] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/Source/core/style/BasicShapes.h
[modify] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/Source/core/style/ComputedStyle.cpp
[modify] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/Source/core/style/ComputedStyle.h
[modify] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/Source/core/style/StyleMotionData.h
[modify] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/Source/core/style/StylePath.cpp
[modify] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/Source/core/style/StylePath.h
[add] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/Source/core/style/StyleRay.cpp
[add] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/Source/core/style/StyleRay.h
[modify] https://crrev.com/2319cee58d13a3ab8d876c263fc130b2405f725b/third_party/WebKit/Source/platform/RuntimeEnabledFeatures.json5

Project Member

Comment 7 by bugdroid1@chromium.org, May 17 2017

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

commit fb7632da4263f6fc7c97f120d2792282baf56770
Author: ericwilligers <ericwilligers@chromium.org>
Date: Wed May 17 10:21:10 2017

CSS Motion Path: calculate transform for simple ray() paths

ray(<angle> <size>) indicates a ray with a bearing of the specified
angle. For example, ray(0 closest-side) indicates a ray towards the
top of the containing box.

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

Not yet implemented: calculating the transform when ray uses 'contain',
or when offset-distance contains percentage, and thus the ray length
must be determined.

BUG=641245, 722757 

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

[add] https://crrev.com/fb7632da4263f6fc7c97f120d2792282baf56770/third_party/WebKit/LayoutTests/external/wpt/css/motion-1/offset-path-ray-ref.html
[add] https://crrev.com/fb7632da4263f6fc7c97f120d2792282baf56770/third_party/WebKit/LayoutTests/external/wpt/css/motion-1/offset-path-ray.html
[add] https://crrev.com/fb7632da4263f6fc7c97f120d2792282baf56770/third_party/WebKit/LayoutTests/external/wpt/css/motion-1/offset-path-string-ref.html
[add] https://crrev.com/fb7632da4263f6fc7c97f120d2792282baf56770/third_party/WebKit/LayoutTests/external/wpt/css/motion-1/offset-path-string.html
[add] https://crrev.com/fb7632da4263f6fc7c97f120d2792282baf56770/third_party/WebKit/LayoutTests/external/wpt/css/motion-1/offset-rotate-001.html
[add] https://crrev.com/fb7632da4263f6fc7c97f120d2792282baf56770/third_party/WebKit/LayoutTests/external/wpt/css/motion-1/offset-rotate-002.html
[add] https://crrev.com/fb7632da4263f6fc7c97f120d2792282baf56770/third_party/WebKit/LayoutTests/external/wpt/css/motion-1/offset-rotate-ref.html
[modify] https://crrev.com/fb7632da4263f6fc7c97f120d2792282baf56770/third_party/WebKit/Source/core/style/ComputedStyle.cpp

Comment 8 by yio...@gmail.com, May 18 2017

Let's talk about it `ray(0 closest-side)`, under normal circumstances, this is not standard.

In this issues[1]: 

"Only spec the unitless 0 quirk for transforms & gradients"

and spec changed in [2]

To avoid future browser differences, this value should not be valid unless we change the syntax of the offset-path.

[1] https://github.com/w3c/csswg-drafts/issues/1162#issuecomment-293637767
[2] https://github.com/w3c/csswg-drafts/commit/602789171429b2231223ab1e5acf8f7f11652eb3


Comment 9 by yio...@gmail.com, May 18 2017

Let's talk about it `ray(0 closest-side)`, under normal circumstances, this is not standard.

In this issues[1]: 

"Only spec the unitless 0 quirk for transforms & gradients"

and spec changed in [2]

To avoid future browser differences, this value should not be valid unless we change the syntax of the offset-path.

[1] https://github.com/w3c/csswg-drafts/issues/1162#issuecomment-293637767
[2] https://github.com/w3c/csswg-drafts/commit/602789171429b2231223ab1e5acf8f7f11652eb3


> Let's talk about it `ray(0 closest-side)`, under normal circumstances, this is not standard.

This is being fixed in  crbug.com/725382 
https://codereview.chromium.org/2898133002/patch/100001/110001

Labels: -Update-Monthly

Sign in to add a comment