[@Property] Initial syntax parsing

https://bugs.webkit.org/show_bug.cgi?id=248871
<rdar://problem/103075062>

Reviewed by Darin Adler.

Parse <length>, <length-percentage>, <custom-ident> and ident syntax strings.

* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property-syntax-parsing-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-computation-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-initial-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/typedom-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/url-resolution-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-expected.txt:
* Source/WebCore/Sources.txt:
* Source/WebCore/WebCore.xcodeproj/project.pbxproj:
* Source/WebCore/css/parser/CSSParserIdioms.h:
(WebCore::isCSSSpace):
* Source/WebCore/css/parser/CSSPropertyParser.cpp:
(WebCore::CSSPropertyParser::parseCustomPropertyValueWithSyntaxComponents):
(WebCore::CSSPropertyParser::canParseTypedCustomPropertyValue):
(WebCore::CSSPropertyParser::collectParsedCustomPropertyValueDependencies):
(WebCore::CSSPropertyParser::parseTypedCustomPropertyValue):
* Source/WebCore/css/parser/CSSPropertyParser.h:
* Source/WebCore/css/parser/CSSPropertySyntax.cpp: Added.
(WebCore::CSSPropertySyntax::parseComponent):
(WebCore::CSSPropertySyntax::parse):
* Source/WebCore/css/parser/CSSPropertySyntax.h: Added.

Add a helper.

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

LayoutTests/css-custom-properties-api/inline-expected.txt

@@ -6,10 +6,10 @@ PASS CSS.registerProperty
 PASS Formerly valid values are still readable from inline styles but are computed as the unset value
 PASS Values not matching the registered type can't be set
 PASS Values can be removed from inline styles
-PASS Stylesheets can be modified by CSSOM
-PASS Valid values can be set on inline styles
-PASS Var values are accepted
-PASS Var values are accepted without validation
-PASS Var values are accepted without validation, even when it is obvious they will not parse
-PASS Var values are accepted without validation, even when it is obvious they will not parse (typed)
+FAIL Stylesheets can be modified by CSSOM assert_equals: expected "0px" but got "20px"
+FAIL Valid values can be set on inline styles assert_equals: expected "inherit" but got "30em"
+FAIL Var values are accepted assert_equals: expected "calc(var(--b) + 10px)" but got "30em"
+FAIL Var values are accepted without validation assert_equals: expected "calc(var(--b) + 15px)" but got "30em"
+FAIL Var values are accepted without validation, even when it is obvious they will not parse assert_equals: expected "calc(var(--b) 15px)" but got "30em"
+FAIL Var values are accepted without validation, even when it is obvious they will not parse (typed) assert_equals: expected "calc(var(--registered) 15px)" but got "30em"
 

LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property-syntax-parsing-expected.txt

@@ -1,6 +1,6 @@
 
 PASS syntax:'*', initialValue:'a' is valid
-FAIL syntax:' * ', initialValue:'b' is valid The given initial value does not parse for the given syntax.
+PASS syntax:' * ', initialValue:'b' is valid
 PASS syntax:'<length>', initialValue:'2px' is valid
 FAIL syntax:' <number>', initialValue:'5' is valid The given initial value does not parse for the given syntax.
 FAIL syntax:'<percentage> ', initialValue:'10%' is valid The given initial value does not parse for the given syntax.
@@ -9,9 +9,9 @@ FAIL syntax:' <length>+ | <percentage>', initialValue:'2px 8px' is valid The giv
 FAIL syntax:' <length>+ | <color>#', initialValue:'red, blue' is valid The given initial value does not parse for the given syntax.
 PASS syntax:'<length>|<percentage>|<length-percentage>', initialValue:'2px' is valid
 FAIL syntax:'<color> | <image> | <url> | <integer> | <angle>', initialValue:'red' is valid The given initial value does not parse for the given syntax.
