Mark SVG element references as tree-scope dependent

Fredrik Söderquist · chromium-wpt-export-bot · commit 5116221eaff1 · 2025-02-28T02:54:29.000-08:00
SVG element references (url(#foo)) are dependent on the tree-scope for looking up the referenced element. This means a resolved style which contains an element reference can't be cached in the MPC. This was not a problem before 5c2e1f921ce1c11c2952ff98c81806bb55db1894, because SVG elements wouldn't be cacheable in the MPC at all. Set the has-tree-scoped-reference for local element references to signal that the resolved style in which they participate cannot be cached in the MPC. Funnel all calls to ElementStyleResources::GetSVGResourceFromValue through a helper in StyleResolverState::GetSVGResource to allow handling this in a single place. Fixed: 393395935 Change-Id: I758ac5aeef9c1917275dc26962fa89bcb4518b13 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6309244 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Fredrik Söderquist <fs@opera.com> Cr-Commit-Position: refs/heads/main@{#1426194}
diff --git a/css/css-scoping/svg-id-ref-001.html b/css/css-scoping/svg-id-ref-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>Same clip-path id's in different tree scopes</title>
+<link rel="help" href="https://drafts.csswg.org/css-values/#local-urls">
+<link rel="help" href="https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-reference">
+<link rel="match" href="reference/green-box.html">
+<style>
+  div.container {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+  }
+  div.one {
+    background-color: red;
+  }
+</style>
+<p>Test passes if you see a single 100px by 100px green box below.</p>
+<div class="container one">
+  <svg style="display: block; width: 100%; height: 100%">
+    <rect width="100" height="100" fill="green" clip-path="url(#clip)"/>
+    <clipPath id="clip">
+      <rect width="50" height="100"/>
+    </clipPath>
+  </svg>
+</div>
+<div class="container two"></div>
+<script>
+  const scoped = document.querySelector('div.two');
+  scoped.attachShadow({ mode: 'open' });
+  scoped.shadowRoot.innerHTML = `
+     <svg style="display: block; width: 100%; height: 100%">
+       <rect width="100" height="100" fill="green" clip-path="url(#clip)"/>
+       <clipPath id="clip">
+         <rect x="50" width="50" height="100"/>
+       </clipPath>
+     </svg>`;
+</script>
