[css-pseudo] Apply ::marker styles to markers

Currently markers are assigned a mostly empty style, it just inherits
from the list item and has some customizations like `display`.

This patch makes them use the style of the ::marker pseudo-element.
The inheritance is also from the list item, and the customizations are
applied afterwards.

The change only affects markers originated by real elements. Markers
originated by ::before or ::after pseudo-elements should get the styles
from ::before::marker or ::after::marker, but this will be addressed in
a follow-up patch.

Spec: https://drafts.csswg.org/css-pseudo-4/#marker-pseudo

BUG=457718

TEST=external/wpt/css/css-pseudo/marker-and-other-pseudo-elements.html
TEST=external/wpt/css/css-pseudo/marker-color.html
TEST=external/wpt/css/css-pseudo/marker-font-properties.html

Change-Id: Ide2fbc344e4732257044ebd3e7966906af21c434
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1893265Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/master@{#711883}

third_party/blink/renderer/core/layout/layout_list_marker.cc

@@ -536,10 +536,20 @@ LayoutRect LayoutListMarker::RelativeSymbolMarkerRect(
 }
 
 void LayoutListMarker::ListItemStyleDidChange() {
-  scoped_refptr<ComputedStyle> new_style = ComputedStyle::Create();
-  // The marker always inherits from the list item, regardless of where it might
-  // end up (e.g., in some deeply nested line box). See CSS3 spec.
-  new_style->InheritFrom(list_item_->StyleRef());
+  Node* list_item = list_item_->GetNode();
+  const ComputedStyle* cached_marker_style =
+      list_item->IsPseudoElement()
+          ? nullptr
+          : ToElement(list_item)->CachedStyleForPseudoElement(kPseudoIdMarker);
+  scoped_refptr<ComputedStyle> new_style;
+  if (cached_marker_style) {
+    new_style = ComputedStyle::Clone(*cached_marker_style);
+  } else {
+    // The marker always inherits from the list item, regardless of where it
+    // might end up (e.g., in some deeply nested line box). See CSS3 spec.
+    new_style = ComputedStyle::Create();
+    new_style->InheritFrom(list_item_->StyleRef());
+  }
   if (Style()) {
     // Reuse the current margins. Otherwise resetting the margins to initial
     // values would trigger unnecessary layout.

third_party/blink/renderer/core/layout/layout_object.cc

@@ -1942,6 +1942,7 @@ void LayoutObject::SetPseudoElementStyle(
     scoped_refptr<const ComputedStyle> pseudo_style) {
   DCHECK(pseudo_style->StyleType() == kPseudoIdBefore ||
          pseudo_style->StyleType() == kPseudoIdAfter ||
+         pseudo_style->StyleType() == kPseudoIdMarker ||
          pseudo_style->StyleType() == kPseudoIdFirstLetter);
 
   // FIXME: We should consider just making all pseudo items use an inherited

third_party/blink/renderer/core/layout/ng/list/layout_ng_list_item.cc

@@ -143,14 +143,24 @@ void LayoutNGListItem::UpdateMarker() {
   }
 
   // Create a marker box if it does not exist yet.
+  Node* list_item = GetNode();
+  const ComputedStyle* cached_marker_style =
+      list_item->IsPseudoElement()
+          ? nullptr
+          : ToElement(list_item)->CachedStyleForPseudoElement(kPseudoIdMarker);
   scoped_refptr<ComputedStyle> marker_style;
+  if (cached_marker_style) {
+    marker_style = ComputedStyle::Clone(*cached_marker_style);
+  } else {
+    marker_style = ComputedStyle::Create();
+    marker_style->InheritFrom(style);
+  }
   if (IsInside()) {
     if (marker_ && !marker_->IsLayoutInline())
       DestroyMarker();
     if (!marker_)
       marker_ = LayoutNGInsideListMarker::CreateAnonymous(&GetDocument());
-    marker_style = ComputedStyle::CreateAnonymousStyleWithDisplay(
-        style, EDisplay::kInline);
+    marker_style->SetDisplay(EDisplay::kInline);
     auto margins =
         LayoutListMarker::InlineMarginsForInside(style, IsMarkerImage());
     marker_style->SetMarginStart(Length::Fixed(margins.first));
@@ -165,8 +175,7 @@ void LayoutNGListItem::UpdateMarker() {
       DestroyMarker();
     if (!marker_)
       marker_ = LayoutNGListMarker::CreateAnonymous(&GetDocument());
-    marker_style = ComputedStyle::CreateAnonymousStyleWithDisplay(
-        style, EDisplay::kInlineBlock);
+    marker_style->SetDisplay(EDisplay::kInlineBlock);
     // Do not break inside the marker, and honor the trailing spaces.
     marker_style->SetWhiteSpace(EWhiteSpace::kPre);
     // Compute margins for 'outside' during layout, because it requires the

third_party/blink/web_tests/NeverFixTests

@@ -1328,11 +1328,6 @@ crbug.com/254753 external/wpt/css/css-images/css-image-fallbacks-and-annotations
 crbug.com/254753 external/wpt/css/css-images/css-image-fallbacks-and-annotations004.html [ WontFix ]
 crbug.com/254753 external/wpt/css/css-images/css-image-fallbacks-and-annotations005.html [ WontFix ]
 
-# ::marker has not been implemented
-crbug.com/457718 external/wpt/css/css-pseudo/marker-and-other-pseudo-elements.html [ WontFix ]
-crbug.com/457718 external/wpt/css/css-pseudo/marker-color.html [ WontFix ]
-crbug.com/457718 external/wpt/css/css-pseudo/marker-font-properties.html [ WontFix ]
-
 # 'writing-mode: sideways-lr' and 'sideways-rl' are not implemented.
 # Note other tests for these properties are skipped in W3CImportExpectations.
 crbug.com/680331 external/wpt/css/css-writing-modes/slr-alongside-vlr-floats.html [ WontFix ]

third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-font-properties.html

@@ -16,7 +16,7 @@ li {
     list-style-type: lower-alpha;
 }
 
-li::marker {
+li::marker, span {
     font-family: sans-serif;
     font-size: 24px;
     font-style: italic;
@@ -27,7 +27,7 @@ li::marker {
 </head>
 <body>
 <ol>
-    <li><span style="font-size: 24px"><!-- FIXME: Needed to ensure consistent baseline position with expected result in WebKit (why?). --></span></li>
+    <li><span><!-- FIXME: Needed to ensure consistent baseline position with expected result in Chromium and WebKit (why?). --></span></li>
 </ol>
 </body>
 </html>