Parsing of list-style shorthand is incorrect

https://bugs.webkit.org/show_bug.cgi?id=237515

Reviewed by Antti Koivisto.

LayoutTests/imported/w3c:

* web-platform-tests/css/css-lists/parsing/list-style-computed.sub-expected.txt:
* web-platform-tests/css/css-lists/parsing/list-style-valid-expected.txt:
* web-platform-tests/css/css-pseudo/parsing/marker-supported-properties-expected.txt:
* web-platform-tests/css/css-pseudo/parsing/marker-supported-properties-in-animation-expected.txt:
* web-platform-tests/css/cssom/shorthand-values-expected.txt:

Source/WebCore:

The spec at https://drafts.csswg.org/css-lists/#list-style-property says the order of the properties
in the "list-style" shorthand is <'list-style-position'> || <'list-style-image'> || <'list-style-type'>.

Additionally, the "none" value needs special handling such that it sets "list-style-type".

* css/CSSProperties.json:
* css/parser/CSSPropertyParser.cpp:
(WebCore::CSSPropertyParser::parseShorthand):

LayoutTests:

Some non-WPT tests had the wrong assumption on the shorthand order
for list-style, so we update those tests to match the spec.

Additionally, the WPT test css/css-lists/list-style-type-string-004.html now passes.

* fast/css/cssText-shorthand-expected.txt:
* fast/css/cssText-shorthand.html:
* fast/css/getComputedStyle/getComputedStyle-list-style-shorthand-expected.txt:
* fast/css/getComputedStyle/getComputedStyle-list-style-shorthand.html:
* platform/mac/TestExpectations:


Canonical link: https://commits.webkit.org/248115@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@290884 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog

@@ -1,3 +1,21 @@
+2022-03-07  Antoine Quint  <graouts@webkit.org>
+
+        Parsing of list-style shorthand is incorrect
+        https://bugs.webkit.org/show_bug.cgi?id=237515
+
+        Reviewed by Antti Koivisto.
+
+        Some non-WPT tests had the wrong assumption on the shorthand order
+        for list-style, so we update those tests to match the spec.
+
+        Additionally, the WPT test css/css-lists/list-style-type-string-004.html now passes.
+
+        * fast/css/cssText-shorthand-expected.txt:
+        * fast/css/cssText-shorthand.html:
+        * fast/css/getComputedStyle/getComputedStyle-list-style-shorthand-expected.txt:
+        * fast/css/getComputedStyle/getComputedStyle-list-style-shorthand.html:
+        * platform/mac/TestExpectations:
+
 2022-03-07  Matt Woodrow  <mattwoodrow@apple.com>
 
         Compute correct containing block override size for items that are subgridden in one dimension only.

LayoutTests/fast/css/cssText-shorthand-expected.txt

@@ -16,7 +16,7 @@ PASS normalizeCssText(element.style.cssText) is "border: dotted"
 PASS normalizeCssText(element.style.cssText) is "border-width: 1px"
 PASS normalizeCssText(element.style.cssText) is "border-spacing: 1px 2px"
 PASS normalizeCssText(element.style.cssText) is "font-family: sans-serif; font-size: 3em; font-style: italic; font-weight: bold; line-height: 2em"
-PASS normalizeCssText(element.style.cssText) is "list-style: circle inside"
+PASS normalizeCssText(element.style.cssText) is "list-style: inside circle"
 PASS normalizeCssText(element.style.cssText) is "margin: 1px 2px 3px 4px"
 PASS normalizeCssText(element.style.cssText) is "outline: blue dotted 2px"
 PASS normalizeCssText(element.style.cssText) is "overflow: scroll hidden"

LayoutTests/fast/css/cssText-shorthand.html

@@ -28,7 +28,7 @@
     ['font-family: sans-serif; line-height: 2em; font-size: 3em; font-style: italic; font-weight: bold;',
         'font-family: sans-serif; line-height: 2em; font-size: 3em; font-style: italic; font-weight: bold;'],
 
