Skip to content

GitLab

T
tangled
Commit 4409e07e authored by Oriol Brufau's avatar Oriol Brufau Committed by Commit Bot
Browse files
Options

[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/+/2315872Reviewed-by: default avatarKoji Ishii <kojii@chromium.org>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/master@{#791815}
parent 6e6c7b4f
Hide whitespace changes
Inline Side-by-side
Showing with 130 additions and 1 deletion
third_party/blink/renderer/core/css/css_properties.json5
View file @ 4409e07e
...@@ -3735,6 +3735,7 @@ ...@@ -3735,6 +3735,7 @@
typedom_types: ["Keyword"], typedom_types: ["Keyword"],
default_value: "none", default_value: "none",
valid_for_first_letter: true, valid_for_first_letter: true,
valid_for_marker: true,
}, },
{ {
name: "text-underline-offset", name: "text-underline-offset",
......
third_party/blink/renderer/core/css/marker.css
View file @ 4409e07e
::marker { ::marker {
unicode-bidi: isolate; unicode-bidi: isolate;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
text-transform: none;
} }
third_party/blink/web_tests/FlagExpectations/disable-layout-ng
View file @ 4409e07e
...@@ -86,6 +86,7 @@ crbug.com/591099 external/wpt/css/css-position/static-position/vrl-rtl-rtl.html ...@@ -86,6 +86,7 @@ crbug.com/591099 external/wpt/css/css-position/static-position/vrl-rtl-rtl.html
### external/wpt/css/css-pseudo/ ### external/wpt/css/css-pseudo/
crbug.com/1101040 external/wpt/css/css-pseudo/marker-content-016.html [ Failure ] 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/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-default.html [ Failure ]
crbug.com/1012289 external/wpt/css/css-pseudo/marker-unicode-bidi-normal.html [ Failure ] crbug.com/1012289 external/wpt/css/css-pseudo/marker-unicode-bidi-normal.html [ Failure ]
......
third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-default-styles.html
View file @ 4409e07e
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
.decimal { list-style-type: decimal } .decimal { list-style-type: decimal }
.string { list-style-type: "string" } .string { list-style-type: "string" }
.marker::marker { content: "marker" } .marker::marker { content: "marker" }
li { text-transform: lowercase }
</style> </style>
<div id="log"></div> <div id="log"></div>
<ul> <ul>
...@@ -30,6 +31,7 @@ ...@@ -30,6 +31,7 @@
const defaultStyles = [ const defaultStyles = [
["unicode-bidi", "isolate"], ["unicode-bidi", "isolate"],
["font-variant-numeric", "tabular-nums"], ["font-variant-numeric", "tabular-nums"],
["text-transform", "none"],
]; ];
for (const target of document.querySelectorAll("li")) { for (const target of document.querySelectorAll("li")) {
const cs = getComputedStyle(target, "::marker"); const cs = getComputedStyle(target, "::marker");
......
third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-text-transform-default-ref.html 0 → 100644
View file @ 4409e07e
<!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>
third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-text-transform-default.html 0 → 100644
View file @ 4409e07e
<!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>
third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-text-transform-uppercase-ref.html 0 → 100644
View file @ 4409e07e
<!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>
third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-text-transform-uppercase.html 0 → 100644
View file @ 4409e07e
<!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>
third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-expected.txt
View file @ 4409e07e
...@@ -35,6 +35,7 @@ PASS Property transition-delay value '1s' in ::marker ...@@ -35,6 +35,7 @@ PASS Property transition-delay value '1s' in ::marker
PASS Property transition-duration value '2s' in ::marker PASS Property transition-duration value '2s' in ::marker
PASS Property transition-property value 'display' in ::marker PASS Property transition-property value 'display' in ::marker
PASS Property transition-timing-function value 'linear' 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 display value 'none' in ::marker
PASS Property position value 'absolute' in ::marker PASS Property position value 'absolute' in ::marker
PASS Property float value 'right' in ::marker PASS Property float value 'right' in ::marker
......
third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-in-animation-expected.txt
View file @ 4409e07e
This is a testharness.js-based test. 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 in ::marker
PASS Animation of font-family in ::marker PASS Animation of font-family in ::marker
PASS Animation of font-feature-settings in ::marker PASS Animation of font-feature-settings in ::marker
...@@ -22,6 +22,7 @@ PASS Animation of text-combine-upright in ::marker ...@@ -22,6 +22,7 @@ PASS Animation of text-combine-upright in ::marker
PASS Animation of unicode-bidi in ::marker PASS Animation of unicode-bidi in ::marker
PASS Animation of direction in ::marker PASS Animation of direction in ::marker
PASS Animation of content in ::marker PASS Animation of content in ::marker
PASS Animation of text-transform in ::marker
PASS Animation of display in ::marker PASS Animation of display in ::marker
PASS Animation of position in ::marker PASS Animation of position in ::marker
PASS Animation of float in ::marker PASS Animation of float in ::marker
...@@ -52,6 +53,7 @@ PASS Transition of text-combine-upright in ::marker ...@@ -52,6 +53,7 @@ PASS Transition of text-combine-upright in ::marker
PASS Transition of unicode-bidi in ::marker PASS Transition of unicode-bidi in ::marker
PASS Transition of direction in ::marker PASS Transition of direction in ::marker
PASS Transition of content in ::marker PASS Transition of content in ::marker
PASS Transition of text-transform in ::marker
PASS Transition of display in ::marker PASS Transition of display in ::marker
PASS Transition of position in ::marker PASS Transition of position in ::marker
PASS Transition of float in ::marker PASS Transition of float in ::marker
......
third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-in-animation.html
View file @ 4409e07e
...@@ -158,6 +158,14 @@ const interpolationTests = [ ...@@ -158,6 +158,14 @@ const interpolationTests = [
midPoint: "\"bar\"", midPoint: "\"bar\"",
}, },
// ::marker supports `text-transform`
{
property: "text-transform",
from: "lowercase",
to: "uppercase",
midPoint: "uppercase",
},
// ::marker does NOT support layout properties // ::marker does NOT support layout properties
{ {
property: "display", property: "display",
......
third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties.html
View file @ 4409e07e
...@@ -63,6 +63,9 @@ test_pseudo_computed_value("::marker", "transition-duration", "2s"); ...@@ -63,6 +63,9 @@ test_pseudo_computed_value("::marker", "transition-duration", "2s");
test_pseudo_computed_value("::marker", "transition-property", "display"); test_pseudo_computed_value("::marker", "transition-property", "display");
test_pseudo_computed_value("::marker", "transition-timing-function", "linear"); 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 // ::marker does NOT support layout properties
test_pseudo_computed_value("::marker", "display", "none", ["block", "inline", "inline-block"]); test_pseudo_computed_value("::marker", "display", "none", ["block", "inline", "inline-block"]);
test_pseudo_computed_value("::marker", "position", "absolute", "static"); test_pseudo_computed_value("::marker", "position", "absolute", "static");
......
third_party/blink/web_tests/http/tests/devtools/elements/styles-2/pseudo-elements-expected.txt
View file @ 4409e07e
...@@ -48,6 +48,7 @@ element.style { () ...@@ -48,6 +48,7 @@ element.style { ()
[$::marker$] { (user agent stylesheet) [$::marker$] { (user agent stylesheet)
unicode-bidi: isolate; unicode-bidi: isolate;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
text-transform: none;
Running: dumpBeforeStyles Running: dumpBeforeStyles
...@@ -71,6 +72,7 @@ Running: dumpMarkerStyles ...@@ -71,6 +72,7 @@ Running: dumpMarkerStyles
[$::marker$] { (user agent stylesheet) [$::marker$] { (user agent stylesheet)
unicode-bidi: isolate; unicode-bidi: isolate;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
text-transform: none;
Running: removeAfter Running: removeAfter
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment