[motion-path] Accept position parameter in ray()

https://bugs.webkit.org/show_bug.cgi?id=258113
rdar://110821024

Reviewed by Tim Nguyen.

WIP from Tim Nguyen.

The ray() function should accept an at <position> parameter which represents the starting position of the ray.

* LayoutTests/TestExpectations:
* LayoutTests/imported/w3c/web-platform-tests/css/motion/animation/offset-path-interpolation-005-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/motion/offset-path-ray-013.html:
* LayoutTests/imported/w3c/web-platform-tests/css/motion/parsing/offset-path-computed-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/motion/parsing/offset-path-parsing-valid-expected.txt:
* Source/WebCore/css/CSSRayValue.cpp:
(WebCore::CSSRayValue::customCSSText const):
(WebCore::CSSRayValue::equals const):
* Source/WebCore/css/CSSRayValue.h:
* Source/WebCore/css/ComputedStyleExtractor.cpp:
(WebCore::valueForPathOperation):
* Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp:
(WebCore::CSSPropertyParserHelpers::consumeRayShape):
* Source/WebCore/rendering/PathOperation.cpp:
(WebCore::RayPathOperation::create):
(WebCore::RayPathOperation::clone const):
(WebCore::RayPathOperation::blend const):
(WebCore::RayPathOperation::currentOffset const):
(WebCore::RayPathOperation::lengthForPath const):
(WebCore::RayPathOperation::getPath const):
* Source/WebCore/rendering/PathOperation.h:
* Source/WebCore/rendering/RenderLayer.cpp:
(WebCore::offsetFromContainer):
(WebCore::RenderLayer::setReferenceBoxForPathOperations):
* Source/WebCore/style/StyleBuilderConverter.h:
(WebCore::Style::BuilderConverter::convertPathOperation):
* Source/WebKit/Shared/WebCoreArgumentCoders.serialization.in:

Canonical link: https://commits.webkit.org/267459@main

LayoutTests/TestExpectations

@@ -5284,6 +5284,8 @@ webkit.org/b/233340 imported/w3c/web-platform-tests/css/motion/offset-anchor-tra
 # CSS motion path ray test failing due to getting wrong size from containing block.
 webkit.org/b/233344 imported/w3c/web-platform-tests/css/motion/offset-path-ray-007.html [ ImageOnlyFailure ]
 webkit.org/b/233344 imported/w3c/web-platform-tests/css/motion/offset-path-ray-009.html [ ImageOnlyFailure ]
+imported/w3c/web-platform-tests/css/motion/offset-path-ray-012.html [ ImageOnlyFailure ]
+imported/w3c/web-platform-tests/css/motion/offset-path-ray-013.html [ ImageOnlyFailure ]
 
 # CSS motion path URL support.
 imported/w3c/web-platform-tests/css/motion/offset-path-url-002.html [ ImageOnlyFailure ]