-    ['list-style-type: circle; list-style-position: inside; list-style-image: initial;', 'list-style: circle inside;'],
+    ['list-style-type: circle; list-style-position: inside; list-style-image: initial;', 'list-style: inside circle;'],
     ['margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;', 'margin: 1px 2px 3px 4px;'],
     ['outline-width: 2px; outline-style: dotted; outline-color: blue;', 'outline: blue dotted 2px;'],
     ['overflow-x: scroll; overflow-y: hidden;', 'overflow: scroll hidden;'],

LayoutTests/fast/css/getComputedStyle/getComputedStyle-list-style-shorthand-expected.txt

@@ -3,41 +3,41 @@ Test to make sure list-style shorthand property returns CSSValueList properly.
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
-PASS computedStyle.getPropertyValue('list-style') is 'circle outside url("dummy://test.png")'
+PASS computedStyle.getPropertyValue('list-style') is 'outside url("dummy://test.png") circle'
 PASS computedStyle.getPropertyCSSValue('list-style').toString() is '[object CSSValueList]'
 PASS computedStyle.getPropertyCSSValue('list-style').length is 3
-PASS computedStyle.getPropertyCSSValue('list-style').cssText is 'circle outside url("dummy://test.png")'
-PASS computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue() is 'circle'
-PASS computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue() is 'outside'
-PASS computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue() is 'dummy://test.png'
-PASS computedStyle.getPropertyValue('list-style') is 'disc outside none'
+PASS computedStyle.getPropertyCSSValue('list-style').cssText is 'outside url("dummy://test.png") circle'
+PASS computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue() is 'outside'
+PASS computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue() is 'dummy://test.png'
+PASS computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue() is 'circle'
+PASS computedStyle.getPropertyValue('list-style') is 'outside none disc'
 PASS computedStyle.getPropertyCSSValue('list-style').toString() is '[object CSSValueList]'
 PASS computedStyle.getPropertyCSSValue('list-style').length is 3
-PASS computedStyle.getPropertyCSSValue('list-style').cssText is 'disc outside none'
-PASS computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue() is 'disc'
-PASS computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue() is 'outside'
-PASS computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue() is 'none'
-PASS computedStyle.getPropertyValue('list-style') is 'circle outside none'
+PASS computedStyle.getPropertyCSSValue('list-style').cssText is 'outside none disc'
+PASS computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue() is 'outside'
+PASS computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue() is 'none'
+PASS computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue() is 'disc'
+PASS computedStyle.getPropertyValue('list-style') is 'outside none circle'
 PASS computedStyle.getPropertyCSSValue('list-style').toString() is '[object CSSValueList]'
 PASS computedStyle.getPropertyCSSValue('list-style').length is 3
-PASS computedStyle.getPropertyCSSValue('list-style').cssText is 'circle outside none'
-PASS computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue() is 'circle'
-PASS computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue() is 'outside'
-PASS computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue() is 'none'
-PASS computedStyle.getPropertyValue('list-style') is 'none outside none'
+PASS computedStyle.getPropertyCSSValue('list-style').cssText is 'outside none circle'
+PASS computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue() is 'outside'
+PASS computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue() is 'none'
+PASS computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue() is 'circle'
+PASS computedStyle.getPropertyValue('list-style') is 'outside none none'
 PASS computedStyle.getPropertyCSSValue('list-style').toString() is '[object CSSValueList]'
 PASS computedStyle.getPropertyCSSValue('list-style').length is 3
-PASS computedStyle.getPropertyCSSValue('list-style').cssText is 'none outside none'
-PASS computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue() is 'none'
-PASS computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue() is 'outside'
+PASS computedStyle.getPropertyCSSValue('list-style').cssText is 'outside none none'
+PASS computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue() is 'outside'
+PASS computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue() is 'none'
 PASS computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue() is 'none'
