Make position-fallback a tree-scoped name/reference

In preparation for doing tree-scoped name lookup for @position-fallback
rules. Also added tests for tree-scoped @position-fallback lookups.

Bug: 1381623
Change-Id: I6f9dc5ecaac2773c8deff9b9f6c66f389eb5e977
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4055466
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1075628}

third_party/blink/renderer/core/css/css_properties.json5

@@ -3924,14 +3924,17 @@
     {
       name: "position-fallback",
       property_methods: ["ParseSingleValue", "CSSValueFromComputedStyleInternal" ],
-      type_name: "AtomicString",
-      default_value: "g_null_atom",
+      include_paths: ["third_party/blink/renderer/core/style/scoped_css_name.h"],
+      type_name: "ScopedCSSName",
+      wrapper_pointer_name: "Persistent",
+      default_value: "nullptr",
       field_group: "*",
       field_template: "external",
       converter: "ConvertNoneOrCustomIdent",
       keywords: ["none"],
       typedom_types: ["Keyword"],
       runtime_flag: "CSSAnchorPositioning",
+      tree_scoped_value: true,
     },
     {
       name: "quotes",

third_party/blink/renderer/core/css/properties/longhands/longhands_custom.cc

@@ -5948,9 +5948,10 @@ const CSSValue* PositionFallback::CSSValueFromComputedStyleInternal(
     const ComputedStyle& style,
     const LayoutObject*,
     bool allow_visited_style) const {
-  if (style.PositionFallback().empty())
+  if (!style.PositionFallback())
     return CSSIdentifierValue::Create(CSSValueID::kNone);
-  return MakeGarbageCollected<CSSCustomIdentValue>(style.PositionFallback());
+  return MakeGarbageCollected<CSSCustomIdentValue>(
+      style.PositionFallback()->GetName());
 }
 
 const CSSValue* Quotes::ParseSingleValue(CSSParserTokenRange& range,

third_party/blink/renderer/core/css/resolver/style_resolver.cc

@@ -2647,7 +2647,7 @@ scoped_refptr<const ComputedStyle> StyleResolver::ResolvePositionFallbackStyle(
   DCHECK(base_style.PositionFallback());
   StyleRulePositionFallback* position_fallback_rule =
       GetDocument().GetScopedStyleResolver()->PositionFallbackForName(
-          base_style.PositionFallback());
+          base_style.PositionFallback()->GetName());
   if (!position_fallback_rule ||
       index >= position_fallback_rule->TryRules().size())
     return nullptr;

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

@@ -5075,7 +5075,7 @@ void LayoutObject::InvalidateSubtreePositionFallback(bool mark_style_dirty) {
   // use a more targeted invalidation when tree-scoped @position-fallback rules
   // are supported.
 
-  bool invalidate = !StyleRef().PositionFallback().IsNull();
+  bool invalidate = StyleRef().PositionFallback() != nullptr;
   if (invalidate) {
     // Invalidate layout as @position-fallback styles are applied during layout.
     SetNeedsLayout(layout_invalidation_reason::kStyleChange);

third_party/blink/web_tests/external/wpt/css/css-anchor-position/position-fallback-tree-scoped-expected.txt

@@ -0,0 +1,12 @@
+This is a testharness.js-based test.
+PASS Document position-fallback matches @position-fallback in document scope
+PASS Document position-fallback does not match @position-fallback in #outer_host scope
+PASS Document position-fallback does not match @position-fallback in #inner_host scope
+PASS Outer position-fallback matches @position-fallback in document scope
+FAIL Outer position-fallback matches @position-fallback in #outer_host scope assert_equals: expected 200 but got 0
+PASS Outer position-fallback does not match @position-fallback in #inner_host scope
+PASS Inner position-fallback matches @position-fallback in document scope
+FAIL Inner position-fallback matches @position-fallback in #outer_host scope assert_equals: expected 200 but got 0
+FAIL Inner position-fallback matches @position-fallback in #inner_host scope assert_equals: expected 300 but got 0
+Harness: the test ran to completion.
+

third_party/blink/web_tests/external/wpt/css/css-anchor-position/position-fallback-tree-scoped.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning Test: @position-fallback - tree scoped names</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-rule">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
+
+<style>
+  body { margin: 0; }
+
+  @position-fallback --doc {
+    @try {
+      left: 100px;
+    }
+  }
+
+  .abs { position: absolute; }
+
+  #doc_pf_doc { position-fallback: --doc; }
+  #doc_pf_outer { position-fallback: --outer; }
+  #doc_pf_inner { position-fallback: --inner; }
+</style>
+
+<div id="doc_pf_doc" class="abs"></div>
+<div id="doc_pf_outer" class="abs"></div>
+<div id="doc_pf_inner" class="abs"></div>
+<div id="outer_host">
+  <template shadowroot="open">
+    <style>
+      @position-fallback --outer {
+        @try {
+          left: 200px;
+        }
+      }
+
+      .abs { position: absolute; }
+
+      #outer_pf_doc { position-fallback: --doc; }
+      #outer_pf_outer { position-fallback: --outer; }
+      #outer_pf_inner { position-fallback: --inner; }
+    </style>
+    <div id="outer_pf_doc" class="abs"></div>
+    <div id="outer_pf_outer" class="abs"></div>
+    <div id="outer_pf_inner" class="abs"></div>
+    <div id="inner_host">
+      <template shadowroot="open">
+        <style>
+          @position-fallback --inner {
+            @try {
+              left: 300px;
+            }
+          }
+
+          .abs { position: absolute; }
+
+          #inner_pf_doc { position-fallback: --doc; }
+          #inner_pf_outer { position-fallback: --outer; }
+          #inner_pf_inner { position-fallback: --inner; }
+        </style>
+        <div id="inner_pf_doc" class="abs"></div>
+        <div id="inner_pf_outer" class="abs"></div>
+        <div id="inner_pf_inner" class="abs"></div>
+      </template>
+    </div>
+  </template>
+</div>
+
+<script>
+  setup(() => {
+    polyfill_declarative_shadow_dom(outer_host);
+  });
+
+  test(() => {
+    assert_equals(doc_pf_doc.offsetLeft, 100);
+  }, "Document position-fallback matches @position-fallback in document scope");
+
+  test(() => {
+    assert_equals(doc_pf_outer.offsetLeft, 0);
+  }, "Document position-fallback does not match @position-fallback in #outer_host scope");
+
+  test(() => {
+    assert_equals(doc_pf_inner.offsetLeft, 0);
+  }, "Document position-fallback does not match @position-fallback in #inner_host scope");
+
+  const outer_root = outer_host.shadowRoot;
+  const inner_root = outer_root.querySelector("#inner_host").shadowRoot;
+
+  test(() => {
+    assert_equals(outer_root.querySelector("#outer_pf_doc").offsetLeft, 100);
+  }, "Outer position-fallback matches @position-fallback in document scope");
+
+  test(() => {
+    assert_equals(outer_root.querySelector("#outer_pf_outer").offsetLeft, 200);
+  }, "Outer position-fallback matches @position-fallback in #outer_host scope");
+
+  test(() => {
+    assert_equals(outer_root.querySelector("#outer_pf_inner").offsetLeft, 0);
+  }, "Outer position-fallback does not match @position-fallback in #inner_host scope");
+
+  test(() => {
+    assert_equals(inner_root.querySelector("#inner_pf_doc").offsetLeft, 100)
+  }, "Inner position-fallback matches @position-fallback in document scope");
+
+  test(() => {
+    assert_equals(inner_root.querySelector("#inner_pf_outer").offsetLeft, 200);
+  }, "Inner position-fallback matches @position-fallback in #outer_host scope");
+
+  test(() => {
+    assert_equals(inner_root.querySelector("#inner_pf_inner").offsetLeft, 300);
+  }, "Inner position-fallback matches @position-fallback in #inner_host scope");
+
+</script>