@@ -5294,17 +5296,17 @@ imported/w3c/web-platform-tests/css/motion/offset-path-url-009.html [ ImageOnlyF
 imported/w3c/web-platform-tests/css/motion/offset-path-url-010.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/motion/offset-path-url-011.html [ ImageOnlyFailure ]
 
-# CSS motion path tests for missing <position> support in ray().
+# CSS motion path tests for missing offset-position: normal support in ray().
 imported/w3c/web-platform-tests/css/motion/offset-path-ray-011.html [ ImageOnlyFailure ]
-imported/w3c/web-platform-tests/css/motion/offset-path-ray-012.html [ ImageOnlyFailure ]
-imported/w3c/web-platform-tests/css/motion/offset-path-ray-013.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/motion/offset-path-ray-014.html [ ImageOnlyFailure ]
 
 # CSS motion path tests for missing <coord-box> support.
 imported/w3c/web-platform-tests/css/motion/offset-path-coord-box-001.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/motion/offset-path-coord-box-002.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/motion/offset-path-coord-box-003.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/motion/offset-path-coord-box-004.html [ ImageOnlyFailure ]
+
+# CSS motion path tests for missing parsing support for <coord-box> with ray.
 imported/w3c/web-platform-tests/css/motion/offset-path-ray-015.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/motion/offset-path-ray-016.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/motion/offset-path-ray-017.html [ ImageOnlyFailure ]

LayoutTests/imported/w3c/web-platform-tests/css/motion/animation/offset-path-interpolation-005-expected.txt

@@ -235,34 +235,34 @@ PASS Web Animations: property <offset-path> from [ray(-10deg farthest-corner)] t
 PASS Web Animations: property <offset-path> from [ray(-10deg farthest-corner)] to [ray(-50deg farthest-corner)] at (0.875) should be [ray(-45deg farthest-corner)]
 PASS Web Animations: property <offset-path> from [ray(-10deg farthest-corner)] to [ray(-50deg farthest-corner)] at (1) should be [ray(-50deg farthest-corner)]
 PASS Web Animations: property <offset-path> from [ray(-10deg farthest-corner)] to [ray(-50deg farthest-corner)] at (2) should be [ray(-90deg farthest-corner)]
-FAIL CSS Transitions: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (-1) should be [ray(30deg farthest-corner at -100% -100px)] assert_true: 'from' value should be supported expected true got false
-FAIL CSS Transitions: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0) should be [ray(-10deg farthest-corner at 0% 0px)] assert_true: 'from' value should be supported expected true got false
-FAIL CSS Transitions: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0.125) should be [ray(-15deg farthest-corner at 12.5% 12.5px)] assert_true: 'from' value should be supported expected true got false
-FAIL CSS Transitions: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0.875) should be [ray(-45deg farthest-corner at 87.5% 87.5px)] assert_true: 'from' value should be supported expected true got false
-FAIL CSS Transitions: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (1) should be [ray(-50deg farthest-corner at 100% 100px)] assert_true: 'from' value should be supported expected true got false
-FAIL CSS Transitions: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (2) should be [ray(-90deg farthest-corner at 200% 200px)] assert_true: 'from' value should be supported expected true got false
-FAIL CSS Transitions with transition: all: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (-1) should be [ray(30deg farthest-corner at -100% -100px)] assert_true: 'from' value should be supported expected true got false
-FAIL CSS Transitions with transition: all: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0) should be [ray(-10deg farthest-corner at 0% 0px)] assert_true: 'from' value should be supported expected true got false
-FAIL CSS Transitions with transition: all: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0.125) should be [ray(-15deg farthest-corner at 12.5% 12.5px)] assert_true: 'from' value should be supported expected true got false
-FAIL CSS Transitions with transition: all: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0.875) should be [ray(-45deg farthest-corner at 87.5% 87.5px)] assert_true: 'from' value should be supported expected true got false
-FAIL CSS Transitions with transition: all: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (1) should be [ray(-50deg farthest-corner at 100% 100px)] assert_true: 'from' value should be supported expected true got false
-FAIL CSS Transitions with transition: all: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (2) should be [ray(-90deg farthest-corner at 200% 200px)] assert_true: 'from' value should be supported expected true got false
-FAIL CSS Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (-1) should be [ray(30deg farthest-corner at -100% -100px)] assert_true: 'from' value should be supported expected true got false
-FAIL CSS Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0) should be [ray(-10deg farthest-corner at 0% 0px)] assert_true: 'from' value should be supported expected true got false
-FAIL CSS Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0.125) should be [ray(-15deg farthest-corner at 12.5% 12.5px)] assert_true: 'from' value should be supported expected true got false
-FAIL CSS Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0.875) should be [ray(-45deg farthest-corner at 87.5% 87.5px)] assert_true: 'from' value should be supported expected true got false
-FAIL CSS Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (1) should be [ray(-50deg farthest-corner at 100% 100px)] assert_true: 'from' value should be supported expected true got false
-FAIL CSS Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (2) should be [ray(-90deg farthest-corner at 200% 200px)] assert_true: 'from' value should be supported expected true got false
-FAIL Web Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (-1) should be [ray(30deg farthest-corner at -100% -100px)] assert_true: 'from' value should be supported expected true got false
-FAIL Web Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0) should be [ray(-10deg farthest-corner at 0% 0px)] assert_true: 'from' value should be supported expected true got false
-FAIL Web Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0.125) should be [ray(-15deg farthest-corner at 12.5% 12.5px)] assert_true: 'from' value should be supported expected true got false
-FAIL Web Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0.875) should be [ray(-45deg farthest-corner at 87.5% 87.5px)] assert_true: 'from' value should be supported expected true got false
-FAIL Web Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (1) should be [ray(-50deg farthest-corner at 100% 100px)] assert_true: 'from' value should be supported expected true got false
-FAIL Web Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (2) should be [ray(-90deg farthest-corner at 200% 200px)] assert_true: 'from' value should be supported expected true got false
-FAIL CSS Transitions: property <offset-path> from [ray(-10deg farthest-corner)] to [ray(-50deg farthest-corner at 100% 100%)] at (1) should be [ray(-50deg farthest-corner at 100% 100%)] assert_true: 'to' value should be supported expected true got false
-FAIL CSS Transitions with transition: all: property <offset-path> from [ray(-10deg farthest-corner)] to [ray(-50deg farthest-corner at 100% 100%)] at (1) should be [ray(-50deg farthest-corner at 100% 100%)] assert_true: 'to' value should be supported expected true got false
-FAIL CSS Animations: property <offset-path> from [ray(-10deg farthest-corner)] to [ray(-50deg farthest-corner at 100% 100%)] at (1) should be [ray(-50deg farthest-corner at 100% 100%)] assert_true: 'to' value should be supported expected true got false
-FAIL Web Animations: property <offset-path> from [ray(-10deg farthest-corner)] to [ray(-50deg farthest-corner at 100% 100%)] at (1) should be [ray(-50deg farthest-corner at 100% 100%)] assert_true: 'to' value should be supported expected true got false
+PASS CSS Transitions: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (-1) should be [ray(30deg farthest-corner at -100% -100px)]
+PASS CSS Transitions: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0) should be [ray(-10deg farthest-corner at 0% 0px)]
+PASS CSS Transitions: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0.125) should be [ray(-15deg farthest-corner at 12.5% 12.5px)]
+PASS CSS Transitions: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0.875) should be [ray(-45deg farthest-corner at 87.5% 87.5px)]
+PASS CSS Transitions: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (1) should be [ray(-50deg farthest-corner at 100% 100px)]
+PASS CSS Transitions: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (2) should be [ray(-90deg farthest-corner at 200% 200px)]
+PASS CSS Transitions with transition: all: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (-1) should be [ray(30deg farthest-corner at -100% -100px)]
+PASS CSS Transitions with transition: all: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0) should be [ray(-10deg farthest-corner at 0% 0px)]
+PASS CSS Transitions with transition: all: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0.125) should be [ray(-15deg farthest-corner at 12.5% 12.5px)]
+PASS CSS Transitions with transition: all: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0.875) should be [ray(-45deg farthest-corner at 87.5% 87.5px)]
+PASS CSS Transitions with transition: all: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (1) should be [ray(-50deg farthest-corner at 100% 100px)]
+PASS CSS Transitions with transition: all: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (2) should be [ray(-90deg farthest-corner at 200% 200px)]
+PASS CSS Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (-1) should be [ray(30deg farthest-corner at -100% -100px)]
+PASS CSS Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0) should be [ray(-10deg farthest-corner at 0% 0px)]
+PASS CSS Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0.125) should be [ray(-15deg farthest-corner at 12.5% 12.5px)]
+PASS CSS Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0.875) should be [ray(-45deg farthest-corner at 87.5% 87.5px)]
+PASS CSS Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (1) should be [ray(-50deg farthest-corner at 100% 100px)]
+PASS CSS Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (2) should be [ray(-90deg farthest-corner at 200% 200px)]
+PASS Web Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (-1) should be [ray(30deg farthest-corner at -100% -100px)]
+PASS Web Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0) should be [ray(-10deg farthest-corner at 0% 0px)]
+PASS Web Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0.125) should be [ray(-15deg farthest-corner at 12.5% 12.5px)]
+PASS Web Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (0.875) should be [ray(-45deg farthest-corner at 87.5% 87.5px)]
+PASS Web Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (1) should be [ray(-50deg farthest-corner at 100% 100px)]
+PASS Web Animations: property <offset-path> from [ray(-10deg farthest-corner at 0% 0px)] to [ray(-50deg farthest-corner at 100% 100px)] at (2) should be [ray(-90deg farthest-corner at 200% 200px)]
+PASS CSS Transitions: property <offset-path> from [ray(-10deg farthest-corner)] to [ray(-50deg farthest-corner at 100% 100%)] at (1) should be [ray(-50deg farthest-corner at 100% 100%)]
+PASS CSS Transitions with transition: all: property <offset-path> from [ray(-10deg farthest-corner)] to [ray(-50deg farthest-corner at 100% 100%)] at (1) should be [ray(-50deg farthest-corner at 100% 100%)]
+PASS CSS Animations: property <offset-path> from [ray(-10deg farthest-corner)] to [ray(-50deg farthest-corner at 100% 100%)] at (1) should be [ray(-50deg farthest-corner at 100% 100%)]
+PASS Web Animations: property <offset-path> from [ray(-10deg farthest-corner)] to [ray(-50deg farthest-corner at 100% 100%)] at (1) should be [ray(-50deg farthest-corner at 100% 100%)]
 PASS CSS Transitions: property <offset-path> from [ray(200deg farthest-side)] to [ray(300deg sides)] at (-0.3) should be [ray(300deg sides)]
 PASS CSS Transitions: property <offset-path> from [ray(200deg farthest-side)] to [ray(300deg sides)] at (0) should be [ray(300deg sides)]
 PASS CSS Transitions: property <offset-path> from [ray(200deg farthest-side)] to [ray(300deg sides)] at (0.3) should be [ray(300deg sides)]