-FAIL syntax:'<time> | <resolution> | <transform-list> | <custom-ident>', initialValue:'red' is valid The given initial value does not parse for the given syntax.
-FAIL syntax:'	<color>
-|   foo', initialValue:'foo' is valid The given initial value does not parse for the given syntax.
+PASS syntax:'<time> | <resolution> | <transform-list> | <custom-ident>', initialValue:'red' is valid
+PASS syntax:'	<color>
+|   foo', initialValue:'foo' is valid
 PASS syntax:'*', initialValue:':> hello' is valid
 PASS syntax:'*', initialValue:'([ brackets ]) { yay (??)}' is valid
 PASS syntax:'*', initialValue:'yep 'this is valid too'' is valid
@@ -26,9 +26,9 @@ PASS syntax:'<length>', initialValue:'calc(7in - 12px)' is valid
 FAIL syntax:'<length>+', initialValue:'2px 7px calc(8px)' is valid The given initial value does not parse for the given syntax.
 FAIL syntax:'<length>#', initialValue:'2px, 7px, calc(8px)' is valid The given initial value does not parse for the given syntax.
 FAIL syntax:'<percentage>', initialValue:'-9.3e3%' is valid The given initial value does not parse for the given syntax.
-FAIL syntax:'<length-percentage>', initialValue:'-54%' is valid The given initial value does not parse for the given syntax.
+PASS syntax:'<length-percentage>', initialValue:'-54%' is valid
 PASS syntax:'<length-percentage>', initialValue:'0' is valid
-FAIL syntax:'<length-percentage>', initialValue:'calc(-11px + 10.4%)' is valid The given initial value does not parse for the given syntax.
+PASS syntax:'<length-percentage>', initialValue:'calc(-11px + 10.4%)' is valid
 PASS syntax:'<length>', initialValue:'10vmin' is valid
 FAIL syntax:'<percentage> | <length>+', initialValue:'calc(100vh - 10px) 30px' is valid The given initial value does not parse for the given syntax.
 FAIL syntax:'<number>', initialValue:'-109' is valid The given initial value does not parse for the given syntax.
@@ -58,44 +58,44 @@ FAIL syntax:'<color>', initialValue:'lightgoldenrodyellow' is valid The given in
 FAIL syntax:'<image>', initialValue:'url(a)' is valid The given initial value does not parse for the given syntax.
 FAIL syntax:'<image>', initialValue:'linear-gradient(yellow, blue)' is valid The given initial value does not parse for the given syntax.
 FAIL syntax:'<url>', initialValue:'url(a)' is valid The given initial value does not parse for the given syntax.
-FAIL syntax:'banana', initialValue:'banana' is valid The given initial value does not parse for the given syntax.
-FAIL syntax:'bAnAnA', initialValue:'bAnAnA' is valid The given initial value does not parse for the given syntax.
-FAIL syntax:'ba-na-nya', initialValue:'ba-na-nya' is valid The given initial value does not parse for the given syntax.
-FAIL syntax:'banana', initialValue:'banan\61' is valid The given initial value does not parse for the given syntax.
-FAIL syntax:'banan\61', initialValue:'banana' is valid The given initial value does not parse for the given syntax.
-FAIL syntax:'<custom-ident>', initialValue:'banan\61' is valid The given initial value does not parse for the given syntax.
-FAIL syntax:'big | bigger | BIGGER', initialValue:'bigger' is valid The given initial value does not parse for the given syntax.
+PASS syntax:'banana', initialValue:'banana' is valid
+PASS syntax:'bAnAnA', initialValue:'bAnAnA' is valid
+PASS syntax:'ba-na-nya', initialValue:'ba-na-nya' is valid
+PASS syntax:'banana', initialValue:'banan\61' is valid
+PASS syntax:'banan\61', initialValue:'banana' is valid
+PASS syntax:'<custom-ident>', initialValue:'banan\61' is valid
+PASS syntax:'big | bigger | BIGGER', initialValue:'bigger' is valid
 FAIL syntax:'foo+|bar', initialValue:'foo foo foo' is valid The given initial value does not parse for the given syntax.