-PASS computedStyle.getPropertyValue('list-style') is 'circle outside url("dummy://test.png")'
+PASS computedStyle.getPropertyValue('list-style') is 'outside url("dummy://test.png") circle'
 PASS computedStyle.getPropertyCSSValue('list-style').toString() is '[object CSSValueList]'
 PASS computedStyle.getPropertyCSSValue('list-style').length is 3
-PASS computedStyle.getPropertyCSSValue('list-style').cssText is 'circle outside url("dummy://test.png")'
-PASS computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue() is 'circle'
-PASS computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue() is 'outside'
-PASS computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue() is 'dummy://test.png'
+PASS computedStyle.getPropertyCSSValue('list-style').cssText is 'outside url("dummy://test.png") circle'
+PASS computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue() is 'outside'
+PASS computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue() is 'dummy://test.png'
+PASS computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue() is 'circle'
 PASS successfullyParsed is true
 
 TEST COMPLETE

LayoutTests/fast/css/getComputedStyle/getComputedStyle-list-style-shorthand.html

@@ -19,53 +19,53 @@
 computedStyle = window.getComputedStyle(e, null);
 
 e.style.listStyle = "circle outside url(dummy://test.png)";
-shouldBe("computedStyle.getPropertyValue('list-style')", "'circle outside url(\"dummy://test.png\")'");
+shouldBe("computedStyle.getPropertyValue('list-style')", "'outside url(\"dummy://test.png\") circle'");
 shouldBe("computedStyle.getPropertyCSSValue('list-style').toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('list-style').length", "3");
-shouldBe("computedStyle.getPropertyCSSValue('list-style').cssText", "'circle outside url(\"dummy://test.png\")'");
-shouldBe("computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue()", "'circle'");
-shouldBe("computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue()", "'outside'");
-shouldBe("computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue()", "'dummy://test.png'");
+shouldBe("computedStyle.getPropertyCSSValue('list-style').cssText", "'outside url(\"dummy://test.png\") circle'");
+shouldBe("computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue()", "'outside'");
+shouldBe("computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue()", "'dummy://test.png'");
+shouldBe("computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue()", "'circle'");
 
 e.style.listStyle = ""
 e.style.listStyle = "a b c";
-shouldBe("computedStyle.getPropertyValue('list-style')", "'disc outside none'");
+shouldBe("computedStyle.getPropertyValue('list-style')", "'outside none disc'");
 shouldBe("computedStyle.getPropertyCSSValue('list-style').toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('list-style').length", "3");
-shouldBe("computedStyle.getPropertyCSSValue('list-style').cssText", "'disc outside none'");
-shouldBe("computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue()", "'disc'");
-shouldBe("computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue()", "'outside'");
-shouldBe("computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue()", "'none'");
+shouldBe("computedStyle.getPropertyCSSValue('list-style').cssText", "'outside none disc'");
+shouldBe("computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue()", "'outside'");
+shouldBe("computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue()", "'none'");
+shouldBe("computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue()", "'disc'");
 
 e.style.listStyle = "circle outside";
-shouldBe("computedStyle.getPropertyValue('list-style')", "'circle outside none'")
+shouldBe("computedStyle.getPropertyValue('list-style')", "'outside none circle'")
 shouldBe("computedStyle.getPropertyCSSValue('list-style').toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('list-style').length", "3");
-shouldBe("computedStyle.getPropertyCSSValue('list-style').cssText", "'circle outside none'");
-shouldBe("computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue()", "'circle'");
-shouldBe("computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue()", "'outside'");
-shouldBe("computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue()", "'none'");
+shouldBe("computedStyle.getPropertyCSSValue('list-style').cssText", "'outside none circle'");
+shouldBe("computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue()", "'outside'");
+shouldBe("computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue()", "'none'");
+shouldBe("computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue()", "'circle'");
 
 e.style.listStyle = "none";
-shouldBe("computedStyle.getPropertyValue('list-style')", "'none outside none'")
+shouldBe("computedStyle.getPropertyValue('list-style')", "'outside none none'")
 shouldBe("computedStyle.getPropertyCSSValue('list-style').toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('list-style').length", "3");
