Skip to content

Commit

Permalink
Bug 1930968 [wpt PR 49150] - Remove special :scope matching code in M…
Browse files Browse the repository at this point in the history
…atchForRelation, a=testonly

Automatic update from web-platform-tests
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
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6011808
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1382339}

--

wpt-commits: 7b7e2451a431d0cc68e4e5a96d19a71675dd782d
wpt-pr: 49150
  • Loading branch information
andruud authored and moz-wptsync-bot committed Nov 16, 2024
1 parent cc71fe2 commit 7eab606
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 19 deletions.
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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; }";
Expand Down

0 comments on commit 7eab606

Please sign in to comment.