-FAIL syntax:'banana	', initialValue:'banana' is valid The given initial value does not parse for the given syntax.
-FAIL syntax:'
+PASS syntax:'banana	', initialValue:'banana' is valid
+PASS syntax:'
 banana\r
-', initialValue:'banana' is valid The given initial value does not parse for the given syntax.
-FAIL syntax:'ba
-|	na\r|nya', initialValue:'nya' is valid The given initial value does not parse for the given syntax.
-FAIL syntax:'null', initialValue:'null' is valid The given initial value does not parse for the given syntax.
+', initialValue:'banana' is valid
+PASS syntax:'ba
+|	na\r|nya', initialValue:'nya' is valid
+PASS syntax:'null', initialValue:'null' is valid
 PASS syntax:'undefined', initialValue:'undefined' is valid
-FAIL syntax:'array', initialValue:'array' is valid The given initial value does not parse for the given syntax.
-FAIL syntax:'\1F914', initialValue:'🤔' is valid The given initial value does not parse for the given syntax.
-FAIL syntax:'hmm\1F914', initialValue:'hmm🤔' is valid The given initial value does not parse for the given syntax.
-FAIL syntax:'\1F914hmm', initialValue:'🤔hmm' is valid The given initial value does not parse for the given syntax.
-FAIL syntax:'\1F914 hmm', initialValue:'🤔hmm' is valid The given initial value does not parse for the given syntax.
-FAIL syntax:'\1F914\1F914', initialValue:'🤔🤔' is valid The given initial value does not parse for the given syntax.
+PASS syntax:'array', initialValue:'array' is valid
+PASS syntax:'\1F914', initialValue:'🤔' is valid
+PASS syntax:'hmm\1F914', initialValue:'hmm🤔' is valid
+PASS syntax:'\1F914hmm', initialValue:'🤔hmm' is valid
+PASS syntax:'\1F914 hmm', initialValue:'🤔hmm' is valid
+PASS syntax:'\1F914\1F914', initialValue:'🤔🤔' is valid
 PASS syntax:'banana,nya', initialValue:'banana' is invalid
-FAIL syntax:'<\6c ength>', initialValue:'10px' is invalid assert_throws_dom: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+PASS syntax:'<\6c ength>', initialValue:'10px' is invalid
 PASS syntax:'<banana>', initialValue:'banana' is invalid
 PASS syntax:'<Number>', initialValue:'10' is invalid
-FAIL syntax:'<length', initialValue:'10px' is invalid assert_throws_dom: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
-FAIL syntax:'<LENGTH>', initialValue:'10px' is invalid assert_throws_dom: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
-FAIL syntax:'< length>', initialValue:'10px' is invalid assert_throws_dom: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
-FAIL syntax:'<length >', initialValue:'10px' is invalid assert_throws_dom: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
-FAIL syntax:'<length> +', initialValue:'10px' is invalid assert_throws_dom: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+PASS syntax:'<length', initialValue:'10px' is invalid
+PASS syntax:'<LENGTH>', initialValue:'10px' is invalid
+PASS syntax:'< length>', initialValue:'10px' is invalid
+PASS syntax:'<length >', initialValue:'10px' is invalid
+PASS syntax:'<length> +', initialValue:'10px' is invalid
 PASS syntax:'<transform-list>+', initialValue:'scale(2)' is invalid
 PASS syntax:'<transform-list>#', initialValue:'scale(2)' is invalid
-FAIL syntax:'<length>++', initialValue:'10px' is invalid assert_throws_dom: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
-FAIL syntax:'<length>##', initialValue:'10px' is invalid assert_throws_dom: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
-FAIL syntax:'<length>+#', initialValue:'10px' is invalid assert_throws_dom: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
-FAIL syntax:'<length>#+', initialValue:'10px' is invalid assert_throws_dom: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
-FAIL syntax:'<length> | *', initialValue:'10px' is invalid assert_throws_dom: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+PASS syntax:'<length>++', initialValue:'10px' is invalid
+PASS syntax:'<length>##', initialValue:'10px' is invalid
+PASS syntax:'<length>+#', initialValue:'10px' is invalid
+PASS syntax:'<length>#+', initialValue:'10px' is invalid
+PASS syntax:'<length> | *', initialValue:'10px' is invalid
 PASS syntax:'*|banana', initialValue:'banana' is invalid
 PASS syntax:'|banana', initialValue:'banana' is invalid
 PASS syntax:'*+', initialValue:'banana' is invalid