LayoutTests/imported/w3c/web-platform-tests/css/motion/parsing/offset-path-computed-expected.txt

@@ -7,11 +7,11 @@ PASS Property offset-path value 'ray(200grad farthest-side)'
 PASS Property offset-path value 'ray(270deg farthest-corner contain)'
 PASS Property offset-path value 'ray(-720deg sides)'
 PASS Property offset-path value 'ray(calc(180deg - 45deg) farthest-side)'
-FAIL Property offset-path value 'ray(0deg at 100px 100px)' assert_true: 'ray(0deg at 100px 100px)' is a supported value for offset-path. expected true got false
-FAIL Property offset-path value 'ray(0deg sides at center center)' assert_true: 'ray(0deg sides at center center)' is a supported value for offset-path. expected true got false
-FAIL Property offset-path value 'ray(0deg at center center sides)' assert_true: 'ray(0deg at center center sides)' is a supported value for offset-path. expected true got false
-FAIL Property offset-path value 'ray(0deg at center center contain)' assert_true: 'ray(0deg at center center contain)' is a supported value for offset-path. expected true got false
-FAIL Property offset-path value 'ray(at 10px 10px 0deg contain)' assert_true: 'ray(at 10px 10px 0deg contain)' is a supported value for offset-path. expected true got false
+PASS Property offset-path value 'ray(0deg at 100px 100px)'
+PASS Property offset-path value 'ray(0deg sides at center center)'
+PASS Property offset-path value 'ray(0deg at center center sides)'
+PASS Property offset-path value 'ray(0deg at center center contain)'
+PASS Property offset-path value 'ray(at 10px 10px 0deg contain)'
 PASS Property offset-path value 'path("m 20 0 h -100")'
 PASS Property offset-path value 'path("M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z")'
 PASS Property offset-path value 'path("m 10 20 q 30 60 40 50 q 100 70 90 80")'

