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

The CSSWG resolved in w3c/csswg-drafts#4568 that properties like 'text-align' 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-align: start !important' in UA origin. The specific value is not much important, since inside markers are inline boxes unaffected by 'text-align', and outside markers are usually sized with shrink-to-fit. It only matters in case of outside markers whose text contains newline characters, or in quirks mode when the marker is forced to occupy the whole line. Additionally, since 'text-align' has been implemented as a longhand rather than a shorthand of 'text-align-all' and 'text-align-last', this patch also sets 'text-align-last: start !important'. Bug: 1031667 TEST=external/wpt/css/css-pseudo/marker-text-align.html TEST=http/tests/devtools/elements/styles-2/pseudo-elements.js Change-Id: Ibe8d72d4675c5d1e3b0ceedf3acc615e1514fe7d Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2391242 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Reviewed-by: Koji Ishii <kojii@chromium.org> Commit-Queue: Oriol Brufau <obrufau@igalia.com> Cr-Commit-Position: refs/heads/master@{#804347} GitOrigin-RevId: 1d15ab1e2ce7b06f01a8444d7998bdb261a1365b
mjfroman · Sep 3, 2020 · 181ae12 · 181ae12
1 parent 2b1731c
commit 181ae12
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 0 deletions.
diff --git a/blink/renderer/core/css/marker.css b/blink/renderer/core/css/marker.css
@@ -3,4 +3,6 @@
   font-variant-numeric: tabular-nums;
   text-transform: none;
   text-indent: 0 !important;
+  text-align: start !important;
+  text-align-last: start !important;
 }
diff --git a/blink/web_tests/external/wpt/css/css-pseudo/marker-text-align-ref.html b/blink/web_tests/external/wpt/css/css-pseudo/marker-text-align-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: ::marker pseudo elements styled with 'text-align' property</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<style>
+li {
+  /* Should not be inherited by ::marker */
+  text-align: end;
+  text-align-all: end;
+  text-align-last: end;
+}
+::marker {
+  /* Should have no effect */
+  text-align: end;
+  text-align-all: end;
+  text-align-last: end;
+}
+li > div {
+  text-align: initial;
+  text-align-all: initial;
+  text-align-last: initial;
+}
+ol {
+  padding-left: 13ch;
+}
+li {
+  line-height: 16px;
+  height: 32px;
+  white-space: pre;
+}
+.disc {
+  list-style-type: disc;
+}
+.decimal {
+  list-style-type: decimal;
+}
+.string {
+  list-style-type: "[m]\a longtext";
+}
+.content::marker {
+  content: "[m]\a longtext";
+}
+.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/blink/web_tests/external/wpt/css/css-pseudo/marker-text-align.html b/blink/web_tests/external/wpt/css/css-pseudo/marker-text-align.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: ::marker pseudo elements styled with 'text-align' property</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="match" href="marker-text-align-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-align-property">
+<meta name="assert" content="Checks that 'text-align' doesn't apply nor inherit to ::marker.">
+<style>
+li {
+  /* Should not be inherited by ::marker */
+  text-align: start;
+  text-align-all: start;
+  text-align-last: start;
+}
+::marker {
+  /* Should have no effect */
+  text-align: start;
+  text-align-all: start;
+  text-align-last: start;
+}
+li > div {
+  text-align: initial;
+  text-align-all: initial;
+  text-align-last: initial;
+}
+ol {
+  padding-left: 13ch;
+}
+li {
+  line-height: 16px;
+  height: 32px;
+  white-space: pre;
+}
+.disc {
+  list-style-type: disc;
+}
+.decimal {
+  list-style-type: decimal;
+}
+.string {
+  list-style-type: "[m]\a longtext";
+}
+.content::marker {
+  content: "[m]\a longtext";
+}
+.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/blink/web_tests/http/tests/devtools/elements/styles-2/pseudo-elements-expected.txt b/blink/web_tests/http/tests/devtools/elements/styles-2/pseudo-elements-expected.txt
@@ -50,6 +50,8 @@ element.style { ()
     font-variant-numeric: tabular-nums;
     text-transform: none;
     text-indent: 0px !important;
+    text-align: start !important;
+    text-align-last: start !important;
 
 
 Running: dumpBeforeStyles
@@ -75,6 +77,8 @@ Running: dumpMarkerStyles
     font-variant-numeric: tabular-nums;
     text-transform: none;
     text-indent: 0px !important;
+    text-align: start !important;
+    text-align-last: start !important;
 
 
 Running: removeAfter