[css-pseudo] Properly set 'display: inline-block' to outside ::marker
Before this patch, outside markers were assigned 'display: inline-block'
but this happened in two different places: in LayoutNGListItem for
markers with 'content: normal', and in StyleAdjuster for content ones.
However, this meant that 'getComputedStyle(el, "::marker").display'
would be 'inline' in the former case and 'inline-block' in the latter.
This patch fixes that issue by ensuring that StyleAdjuster runs for all
markers, assigning 'display: inline-block' to outside ones even when
'content: normal'.
This has a noticeable effect even if the CSSMarkerPseudoElement flag is
disabled: text decorations are no longer propagated to outside markers.
This is actually expected, since decorations shouldn't be propagated to
inline-block descendants. They were being propagated for markers with
'content: normal' because the code that stops the propagation either
wasn't running for unstyled markers, or for styled normal markers it was
running before 'display: inline-block' was assigned.
This change won't be a compat problem since none of Chromium legacy,
Firefox and Edge propagate text decorations to outside markers by
default. Doing it seemed a LayoutNG bug.
Spec: https://drafts.csswg.org/css-pseudo-4/#marker-pseudo
Spec: https://drafts.csswg.org/css-lists/#list-style-position
Spec: https://drafts.csswg.org/css-text-decor-4/#line-decoration
BUG=457718
TEST=external/wpt/css/css-pseudo/marker-content-016.html
TEST=external/wpt/css/css-pseudo/marker-display-computed.html
The marker-content-016 test fails in legacy since the 'content' property
is not supported yet in ::marker
Change-Id: Ia1396a4f6c5d9825dba5a6265c32096a7066fbed
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1975887
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/master@{#726783}
diff --git a/css/css-pseudo/marker-content-016-ref.html b/css/css-pseudo/marker-content-016-ref.html
new file mode 100644
index 0000000..9630497
--- /dev/null
+++ b/css/css-pseudo/marker-content-016-ref.html
@@ -0,0 +1,18 @@
+<!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>
+ol {
+ list-style-type: "[marker]";
+ text-decoration: underline;
+ padding-left: 100px;
+}
+.inside {
+ list-style-position: inside;
+}
+</style>
+<ol>
+ <li class="outside">outside</li>
+ <li class="inside">inside</li>
+</ol>
diff --git a/css/css-pseudo/marker-content-016.html b/css/css-pseudo/marker-content-016.html
new file mode 100644
index 0000000..9a0585d
--- /dev/null
+++ b/css/css-pseudo/marker-content-016.html
@@ -0,0 +1,24 @@
+<!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-016-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-decor-4/#line-decoration">
+<meta name="assert" content="Checks that the 'content' property of a ::marker doesn't affect the propagation of text decorations.">
+<style>
+::marker {
+ content: "[marker]";
+}
+ol {
+ text-decoration: underline;
+ padding-left: 100px;
+}
+.inside {
+ list-style-position: inside;
+}
+</style>
+<ol>
+ <li class="outside">outside</li>
+ <li class="inside">inside</li>
+</ol>
diff --git a/css/css-pseudo/marker-display-computed.html b/css/css-pseudo/marker-display-computed.html
new file mode 100644
index 0000000..089f0fb
--- /dev/null
+++ b/css/css-pseudo/marker-display-computed.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Supported properties in ::marker</title>
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
+<link rel="help" href="https://drafts.csswg.org/css-lists/#list-style-position">
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<meta name="assert" content="This test checks the computed 'display' value of ::marker pseudo-elements." />
+<style>
+.inside {
+ list-style-position: inside;
+}
+.color::marker {
+ color: blue;
+}
+.string {
+ list-style-type: "string";
+}
+.content::marker {
+ content: "content";
+}
+</style>
+<div id="log"></div>
+<ol class="inside">
+ <li class="default">item</li>
+ <li class="color">item</li>
+ <li class="string">item</li>
+ <li class="content">item</li>
+</ol>
+<ol class="outside">
+ <li class="default">item</li>
+ <li class="color">item</li>
+ <li class="string">item</li>
+ <li class="content">item</li>
+</ol>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<script>
+const inside = document.querySelectorAll(".inside > li");
+for (const target of inside) {
+ const {display} = getComputedStyle(target, "::marker");
+ test(() => {
+ assert_equals(display, "inline", "Inside markers should be inline");
+ }, `Computed 'display' for inside ::marker, variant ${target.className}`);
+}
+
+const outside = document.querySelectorAll(".outside > li");
+const firstDisplay = getComputedStyle(outside[0], "::marker").display;
+for (const target of outside) {
+ const {display} = getComputedStyle(target, "::marker");
+ test(() => {
+ assert_in_array(display, ["inline-block", "block"], "Outside markers should be block containers");
+ assert_equals(display, firstDisplay, "The 'display' value shouldn't vary");
+ }, `Computed 'display' for outside ::marker, variant ${target.className}`);
+}
+</script>
diff --git a/css/css-pseudo/parsing/marker-supported-properties.html b/css/css-pseudo/parsing/marker-supported-properties.html
index 0ffd6f4..7f8eacb 100644
--- a/css/css-pseudo/parsing/marker-supported-properties.html
+++ b/css/css-pseudo/parsing/marker-supported-properties.html
@@ -46,7 +46,7 @@
test_pseudo_computed_value("::marker", "content", "\"foo\"");
// ::marker does NOT support layout properties
-test_pseudo_computed_value("::marker", "display", "none", ["block", "inline"]);
+test_pseudo_computed_value("::marker", "display", "none", ["block", "inline", "inline-block"]);
test_pseudo_computed_value("::marker", "position", "absolute", "static");
test_pseudo_computed_value("::marker", "float", "right", "none");
