Skip to content

GitLab

T
tangled
Commit 074ff3e4 authored by Momoko Sumida's avatar Momoko Sumida Committed by Commit Bot
Browse files
Options

Add WPT for :scope selector on shadow trees 

This WPT shows that :scope does not work for shadow root.
:scope matches nothing when the direct child element or descendant of shadow root should be selected, while :scope works fine for descendant elements within shadow root.

Link to the spec:
https://drafts.csswg.org/selectors-4/#the-scope-pseudo

Link to related issue:
https://github.com/w3c/csswg-drafts/issues/3016

Bug: 859692
Change-Id: I801706eb7891035dcb900588d5542bd48fa1c12a
Reviewed-on: https://chromium-review.googlesource.com/1158445
Commit-Queue: Momoko Sumida <momon@google.com>
Reviewed-by: default avatarRakina Zata Amni <rakina@chromium.org>
Reviewed-by: default avatarHayato Ito <hayato@chromium.org>
Cr-Commit-Position: refs/heads/master@{#583210}
parent 802385a5
Hide whitespace changes
Inline Side-by-side
Showing with 41 additions and 0 deletions
third_party/WebKit/LayoutTests/external/wpt/css/selectors/scope-selector-expected.txt 0 → 100644
View file @ 074ff3e4
This is a testharness.js-based test.
PASS scope selector works in shadowRoot.firstChild
FAIL Selecting direct child of shadow root with :scope should work assert_equals: should get the direct child of shadowRoot expected Element node <div class="div" id="external_div">Shadow Element<div id=... but got null
FAIL Selecting descendants of shadow root with :scope should work assert_equals: should get the first div descendant of shadowRoot expected Element node <div class="div" id="external_div">Shadow Element<div id=... but got null
PASS querySelector() with ":scope" should return null, whether the context object is an element or a shadow root
Harness: the test ran to completion.
third_party/WebKit/LayoutTests/external/wpt/css/selectors/scope-selector.html 0 → 100644
View file @ 074ff3e4
<!doctype html>
<link rel='help' href='https://drafts.csswg.org/selectors-4/#the-scope-pseudo'>
<meta name='description' content=':scope should match when context object is a shadow root'>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<div id='shadowHost'></div>
<script>
'use strict'
const shadowRoot = shadowHost.attachShadow({mode:'open'})
shadowRoot.innerHTML = '<div class="div" id="external_div">Shadow Element<div id="nesteddiv">nested</div></div>';
test(() => {
assert_equals(shadowRoot.firstChild.querySelectorAll(':scope > div').length, 1, 'should get the number of direct children of external_div');
assert_equals(shadowRoot.firstChild.querySelector(':scope > div'), shadowRoot.getElementById("nesteddiv"), 'should get the first direct child of external_div');
assert_equals(shadowRoot.firstChild.querySelector(':scope > div').innerHTML, 'nested', 'should get the text in nesteddiv');
}, 'scope selector works in shadowRoot.firstChild')
test(() => {
assert_equals(shadowRoot.querySelector(':scope > div'), shadowRoot.getElementById('external_div'), 'should get the direct child of shadowRoot');
assert_equals(shadowRoot.querySelectorAll(':scope > div').length, 1, 'should get the number of direct div children of shadowRoot');
}, 'Selecting direct child of shadow root with :scope should work')
test(() => {
assert_equals(shadowRoot.querySelector(':scope div'), shadowRoot.getElementById('external_div'), 'should get the first div descendant of shadowRoot');
assert_equals(shadowRoot.querySelectorAll(':scope div').length, 2, 'should get the number of the div descendants of shadowRoot');
}, 'Selecting descendants of shadow root with :scope should work')
test(() => {
assert_equals(shadowRoot.firstChild.querySelector(':scope'), null, 'should return null');
assert_equals(shadowRoot.querySelector(':scope'), null, 'should return null');
assert_equals(shadowRoot.querySelectorAll(':scope').length, 0, 'should return 0');
}, 'querySelector() with ":scope" should return null, whether the context object is an element or a shadow root')
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment