Remove special :scope matching code in MatchForRelation

This special path causes :scope selectors to incorrectly match ':scope *' selectors in shadow roots, when it actually should match nothing [1]. The provided test scope-pseudo-in-shadow.html is passing in Firefox and Safari. The existing WPT scope-selector.html (all browsers currently passing) cover querySelector[All] cases well for shadow roots, document, and other DocumentFragments. There should be no behavior change there. Fixed: 378698644 [1] w3c/csswg-drafts#11188 [2] w3c/csswg-drafts#7261 Change-Id: I1efbf999864a766ad5dfaee1fd67527309e38107
web-platform-tests · Nov 13, 2024 · dfe604a · dfe604a
1 parent 924ad9d
commit dfe604a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 19 deletions.
diff --git a/css/css-scoping/scope-pseudo-in-shadow.html b/css/css-scoping/scope-pseudo-in-shadow.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>:scope pseudo does not match in shadow root</title>
+<link rel="help" href="https://drafts.csswg.org/css-scoping-1/#host-element-in-tree">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11188">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="host"></div>
+<script>
+  test(() => {
+    host.attachShadow({mode: 'open'}).innerHTML = `
+    <style>
+      div {
+        background-color: green;
+      }
+      :scope div {
+        background-color: red;
+      }
+      :scope > div {
+        background-color: red;
+      }
+    </style>
+    <div>Test</div>
+  `;
+    let div = host.shadowRoot.querySelector('div');
+    assert_equals(getComputedStyle(div).backgroundColor, 'rgb(0, 128, 0)');
+  }, ':scope does not match in shadow root');
+</script>
diff --git a/speculation-rules/prefetch/document-rules.https.html b/speculation-rules/prefetch/document-rules.https.html
@@ -18,7 +18,6 @@
 <meta name="variant" content="?include=newRuleSetAdded">
 <meta name="variant" content="?include=selectorMatches">
 <meta name="variant" content="?include=selectorMatchesScopingRoot">
-<meta name="variant" content="?include=selectorMatchesInShadowTree">
 <meta name="variant" content="?include=selectorMatchesDisplayNone">
 <meta name="variant" content="?include=selectorMatchesDisplayLocked">
 <meta name="variant" content="?include=unslottedLink">
@@ -183,24 +182,6 @@
     assert_equals(await isUrlPrefetched(url_2), 0);
   }, 'test selector_matches with :root');
 
-  // 'selector_matches' should use the shadowRoot as the scoping root when
-  // matching links inside a shadow tree.
-  subsetTestByKey('selectorMatchesInShadowTree', promise_test, async t => {
-    insertDocumentRule({ selector_matches: ':scope a.important-link' });
-
-    // Create shadow root.
-    const shadowHost = document.createElement('div');
-    document.body.appendChild(shadowHost);
-    const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
-
-    const url = getPrefetchUrl();
-    const link = addLink(url, shadowRoot);
-    link.className = 'important-link';
-    await new Promise(resolve => t.step_timeout(resolve, 2000));
-
-    assert_equals(await isUrlPrefetched(url), 1);
-  }, 'test selector_matches with link inside shadow tree');
-
   subsetTestByKey('selectorMatchesDisplayNone', promise_test, async t => {
     const style = document.createElement('style');
     style.innerText = ".important-section { display: none; }";