@@ -114,8 +114,8 @@ PASS syntax:'unset', initialValue:'unset' is invalid
 PASS syntax:'revert', initialValue:'revert' is invalid
 PASS syntax:'revert-layer', initialValue:'revert-layer' is invalid
 PASS syntax:'default', initialValue:'default' is invalid
-FAIL syntax:'<length>|initial', initialValue:'10px' is invalid assert_throws_dom: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
-FAIL syntax:'<length>|INHERIT', initialValue:'10px' is invalid assert_throws_dom: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+PASS syntax:'<length>|initial', initialValue:'10px' is invalid
+PASS syntax:'<length>|INHERIT', initialValue:'10px' is invalid
 PASS syntax:'<percentage>|unsEt', initialValue:'2%' is invalid
 PASS syntax:'<color>|REVert', initialValue:'red' is invalid
 PASS syntax:'<integer>|deFAUlt', initialValue:'1' is invalid
@@ -161,15 +161,15 @@ FAIL syntax:'<length>+', initialValue:'' is invalid assert_throws_dom: function
 FAIL syntax:'<length>#', initialValue:'' is invalid assert_throws_dom: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
 PASS syntax:'<length>', initialValue:'10px;' is invalid
 PASS syntax:'<length-percentage>', initialValue:'calc(2px + 10% + 7ex)' is invalid
-FAIL syntax:'<percentage>', initialValue:'0' is invalid assert_throws_dom: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+PASS syntax:'<percentage>', initialValue:'0' is invalid
 PASS syntax:'<integer>', initialValue:'1.0' is invalid
 PASS syntax:'<integer>', initialValue:'1e0' is invalid
 PASS syntax:'<number>|foo', initialValue:'foo var(--foo, bla)' is invalid
 PASS syntax:'Foo | bar', initialValue:'foo' is invalid
 PASS syntax:'Foo | bar', initialValue:'Bar' is invalid
-FAIL syntax:'<angle>', initialValue:'0' is invalid assert_throws_dom: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+PASS syntax:'<angle>', initialValue:'0' is invalid
 PASS syntax:'<angle>', initialValue:'10%' is invalid
-FAIL syntax:'<time>', initialValue:'2px' is invalid assert_throws_dom: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+PASS syntax:'<time>', initialValue:'2px' is invalid
 PASS syntax:'<resolution>', initialValue:'10' is invalid
 PASS syntax:'<transform-function>', initialValue:'scale()' is invalid
 PASS syntax:'<transform-list>', initialValue:'scale()' is invalid

LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-computation-expected.txt

@@ -15,14 +15,14 @@ PASS <length> values are computed correctly [6pc]
 PASS <length> values are computed correctly [72pt]
 PASS <length> values are computed correctly [10lh]
 PASS <length-percentage> values are computed correctly [17em]
-FAIL <length-percentage> values are computed correctly [18%] assert_equals: expected "18%" but got "0px"
-FAIL <length-percentage> values are computed correctly [calc(19em - 2%)] assert_equals: expected "calc(-2% + 190px)" but got "0px"
+PASS <length-percentage> values are computed correctly [18%]
+FAIL <length-percentage> values are computed correctly [calc(19em - 2%)] assert_equals: expected "calc(-2% + 190px)" but got "calc(19em - 2%)"
 FAIL <length># values are computed correctly [10px, 3em] assert_equals: expected "10px, 30px" but got "0px"
 FAIL <length># values are computed correctly [4em ,9px] assert_equals: expected "40px, 9px" but got "0px"
 PASS <length># values are computed correctly [8em]
 FAIL <length-percentage># values are computed correctly [3% , 10vmax  , 22px] assert_equals: expected "3%, 80px, 22px" but got "0px"
 FAIL <length-percentage># values are computed correctly [calc(50% + 1em), 4px] assert_equals: expected "calc(50% + 10px), 4px" but got "0px"