LayoutTests/imported/w3c/web-platform-tests/css/motion/parsing/offset-path-parsing-valid-expected.txt

@@ -7,11 +7,11 @@ PASS e.style['offset-path'] = "ray(200grad farthest-side)" should set the proper
 PASS e.style['offset-path'] = "ray(270deg farthest-corner contain)" should set the property value
 PASS e.style['offset-path'] = "ray(-720deg sides)" should set the property value
 PASS e.style['offset-path'] = "ray(calc(180deg - 45deg) farthest-side)" should set the property value
-FAIL e.style['offset-path'] = "ray(0deg at 100px 100px)" should set the property value assert_not_equals: property should be set got disallowed value ""
-FAIL e.style['offset-path'] = "ray(0deg sides at center center)" should set the property value assert_not_equals: property should be set got disallowed value ""
-FAIL e.style['offset-path'] = "ray(0deg at center center sides)" should set the property value assert_not_equals: property should be set got disallowed value ""
-FAIL e.style['offset-path'] = "ray(0deg at center center contain)" should set the property value assert_not_equals: property should be set got disallowed value ""
-FAIL e.style['offset-path'] = "ray(at 10px 10px 0deg contain)" should set the property value assert_not_equals: property should be set got disallowed value ""
+PASS e.style['offset-path'] = "ray(0deg at 100px 100px)" should set the property value
+PASS e.style['offset-path'] = "ray(0deg sides at center center)" should set the property value
+PASS e.style['offset-path'] = "ray(0deg at center center sides)" should set the property value
+PASS e.style['offset-path'] = "ray(0deg at center center contain)" should set the property value
+PASS e.style['offset-path'] = "ray(at 10px 10px 0deg contain)" should set the property value
 PASS e.style['offset-path'] = "path(\"m 20 0 h -100\")" should set the property value
 PASS e.style['offset-path'] = "path(\"M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z\")" should set the property value
 PASS e.style['offset-path'] = "path(\"m 10 20 q 30 60 40 50 q 100 70 90 80\")" should set the property value