[css-pseudo] Recalculate viewport units in ::marker

If a marker uses viewport units (vw or vh), they should be recalculated
when the size of the viewport changes.

This patch updates node traversal methods to include ::marker, so that
it's taken into account when updating viewport units.

However, this is only fixed for markers with non-normal content, since
otherwise they aren't implemented as real pseudo-elements yet.

BUG=457718

TEST=external/wpt/css/css-pseudo/marker-content-014.html

The test still fails because it includes cases with 'content: normal'.

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

third_party/blink/renderer/core/dom/node.cc

@@ -375,36 +375,64 @@ NodeList* Node::childNodes() {
 }
 
 Node* Node::PseudoAwarePreviousSibling() const {
-  if (parentElement() && !previousSibling()) {
-    Element* parent = parentElement();
-    if (IsAfterPseudoElement() && parent->lastChild())
-      return parent->lastChild();
-    if (!IsBeforePseudoElement())
-      return parent->GetPseudoElement(kPseudoIdBefore);
+  Element* parent = parentElement();
+  if (!parent || previousSibling())
+    return previousSibling();
+  switch (GetPseudoId()) {
+    case kPseudoIdAfter:
+      if (Node* previous = parent->lastChild())
+        return previous;
+      FALLTHROUGH;
+    case kPseudoIdNone:
+      if (Node* previous = parent->GetPseudoElement(kPseudoIdBefore))
+        return previous;
+      FALLTHROUGH;
+    case kPseudoIdBefore:
+      if (Node* previous = parent->GetPseudoElement(kPseudoIdMarker))
+        return previous;
+      FALLTHROUGH;
+    case kPseudoIdMarker:
+      break;
+    default:
+      NOTREACHED();
   }
-  return previousSibling();
+  return nullptr;
 }
 
 Node* Node::PseudoAwareNextSibling() const {
-  if (parentElement() && !nextSibling()) {
-    Element* parent = parentElement();
-    if (IsBeforePseudoElement() && parent->HasChildren())
-      return parent->firstChild();
-    if (!IsAfterPseudoElement())
-      return parent->GetPseudoElement(kPseudoIdAfter);
+  Element* parent = parentElement();
+  if (!parent || nextSibling())
+    return nextSibling();
+  switch (GetPseudoId()) {
+    case kPseudoIdMarker:
+      if (Node* next = parent->GetPseudoElement(kPseudoIdBefore))
+        return next;
+      FALLTHROUGH;
+    case kPseudoIdBefore:
+      if (parent->HasChildren())
+        return parent->firstChild();
+      FALLTHROUGH;
+    case kPseudoIdNone:
+      if (Node* next = parent->GetPseudoElement(kPseudoIdAfter))
+        return next;
+      FALLTHROUGH;
+    case kPseudoIdAfter:
+      break;
+    default:
+      NOTREACHED();
   }
-  return nextSibling();
+  return nullptr;
 }
 
 Node* Node::PseudoAwareFirstChild() const {
   if (const auto* current_element = DynamicTo<Element>(this)) {
-    Node* first = current_element->GetPseudoElement(kPseudoIdBefore);
-    if (first)
+    if (Node* first = current_element->GetPseudoElement(kPseudoIdMarker))
+      return first;
+    if (Node* first = current_element->GetPseudoElement(kPseudoIdBefore))
       return first;
-    first = current_element->firstChild();
-    if (!first)
-      first = current_element->GetPseudoElement(kPseudoIdAfter);
-    return first;
+    if (Node* first = current_element->firstChild())
+      return first;
+    return current_element->GetPseudoElement(kPseudoIdAfter);
   }
 
   return firstChild();
@@ -412,13 +440,13 @@ Node* Node::PseudoAwareFirstChild() const {
 
 Node* Node::PseudoAwareLastChild() const {
   if (const auto* current_element = DynamicTo<Element>(this)) {
-    Node* last = current_element->GetPseudoElement(kPseudoIdAfter);
-    if (last)
+    if (Node* last = current_element->GetPseudoElement(kPseudoIdAfter))
+      return last;
+    if (Node* last = current_element->lastChild())
+      return last;
+    if (Node* last = current_element->GetPseudoElement(kPseudoIdBefore))
       return last;
-    last = current_element->lastChild();
-    if (!last)
-      last = current_element->GetPseudoElement(kPseudoIdBefore);
-    return last;
+    return current_element->GetPseudoElement(kPseudoIdMarker);
   }
 
   return lastChild();

third_party/blink/web_tests/TestExpectations

@@ -3832,6 +3832,7 @@ crbug.com/1031667 external/wpt/css/css-pseudo/marker-content-008.tentative.html
 crbug.com/1031667 external/wpt/css/css-pseudo/marker-content-009.tentative.html [ Failure ]
 crbug.com/457718 external/wpt/css/css-pseudo/marker-content-010.html [ Failure ]
 crbug.com/1031667 external/wpt/css/css-pseudo/marker-content-011.tentative.html [ Failure ]
+crbug.com/1031667 external/wpt/css/css-pseudo/marker-content-014.html [ Failure ]
 crbug.com/457718 external/wpt/css/css-pseudo/marker-font-variant-numeric-normal.html [ Failure ]
 crbug.com/457718 external/wpt/css/css-pseudo/marker-list-style-position.html [ Failure ]
 

third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-content-014-ref.html

+<!DOCTYPE html>
+<html class="reftest-wait">
+<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>
+iframe {
+  width: 600px;
+  border: none;
+}
+</style>
+<body>
+<script src="/common/reftest-wait.js"></script>
+<script>
+"use strict";
+const code = `
+  <!DOCTYPE html>
+  <style>
+  ::marker {
+    font-size: 3vw;
+  }
+  ol {
+    float: left;
+  }
+  .inside {
+    list-style-position: inside;
+  }
+  .decimal {
+    list-style-type: decimal;
+  }
+  .string {
+    list-style-type: "1. ";
+  }
+  .marker::marker {
+    content: "1. ";
+  }
+  </style>
+  <ol>
+    <li class="decimal">item</li>
+    <li class="string">item</li>
+    <li class="marker">item</li>
+  </ol>
+  <ol class="inside">
+    <li class="decimal">item</li>
+    <li class="string">item</li>
+    <li class="marker">item</li>
+  </ol>
+`;
+const iframe = document.createElement("iframe");
+iframe.src = "data:text/html," + encodeURI(code);
+iframe.addEventListener("load", function() {
+  takeScreenshot();
+}, {once: true});
+document.body.appendChild(iframe);
+</script>
+</body>
+</html>

third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-content-014.html

+<!DOCTYPE html>
+<html class="reftest-wait">
+<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-014-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
+<link rel="help" href="https://drafts.csswg.org/css-values/#viewport-relative-lengths">
+<meta name="assert" content="Checks that viewport units in ::marker are recalculated when viewport size changes.">
+<style>
+iframe {
+  width: 300px;
+  border: none;
+}
+iframe.big {
+  width: 600px;
+}
+</style>
+<body>
+<script src="/common/reftest-wait.js"></script>
+<script>
+"use strict";
+const code = `
+  <!DOCTYPE html>
+  <style>
+  ::marker {
+    font-size: 3vw;
+  }
+  ol {
+    float: left;
+  }
+  .inside {
+    list-style-position: inside;
+  }
+  .decimal {
+    list-style-type: decimal;
+  }
+  .string {
+    list-style-type: "1. ";
+  }
+  .marker::marker {
+    content: "1. ";
+  }
+  </style>
+  <ol>
+    <li class="decimal">item</li>
+    <li class="string">item</li>
+    <li class="marker">item</li>
+  </ol>
+  <ol class="inside">
+    <li class="decimal">item</li>
+    <li class="string">item</li>
+    <li class="marker">item</li>
+  </ol>
+`;
+const iframe = document.createElement("iframe");
+iframe.src = "data:text/html," + encodeURI(code);
+iframe.addEventListener("load", function() {
+  iframe.classList.add("big");
+  takeScreenshot();
+}, {once: true});
+document.body.appendChild(iframe);
+</script>
+</body>
+</html>