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

The CSSWG resolved in w3c/csswg-drafts#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/+/2382750 Reviewed-by: Rune Lillesveen <[email protected]> Reviewed-by: Koji Ishii <[email protected]> Commit-Queue: Oriol Brufau <[email protected]> Cr-Commit-Position: refs/heads/master@{#803126}
web-platform-tests · Aug 31, 2020 · 0bd1e7f · 0bd1e7f
1 parent 15ff58a
commit 0bd1e7f
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 1 deletion.
diff --git a/css/css-pseudo/marker-content-023-ref.html b/css/css-pseudo/marker-content-023-ref.html
@@ -0,0 +1,33 @@
+<!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:[email protected]">
+<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>
diff --git a/css/css-pseudo/marker-content-023.html b/css/css-pseudo/marker-content-023.html
@@ -0,0 +1,46 @@
+<!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:[email protected]">
+<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>
diff --git a/css/css-pseudo/marker-default-styles.html b/css/css-pseudo/marker-default-styles.html
@@ -11,7 +11,11 @@
 .decimal { list-style-type: decimal }
 .string { list-style-type: "string" }
 .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>
 <div id="log"></div>
 <ul>
@@ -32,6 +36,7 @@
   ["unicode-bidi", "isolate"],
   ["font-variant-numeric", "tabular-nums"],
   ["text-transform", "none"],
+  ["text-indent", "0px"],
 ];
 for (const target of document.querySelectorAll("li")) {
   const cs = getComputedStyle(target, "::marker");