1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
<!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 ShadowRoot or a DocumentFragment'>
<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'})
const externalDiv = document.createElement('div');
externalDiv.setAttribute('id', 'external');
const nestedDiv = document.createElement('div');
nestedDiv.setAttribute('id', 'nested');
shadowRoot.appendChild(externalDiv);
externalDiv.appendChild(nestedDiv);
const nestedShadowRoot = nestedDiv.attachShadow({mode:'open'})
const shadowExternalDiv = document.createElement('div');
shadowExternalDiv.setAttribute('id', 'shadow_external');
const shadowNestedDiv = document.createElement('div');
shadowNestedDiv.setAttribute('id', 'shadow_nested');
nestedShadowRoot.appendChild(shadowExternalDiv);
shadowExternalDiv.appendChild(shadowNestedDiv);
test (() => {
assert_equals(shadowRoot.firstChild.querySelectorAll(':scope > div').length, 1, 'should get the number of direct children of externalDiv');
assert_equals(shadowRoot.firstChild.querySelector(':scope > div'), shadowRoot.getElementById('nested'), 'should get the first direct child of externalDiv');
assert_equals(shadowRoot.firstChild.querySelector(':scope > div'), shadowRoot.getElementById('nested'), 'should get nestedDiv');
}, 'scope selector works in shadowRoot.firstChild')
test (() => {
assert_equals(shadowRoot.querySelector(':scope > div'), shadowRoot.getElementById('external'), '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'), '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, :scope div should not match for nestedShadow');
}, 'Selecting descendants of shadow root with :scope should work')
test (() => {
assert_equals(nestedShadowRoot.querySelector(':scope > div'), nestedShadowRoot.getElementById('shadow_external'), 'should get the direct child of nestedShadowRoot');
assert_equals(nestedShadowRoot.querySelectorAll(':scope > div').length, 1, 'should get the number of direct div children of nestedShadowRoot');
}, 'Selecting direct child of nested shadow root with :scope should work')
test (() => {
assert_equals(nestedShadowRoot.querySelector(':scope div'), nestedShadowRoot.getElementById('shadow_external'), 'should get the first div descendant of nestedShadowRoot');
assert_equals(nestedShadowRoot.querySelectorAll(':scope div').length, 2, 'should get the number of the div descendants of nestedShadowRoot');
}, 'Selecting descendants of nested shadow root with :scope should work')
const documentFragment = document.createDocumentFragment();
const external_div = document.createElement('div');
external_div.setAttribute('id', 'external_div');
const nested_div = document.createElement('div');
nested_div.setAttribute('id', 'nested_div');
documentFragment.appendChild(external_div);
external_div.appendChild(nested_div);
test(() => {
assert_equals(documentFragment.firstChild.querySelectorAll(':scope > div').length, 1, 'should get the number of direct children of external_div');
assert_equals(documentFragment.firstChild.querySelector(':scope > div'), documentFragment.getElementById('nested_div'), 'should get the first direct child of external_div');
assert_equals(documentFragment.firstChild.querySelector(':scope > div'), documentFragment.getElementById('nested_div'), 'should get the text in nesteddiv');
}, 'scope selector works in documentFragment.firstChild')
test(() => {
assert_equals(documentFragment.querySelector(':scope > div'), documentFragment.getElementById('external_div'), 'should get the direct child of DocumentFragment');
assert_equals(documentFragment.querySelectorAll(':scope > div').length, 1, 'should get the number of direct div children of DocumentFragment');
}, 'Selecting direct child of document fragment with :scope should work')
test(() => {
assert_equals(documentFragment.querySelector(':scope div'), documentFragment.getElementById('external_div'), 'should get the first div descendant of DocumentFragment');
assert_equals(documentFragment.querySelectorAll(':scope div').length, 2, 'should get the number of the div descendants of DocumentFragment');
}, 'Selecting descendants of document fragment with :scope should work')
test(() => {
assert_equals(shadowRoot.firstChild.querySelector(':scope'), null, 'should return null');
assert_equals(shadowRoot.firstChild.querySelectorAll(':scope').length, 0, 'should return 0');
assert_equals(shadowRoot.querySelector(':scope'), null, 'should return null');
assert_equals(shadowRoot.querySelectorAll(':scope').length, 0, 'should return 0');
assert_equals(documentFragment.querySelector(':scope'), null, 'should return null');
assert_equals(documentFragment.querySelectorAll(':scope').length, 0, 'should return 0');
}, 'querySelector() with ":scope" should return null, whether the context object is an element, a shadow root or a document fragment')
</script>
|
