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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script src="resources/shadow-dom.js"></script>
</head>
<body>
<div id='console'></div>
<div id='sandbox'></div>
<script>
description("Tests for a shadow element's getDistributedNodes().");
var sandbox = document.getElementById('sandbox');
function prepareTree(root) {
sandbox.innerHTML = '';
sandbox.appendChild(root);
}
function assertDistributedNodes(insertionPointId, expectedDistributedNodes) {
debug('\ngetDistributedNodes() for "' + insertionPointId + '" should return [' + expectedDistributedNodes + ']');
var insertionPoint = getNodeInComposedTree(insertionPointId);
var distributedNodes = insertionPoint.getDistributedNodes();
window.distributedNodes = distributedNodes;
window.expectedDistributedNodes = expectedDistributedNodes;
shouldBe("distributedNodes.length", "expectedDistributedNodes.length");
for (var i = 0; i < distributedNodes.length && i < expectedDistributedNodes.length; ++i) {
shouldBe("distributedNodes.item(" + i + ")", "getNodeInComposedTree(expectedDistributedNodes[" + i + "])");
}
}
prepareTree(
createDOM('shadow', {'id': 'shadow'}));
assertDistributedNodes('shadow', []);
prepareTree(
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('shadow', {'id': 'shadow'}))));
assertDistributedNodes('host/shadow', []);
prepareTree(
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('shadow', {'id': 'shadow'},
createDOM('div', {'id': 'shadow-child'})))));
assertDistributedNodes('host/shadow', []);
prepareTree(
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('shadow', {'id': 'shadow'})),
createDOM('div', {'id': 'host-child'})));
assertDistributedNodes('host/shadow', ['host-child']);
prepareTree(
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('shadow', {'id': 'shadow'},
createDOM('div'))),
createDOM('div', {'id': 'host-child'})));
assertDistributedNodes('host/shadow', ['host-child']);
prepareTree(
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('div', {'id': 'older-child'})),
createShadowRoot(
createDOM('shadow', {'id': 'shadow'}))));
assertDistributedNodes('host//shadow', ['host/older-child']);
prepareTree(
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('div', {'id': 'older-child-1'}),
createDOM('content', {'id': 'content'}),
createDOM('div', {'id': 'older-child-2'})),
createShadowRoot(
createDOM('shadow', {'id': 'shadow'})),
createDOM('div', {'id': 'host-child'})));
assertDistributedNodes('host//shadow', ['host/older-child-1', 'host-child', 'host/older-child-2']);
prepareTree(
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('div', {'id': 'older-child-1'}),
createDOM('content', {'id': 'content'}),
createDOM('div', {'id': 'older-child-2'})),
createShadowRoot(
createDOM('shadow', {'id': 'shadow'})),
createDOM('div', {'id': 'host-child'})));
assertDistributedNodes('host//shadow', ['host/older-child-1', 'host-child', 'host/older-child-2']);
prepareTree(
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('div', {'id': 'older-child-1'}),
createDOM('content', {'id': 'content'}),
createDOM('div', {'id': 'older-child-2'})),
createShadowRoot(
createDOM('shadow', {'id': 'shadow'}))));
assertDistributedNodes('host//shadow', ['host/older-child-1', 'host/older-child-2']);
prepareTree(
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('div', {'id': 'older-child-1'}),
createDOM('content', {'id': 'content'},
createDOM('div', {'id': 'older-content-child'})),
createDOM('div', {'id': 'older-child-2'})),
createShadowRoot(
createDOM('shadow', {'id': 'shadow'}))));
assertDistributedNodes('host//shadow', ['host/older-child-1', 'host/older-content-child', 'host/older-child-2']);
prepareTree(
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('div', {'id': 'oldest-child-1'}),
createDOM('content', {'id': 'content'}),
createDOM('div', {'id': 'oldest-child-2'})),
createShadowRoot(
createDOM('div', {'id': 'older-child-1'}),
createDOM('shadow', {'id': 'older-shadow'}),
createDOM('div', {'id': 'older-child-2'})),
createShadowRoot(
createDOM('shadow', {'id': 'shadow'})),
createDOM('div', {'id': 'host-child'})));
assertDistributedNodes('host//older-shadow', ['host/oldest-child-1', 'host-child', 'host/oldest-child-2']);
assertDistributedNodes('host///shadow', ['host//older-child-1', 'host/oldest-child-1', 'host-child', 'host/oldest-child-2', 'host//older-child-2']);
</script>
</body>
</html>
|