-shouldBe("computedStyle.getPropertyCSSValue('list-style').cssText", "'none outside none'");
-shouldBe("computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue()", "'none'");
-shouldBe("computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue()", "'outside'");
+shouldBe("computedStyle.getPropertyCSSValue('list-style').cssText", "'outside none none'");
+shouldBe("computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue()", "'outside'");
+shouldBe("computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue()", "'none'");
 shouldBe("computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue()", "'none'");
 
 e.style.listStyle = "";
 e.style.listStyleType = "circle";
 e.style.listStylePosition = "outside";
 e.style.listStyleImage = "url(dummy://test.png)";
-shouldBe("computedStyle.getPropertyValue('list-style')", "'circle outside url(\"dummy://test.png\")'");
+shouldBe("computedStyle.getPropertyValue('list-style')", "'outside url(\"dummy://test.png\") circle'");
 shouldBe("computedStyle.getPropertyCSSValue('list-style').toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('list-style').length", "3");
-shouldBe("computedStyle.getPropertyCSSValue('list-style').cssText", "'circle outside url(\"dummy://test.png\")'");
-shouldBe("computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue()", "'circle'");
-shouldBe("computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue()", "'outside'");
-shouldBe("computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue()", "'dummy://test.png'");
+shouldBe("computedStyle.getPropertyCSSValue('list-style').cssText", "'outside url(\"dummy://test.png\") circle'");
+shouldBe("computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue()", "'outside'");
+shouldBe("computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue()", "'dummy://test.png'");
+shouldBe("computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue()", "'circle'");
 
 document.body.removeChild(testContainer);
 

LayoutTests/imported/w3c/ChangeLog

@@ -1,3 +1,16 @@
+2022-03-07  Antoine Quint  <graouts@webkit.org>
+
+        Parsing of list-style shorthand is incorrect
+        https://bugs.webkit.org/show_bug.cgi?id=237515
+
+        Reviewed by Antti Koivisto.
+
+        * web-platform-tests/css/css-lists/parsing/list-style-computed.sub-expected.txt:
+        * web-platform-tests/css/css-lists/parsing/list-style-valid-expected.txt:
+        * web-platform-tests/css/css-pseudo/parsing/marker-supported-properties-expected.txt:
+        * web-platform-tests/css/css-pseudo/parsing/marker-supported-properties-in-animation-expected.txt:
+        * web-platform-tests/css/cssom/shorthand-values-expected.txt:
+
 2022-03-07  Matt Woodrow  <mattwoodrow@apple.com>
 
         Compute correct containing block override size for items that are subgridden in one dimension only.

LayoutTests/imported/w3c/web-platform-tests/css/css-lists/parsing/list-style-computed.sub-expected.txt

@@ -1,7 +1,7 @@
 
-FAIL Property list-style value 'none' assert_equals: expected "outside none none" but got "none outside none"
-FAIL Property list-style value 'inside' assert_equals: expected "inside none disc" but got "disc inside none"
-FAIL Property list-style value 'url("https://localhost/")' assert_equals: expected "outside url(\"https://localhost/\") disc" but got "disc outside url(\"https://localhost/\")"
-FAIL Property list-style value 'square' assert_equals: expected "outside none square" but got "square outside none"
-FAIL Property list-style value 'inside url("https://localhost/") square' assert_equals: expected "inside url(\"https://localhost/\") square" but got "square inside url(\"https://localhost/\")"
+PASS Property list-style value 'none'
+PASS Property list-style value 'inside'
+PASS Property list-style value 'url("https://localhost/")'
+PASS Property list-style value 'square'
+PASS Property list-style value 'inside url("https://localhost/") square'
 

LayoutTests/imported/w3c/web-platform-tests/css/css-lists/parsing/list-style-valid-expected.txt

