Commit da2ab72e authored by Oriol Brufau's avatar Oriol Brufau Committed by Commit Bot

[css-pseudo] Don't inherit text-indent to ::marker

The CSSWG resolved in https://github.com/w3c/csswg-drafts/issues/4568
that properties like 'text-indent' that don't apply to ::marker, should
not be able to affect the ::marker via inheritance when set to an
ancestor.

Therefore, this patch sets 'text-indent: 0 !important' in UA origin.

Bug: 1031667

TEST=external/wpt/css/css-pseudo/marker-content-023.html
TEST=external/wpt/css/css-pseudo/marker-default-styles.html
TEST=http/tests/devtools/elements/styles-2/pseudo-elements.js

Change-Id: I4dd9e8afd448bd5fe237c084d3c0215e91560dd1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2382750Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Reviewed-by: default avatarKoji Ishii <kojii@chromium.org>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/master@{#803126}
parent 4ce1760b
...@@ -2,4 +2,5 @@ ...@@ -2,4 +2,5 @@
unicode-bidi: isolate; unicode-bidi: isolate;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
text-transform: none; text-transform: none;
text-indent: 0 !important;
} }
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<style>
.disc {
list-style-type: disc;
}
.decimal {
list-style-type: decimal;
}
.string {
list-style-type: "3. ";
}
.content::marker {
content: "4. ";
}
.rtl-marker ::marker {
direction: rtl;
}
</style>
<ol>
<li class="disc"><div>disc</div></li>
<li class="decimal"><div>decimal</div></li>
<li class="string"><div>string</div></li>
<li class="content"><div>content</div></li>
</ol>
<ol class="rtl-marker">
<li class="disc"><div>disc</div></li>
<li class="decimal"><div>decimal</div></li>
<li class="string"><div>string</div></li>
<li class="content"><div>content</div></li>
</ol>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: ::marker pseudo elements styled with 'content' property</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="match" href="marker-content-023-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
<link rel="help" href="https://drafts.csswg.org/css-text/#text-indent-property">
<meta name="assert" content="Checks that 'text-indent' doesn't apply nor inherit to ::marker.">
<style>
li {
text-indent: 100px; /* Should not be inherited by ::marker */
}
::marker {
text-indent: 100px; /* Should have no effect */
}
li > div {
text-indent: 0;
}
.disc {
list-style-type: disc;
}
.decimal {
list-style-type: decimal;
}
.string {
list-style-type: "3. ";
}
.content::marker {
content: "4. ";
}
.rtl-marker ::marker {
direction: rtl;
}
</style>
<ol>
<li class="disc"><div>disc</div></li>
<li class="decimal"><div>decimal</div></li>
<li class="string"><div>string</div></li>
<li class="content"><div>content</div></li>
</ol>
<ol class="rtl-marker">
<li class="disc"><div>disc</div></li>
<li class="decimal"><div>decimal</div></li>
<li class="string"><div>string</div></li>
<li class="content"><div>content</div></li>
</ol>
...@@ -11,7 +11,11 @@ ...@@ -11,7 +11,11 @@
.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 } li {
/* These inheritable properties should not be inherited by ::marker */
text-transform: lowercase;
text-indent: 1px;
}
</style> </style>
<div id="log"></div> <div id="log"></div>
<ul> <ul>
...@@ -32,6 +36,7 @@ const defaultStyles = [ ...@@ -32,6 +36,7 @@ const defaultStyles = [
["unicode-bidi", "isolate"], ["unicode-bidi", "isolate"],
["font-variant-numeric", "tabular-nums"], ["font-variant-numeric", "tabular-nums"],
["text-transform", "none"], ["text-transform", "none"],
["text-indent", "0px"],
]; ];
for (const target of document.querySelectorAll("li")) { for (const target of document.querySelectorAll("li")) {
const cs = getComputedStyle(target, "::marker"); const cs = getComputedStyle(target, "::marker");
......
...@@ -49,6 +49,7 @@ element.style { () ...@@ -49,6 +49,7 @@ element.style { ()
unicode-bidi: isolate; unicode-bidi: isolate;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
text-transform: none; text-transform: none;
text-indent: 0px !important;
Running: dumpBeforeStyles Running: dumpBeforeStyles
...@@ -73,6 +74,7 @@ Running: dumpMarkerStyles ...@@ -73,6 +74,7 @@ Running: dumpMarkerStyles
unicode-bidi: isolate; unicode-bidi: isolate;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
text-transform: none; text-transform: none;
text-indent: 0px !important;
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