Skip to content
Permalink
Browse files
[@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
  • Loading branch information
anttijk committed Dec 8, 2022
1 parent 5f18c2a commit be0b82ecc746352ee8b2d7f8e14b6a3e8d0253d2
Show file tree
Hide file tree
Showing 14 changed files with 427 additions and 178 deletions.
@@ -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"

@@ -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
@@ -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.

0 comments on commit be0b82e

Please sign in to comment.