-FAIL <length-percentage># values are computed correctly [calc(13% + 37px)] assert_equals: expected "calc(13% + 37px)" but got "0px"
+PASS <length-percentage># values are computed correctly [calc(13% + 37px)]
 FAIL <length>+ values are computed correctly [10px 3em] assert_equals: expected "10px 30px" but got "0px"
 FAIL <length>+ values are computed correctly [4em 9px] assert_equals: expected "40px 9px" but got "0px"
 FAIL <length-percentage>+ values are computed correctly [3% 10vmax 22px] assert_equals: expected "3% 80px 22px" but got "0px"
@@ -31,12 +31,12 @@ FAIL <transform-function> values are computed correctly [translateX(2px)] The gi
 FAIL <transform-function> values are computed correctly [translateX(10em)] The given initial value does not parse for the given syntax.
 FAIL <transform-function> values are computed correctly [translateX(calc(11em + 10%))] The given initial value does not parse for the given syntax.
 FAIL <transform-function>+ values are computed correctly [translateX(10%) scale(2)] The given initial value does not parse for the given syntax.
-FAIL <integer> values are computed correctly [15] assert_equals: expected "15" but got "0px"
-FAIL <integer> values are computed correctly [calc(15 + 15)] assert_equals: expected "30" but got "0px"
-FAIL <integer> values are computed correctly [calc(2.4)] assert_equals: expected "2" but got "0px"
-FAIL <integer> values are computed correctly [calc(2.6)] assert_equals: expected "3" but got "0px"
-FAIL <integer> values are computed correctly [calc(2.6 + 3.1)] assert_equals: expected "6" but got "0px"
-FAIL <integer>+ values are computed correctly [15 calc(2.4) calc(2.6)] assert_equals: expected "15 2 3" but got "0px"
+FAIL <integer> values are computed correctly [15] The given initial value does not parse for the given syntax.
+FAIL <integer> values are computed correctly [calc(15 + 15)] The given initial value does not parse for the given syntax.
+FAIL <integer> values are computed correctly [calc(2.4)] The given initial value does not parse for the given syntax.
+FAIL <integer> values are computed correctly [calc(2.6)] The given initial value does not parse for the given syntax.
+FAIL <integer> values are computed correctly [calc(2.6 + 3.1)] The given initial value does not parse for the given syntax.
+FAIL <integer>+ values are computed correctly [15 calc(2.4) calc(2.6)] The given initial value does not parse for the given syntax.
 FAIL <color> values are computed correctly [#ff0000] The given initial value does not parse for the given syntax.
 FAIL <color> values are computed correctly [#000f00] The given initial value does not parse for the given syntax.
 FAIL <color> values are computed correctly [#00000a] The given initial value does not parse for the given syntax.
@@ -46,8 +46,8 @@ FAIL <color> values are computed correctly [tomato] The given initial value does
 FAIL <color> values are computed correctly [plum] The given initial value does not parse for the given syntax.
 FAIL <color> values are computed correctly [currentcolor] The given initial value does not parse for the given syntax.
 PASS * values are computed correctly [tomato]
-FAIL tomato | plum values are computed correctly [plum] The given initial value does not parse for the given syntax.
-FAIL tomato | plum | <color> values are computed correctly [plum] The given initial value does not parse for the given syntax.
+PASS tomato | plum values are computed correctly [plum]
+PASS tomato | plum | <color> values are computed correctly [plum]
 PASS * values are computed correctly [-50grad]
 FAIL <angle> values are computed correctly [180deg] The given initial value does not parse for the given syntax.
 FAIL <angle> values are computed correctly [400grad] The given initial value does not parse for the given syntax.