@@ -3,5 +3,5 @@ PASS e.style['list-style'] = "none" should set the property value
 PASS e.style['list-style'] = "inside" should set the property value
 PASS e.style['list-style'] = "url(\"https://example.com/\")" should set the property value
 PASS e.style['list-style'] = "square" should set the property value
-FAIL e.style['list-style'] = "square url(\"https://example.com/\") inside" should set the property value assert_equals: serialization should be canonical expected "inside url(\"https://example.com/\") square" but got "square inside url(\"https://example.com/\")"
+PASS e.style['list-style'] = "square url(\"https://example.com/\") inside" should set the property value
 

LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/parsing/marker-supported-properties-expected.txt

@@ -57,7 +57,7 @@ PASS Property text-shadow value 'rgb(0, 255, 0) 1px 2px 3px' in ::marker
 PASS Property display value 'none' in ::marker
 PASS Property position value 'absolute' in ::marker
 PASS Property float value 'right' in ::marker
-FAIL Property list-style value 'inside url('foo') decimal' in ::marker assert_equals: expected "outside none disc" but got "disc outside none"
+PASS Property list-style value 'inside url('foo') decimal' in ::marker
 PASS Property list-style-image value 'url('foo')' in ::marker
 PASS Property list-style-position value 'inside' in ::marker
 PASS Property list-style-type value 'decimal' in ::marker

LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/parsing/marker-supported-properties-in-animation-expected.txt

@@ -42,7 +42,7 @@ PASS Animation of text-shadow in ::marker
 PASS Animation of display in ::marker
 PASS Animation of position in ::marker
 PASS Animation of float in ::marker
-FAIL Animation of list-style in ::marker assert_equals: expected "outside none disc" but got "disc outside none"
+PASS Animation of list-style in ::marker
 PASS Animation of list-style-image in ::marker
 PASS Animation of list-style-position in ::marker
 PASS Animation of list-style-type in ::marker
@@ -89,7 +89,7 @@ PASS Transition of text-shadow in ::marker
 PASS Transition of display in ::marker
 PASS Transition of position in ::marker
 PASS Transition of float in ::marker
-FAIL Transition of list-style in ::marker assert_equals: expected "outside none disc" but got "disc outside none"
+PASS Transition of list-style in ::marker
 PASS Transition of list-style-image in ::marker
 PASS Transition of list-style-position in ::marker
 PASS Transition of list-style-type in ::marker

LayoutTests/imported/w3c/web-platform-tests/css/cssom/shorthand-values-expected.txt

@@ -14,7 +14,7 @@ PASS The serialization of overflow-x: scroll; overflow-y: hidden; should be cano
 PASS The serialization of overflow-x: scroll; overflow-y: scroll; should be canonical.
 PASS The serialization of outline-width: 2px; outline-style: dotted; outline-color: blue; should be canonical.
 PASS The serialization of margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px; should be canonical.
-FAIL The serialization of list-style-type: circle; list-style-position: inside; list-style-image: initial; should be canonical. assert_equals: expected "list-style: inside circle;" but got "list-style: circle inside;"
+PASS The serialization of list-style-type: circle; list-style-position: inside; list-style-image: initial; should be canonical.
 PASS The serialization of list-style-type: lower-alpha; should be canonical.
 PASS The serialization of font-family: sans-serif; line-height: 2em; font-size: 3em; font-style: italic; font-weight: bold; should be canonical.
 PASS The serialization of padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px; should be canonical.

LayoutTests/platform/mac/TestExpectations

@@ -2002,7 +2002,6 @@ webkit.org/b/222425 [ BigSur+ ] http/tests/media/hls/hls-hdr-switch.html [ Timeo
 
 # These tests fail in Mac due to subpixel differences for the marker position
 imported/w3c/web-platform-tests/css/css-lists/list-style-type-string-002.html [ ImageOnlyFailure ]
-imported/w3c/web-platform-tests/css/css-lists/list-style-type-string-004.html [ ImageOnlyFailure ]
 
 webkit.org/b/217461 [ Mojave+ ] imported/w3c/web-platform-tests/css/css-masking/clip-path/svg-clipPath.svg [ Skip ]