[css-pseudo] Support text-transform in ::marker
In https://github.com/w3c/csswg-drafts/issues/4206, the CSSWG resolved
that the 'text-transform' property should apply to ::marker, and that
by default it should be set to 'none' in the UA stylesheet.
This patch implements these changes.
Note that setting it to 'none' is an observable change in LayoutNG,
since it prevents the ::marker from inheriting the 'text-transform' of
the list item. This was considered a better behavior by the CSSWG, and
it's the behavior that legacy layout already had.
LayoutListMarker, used for ::marker with 'content: normal' in legacy
layout, doesn't implement the marker text as actual text. Therefore,
'text-transform' has no effect.
Bug: 1031667
TEST=external/wpt/css/css-pseudo/marker-default-styles.html
TEST=external/wpt/css/css-pseudo/marker-text-transform-default.html
TEST=external/wpt/css/css-pseudo/marker-text-transform-uppercase.html
TEST=external/wpt/css/css-pseudo/parsing/marker-supported-properties-in-animation.html
TEST=external/wpt/css/css-pseudo/parsing/marker-supported-properties.html
TEST=http/tests/devtools/elements/styles-2/pseudo-elements.js
Change-Id: I2c2b554f521139fabb502856fedc6230aa45c787
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2315872
Reviewed-by: Koji Ishii <kojii@chromium.org>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/master@{#791815}
diff --git a/third_party/blink/renderer/core/css/css_properties.json5 b/third_party/blink/renderer/core/css/css_properties.json5
index 58eb5110..9cc0e38 100644
--- a/third_party/blink/renderer/core/css/css_properties.json5
+++ b/third_party/blink/renderer/core/css/css_properties.json5
@@ -3735,6 +3735,7 @@
typedom_types: ["Keyword"],
default_value: "none",
valid_for_first_letter: true,
+ valid_for_marker: true,
},
{
name: "text-underline-offset",
diff --git a/third_party/blink/renderer/core/css/marker.css b/third_party/blink/renderer/core/css/marker.css
index 58ec8f1..1d1b030 100644
--- a/third_party/blink/renderer/core/css/marker.css
+++ b/third_party/blink/renderer/core/css/marker.css
@@ -1,4 +1,5 @@
::marker {
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
+ text-transform: none;
}
diff --git a/third_party/blink/web_tests/FlagExpectations/disable-layout-ng b/third_party/blink/web_tests/FlagExpectations/disable-layout-ng
index b64b385e..bb78c37 100644
--- a/third_party/blink/web_tests/FlagExpectations/disable-layout-ng
+++ b/third_party/blink/web_tests/FlagExpectations/disable-layout-ng
@@ -86,6 +86,7 @@
### external/wpt/css/css-pseudo/
crbug.com/1101040 external/wpt/css/css-pseudo/marker-content-016.html [ Failure ]
crbug.com/1101034 external/wpt/css/css-pseudo/marker-content-018.html [ Failure ]
+crbug.com/1108830 external/wpt/css/css-pseudo/marker-text-transform-uppercase.html [ Failure ]
crbug.com/1012289 external/wpt/css/css-pseudo/marker-unicode-bidi-default.html [ Failure ]
crbug.com/1012289 external/wpt/css/css-pseudo/marker-unicode-bidi-normal.html [ Failure ]
diff --git a/third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-default-styles.html b/third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-default-styles.html
index 05da6f8..865a2d0 100644
--- a/third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-default-styles.html
+++ b/third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-default-styles.html
@@ -11,6 +11,7 @@
.decimal { list-style-type: decimal }
.string { list-style-type: "string" }
.marker::marker { content: "marker" }
+li { text-transform: lowercase }
</style>
<div id="log"></div>
<ul>
@@ -30,6 +31,7 @@
const defaultStyles = [
["unicode-bidi", "isolate"],
["font-variant-numeric", "tabular-nums"],
+ ["text-transform", "none"],
];
for (const target of document.querySelectorAll("li")) {
const cs = getComputedStyle(target, "::marker");
diff --git a/third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-text-transform-default-ref.html b/third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-text-transform-default-ref.html
new file mode 100644
index 0000000..ceec36d
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-text-transform-default-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<style>
+.outside { list-style-position: outside }
+.inside { list-style-position: inside }
+.type-roman { list-style-type: lower-roman }
+.type-string { list-style-type: "ii. " }
+.content-counter::marker { content: counter(list-item, lower-roman) ". " }
+.content-string::marker { content: "iv. " }
+</style>
+<ol class="outside">
+ <li class="type-roman">TYPE-ROMAN</li>
+ <li class="type-string">TYPE-STRING</li>
+ <li class="content-counter">CONTENT-COUNTER</li>
+ <li class="content-string">CONTENT-STRING</li>
+</ol>
+<ol class="inside">
+ <li class="type-roman">TYPE-ROMAN</li>
+ <li class="type-string">TYPE-STRING</li>
+ <li class="content-counter">CONTENT-COUNTER</li>
+ <li class="content-string">CONTENT-STRING</li>
+</ol>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-text-transform-default.html b/third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-text-transform-default.html
new file mode 100644
index 0000000..922c5b0d
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-text-transform-default.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>::marker has 'text-transform: none' by default</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
+<link rel="match" href="marker-text-transform-default-ref.html">
+<meta name="assert" content="Checks that ::marker does not inherit the text-transform of the list item">
+<style>
+.outside { list-style-position: outside }
+.inside { list-style-position: inside }
+.type-roman { list-style-type: lower-roman }
+.type-string { list-style-type: "ii. " }
+.content-counter::marker { content: counter(list-item, lower-roman) ". " }
+.content-string::marker { content: "iv. " }
+li {
+ text-transform: uppercase;
+}
+</style>
+<ol class="outside">
+ <li class="type-roman">type-roman</li>
+ <li class="type-string">type-string</li>
+ <li class="content-counter">content-counter</li>
+ <li class="content-string">content-string</li>
+</ol>
+<ol class="inside">
+ <li class="type-roman">type-roman</li>
+ <li class="type-string">type-string</li>
+ <li class="content-counter">content-counter</li>
+ <li class="content-string">content-string</li>
+</ol>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-text-transform-uppercase-ref.html b/third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-text-transform-uppercase-ref.html
new file mode 100644
index 0000000..6f959da
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-text-transform-uppercase-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<style>
+.outside { list-style-position: outside }
+.inside { list-style-position: inside }
+.type-roman { list-style-type: upper-roman }
+.type-string { list-style-type: "II. " }
+.content-counter::marker { content: counter(list-item, upper-roman) ". " }
+.content-string::marker { content: "IV. " }
+</style>
+<ol class="outside">
+ <li class="type-roman">type-roman</li>
+ <li class="type-string">type-string</li>
+ <li class="content-counter">content-counter</li>
+ <li class="content-string">content-string</li>
+</ol>
+<ol class="inside">
+ <li class="type-roman">type-roman</li>
+ <li class="type-string">type-string</li>
+ <li class="content-counter">content-counter</li>
+ <li class="content-string">content-string</li>
+</ol>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-text-transform-uppercase.html b/third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-text-transform-uppercase.html
new file mode 100644
index 0000000..d77f4e7
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-text-transform-uppercase.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>::marker accepts 'text-transform: uppercase'</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
+<link rel="match" href="marker-text-transform-uppercase-ref.html">
+<meta name="assert" content="Checks that the marker default 'text-transform: none' can be overridden with 'text-transform: uppercase'">
+<style>
+.outside { list-style-position: outside }
+.inside { list-style-position: inside }
+.type-roman { list-style-type: lower-roman }
+.type-string { list-style-type: "ii. " }
+.content-counter::marker { content: counter(list-item, lower-roman) ". " }
+.content-string::marker { content: "iv. " }
+::marker {
+ text-transform: uppercase;
+}
+</style>
+<ol class="outside">
+ <li class="type-roman">type-roman</li>
+ <li class="type-string">type-string</li>
+ <li class="content-counter">content-counter</li>
+ <li class="content-string">content-string</li>
+</ol>
+<ol class="inside">
+ <li class="type-roman">type-roman</li>
+ <li class="type-string">type-string</li>
+ <li class="content-counter">content-counter</li>
+ <li class="content-string">content-string</li>
+</ol>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-expected.txt b/third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-expected.txt
index 79c4baa..f84471ff 100644
--- a/third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-expected.txt
+++ b/third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-expected.txt
@@ -35,6 +35,7 @@
PASS Property transition-duration value '2s' in ::marker
PASS Property transition-property value 'display' in ::marker
PASS Property transition-timing-function value 'linear' in ::marker
+PASS Property text-transform value 'uppercase' in ::marker
PASS Property display value 'none' in ::marker
PASS Property position value 'absolute' in ::marker
PASS Property float value 'right' in ::marker
diff --git a/third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-in-animation-expected.txt b/third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-in-animation-expected.txt
index 8926c19..72f0fb51 100644
--- a/third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-in-animation-expected.txt
+++ b/third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-in-animation-expected.txt
@@ -1,5 +1,5 @@
This is a testharness.js-based test.
-Found 60 tests; 54 PASS, 6 FAIL, 0 TIMEOUT, 0 NOTRUN.
+Found 62 tests; 56 PASS, 6 FAIL, 0 TIMEOUT, 0 NOTRUN.
PASS Animation of font in ::marker
PASS Animation of font-family in ::marker
PASS Animation of font-feature-settings in ::marker
@@ -22,6 +22,7 @@
PASS Animation of unicode-bidi in ::marker
PASS Animation of direction in ::marker
PASS Animation of content in ::marker
+PASS Animation of text-transform in ::marker
PASS Animation of display in ::marker
PASS Animation of position in ::marker
PASS Animation of float in ::marker
@@ -52,6 +53,7 @@
PASS Transition of unicode-bidi in ::marker
PASS Transition of direction in ::marker
PASS Transition of content in ::marker
+PASS Transition of text-transform in ::marker
PASS Transition of display in ::marker
PASS Transition of position in ::marker
PASS Transition of float in ::marker
diff --git a/third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-in-animation.html b/third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-in-animation.html
index faf7c90..bc26e202 100644
--- a/third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-in-animation.html
+++ b/third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-in-animation.html
@@ -158,6 +158,14 @@
midPoint: "\"bar\"",
},
+ // ::marker supports `text-transform`
+ {
+ property: "text-transform",
+ from: "lowercase",
+ to: "uppercase",
+ midPoint: "uppercase",
+ },
+
// ::marker does NOT support layout properties
{
property: "display",
diff --git a/third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties.html b/third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties.html
index e27decc..669d040 100644
--- a/third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties.html
+++ b/third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties.html
@@ -63,6 +63,9 @@
test_pseudo_computed_value("::marker", "transition-property", "display");
test_pseudo_computed_value("::marker", "transition-timing-function", "linear");
+// ::marker supports `text-transform`
+test_pseudo_computed_value("::marker", "text-transform", "uppercase");
+
// ::marker does NOT support layout properties
test_pseudo_computed_value("::marker", "display", "none", ["block", "inline", "inline-block"]);
test_pseudo_computed_value("::marker", "position", "absolute", "static");
diff --git a/third_party/blink/web_tests/http/tests/devtools/elements/styles-2/pseudo-elements-expected.txt b/third_party/blink/web_tests/http/tests/devtools/elements/styles-2/pseudo-elements-expected.txt
index f106fa1..524eb23 100644
--- a/third_party/blink/web_tests/http/tests/devtools/elements/styles-2/pseudo-elements-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/styles-2/pseudo-elements-expected.txt
@@ -48,6 +48,7 @@
[$::marker$] { (user agent stylesheet)
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
+ text-transform: none;
Running: dumpBeforeStyles
@@ -71,6 +72,7 @@
[$::marker$] { (user agent stylesheet)
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
+ text-transform: none;
Running: removeAfter
