OLD | NEW |
| (Empty) |
1 CONSOLE WARNING: Calling Element.createShadowRoot() for an element which already
hosts a shadow root is deprecated. See https://www.chromestatus.com/features/46
68884095336448 for more details. | |
2 Tests that distributed nodes and their updates are correctly shown in different
shadow host display modes. | |
3 | |
4 youngest distributed text | |
5 oldest distributed text | |
6 oldest distributed text | |
7 oldest distributed text | |
8 ========= Original ======== | |
9 - <div id="shadowHost"> | |
10 <div class="distributeMeToYoungest original">\n youngest distribute
d text\n </div> | |
11 <div class="distributeMeToOldest original">\n oldest distributed te
xt\n </div> | |
12 <div class="distributeMeToInner original">\n oldest distributed tex
t\n </div> | |
13 <div class="distributeMeToInner original2">\n oldest distributed te
xt\n </div> | |
14 </div> | |
15 ========= After shadow root created ======== | |
16 - <div id="shadowHost"> | |
17 - #shadow-root | |
18 - <div class="oldestShadowMain"> | |
19 - <content select=".distributeMeToOldest"> | |
20 <div id="fallbackOldest"></div> | |
21 ↪ <div> | |
22 </content> | |
23 </div> | |
24 <div class="distributeMeToYoungest original">\n youngest distribute
d text\n </div> | |
25 <div class="distributeMeToOldest original">\n oldest distributed te
xt\n </div> | |
26 <div class="distributeMeToInner original">\n oldest distributed tex
t\n </div> | |
27 <div class="distributeMeToInner original2">\n oldest distributed te
xt\n </div> | |
28 </div> | |
29 ========= After adding distributed node ======== | |
30 - <div id="shadowHost"> | |
31 - #shadow-root | |
32 - <div class="oldestShadowMain"> | |
33 - <content select=".distributeMeToOldest"> | |
34 <div id="fallbackOldest"></div> | |
35 ↪ <div> | |
36 ↪ <div> | |
37 </content> | |
38 </div> | |
39 <div class="distributeMeToYoungest original">\n youngest distribute
d text\n </div> | |
40 <div class="distributeMeToOldest original">\n oldest distributed te
xt\n </div> | |
41 <div class="distributeMeToInner original">\n oldest distributed tex
t\n </div> | |
42 <div class="distributeMeToInner original2">\n oldest distributed te
xt\n </div> | |
43 <div class="distributeMeToOldest distributeMeAsWell_1"></div> | |
44 </div> | |
45 ========= After adding another distributed node ======== | |
46 - <div id="shadowHost"> | |
47 - #shadow-root | |
48 - <div class="oldestShadowMain"> | |
49 - <content select=".distributeMeToOldest"> | |
50 <div id="fallbackOldest"></div> | |
51 ↪ <div> | |
52 ↪ <div> | |
53 ↪ <div> | |
54 </content> | |
55 </div> | |
56 <div class="distributeMeToYoungest original">\n youngest distribute
d text\n </div> | |
57 <div class="distributeMeToOldest original">\n oldest distributed te
xt\n </div> | |
58 <div class="distributeMeToInner original">\n oldest distributed tex
t\n </div> | |
59 <div class="distributeMeToInner original2">\n oldest distributed te
xt\n </div> | |
60 <div class="distributeMeToOldest distributeMeAsWell_1"></div> | |
61 <div class="distributeMeToOldest distributeMeAsWell_2"></div> | |
62 </div> | |
63 ========= After adding youngest shadow root ======== | |
64 - <div id="shadowHost"> | |
65 - #shadow-root | |
66 - <div class="youngestShadowMain"> | |
67 - <shadow> | |
68 ↪ <div> | |
69 </shadow> | |
70 - <content select=".distributeMeToYoungest"> | |
71 <div id="fallbackYoungest"></div> | |
72 ↪ <div> | |
73 </content> | |
74 - <div class="innerShadowHost"> | |
75 - <content in-youngest-shadow-root select=".distributeMeToInner"
> | |
76 ↪ <div> | |
77 ↪ <div> | |
78 </content> | |
79 </div> | |
80 </div> | |
81 - #shadow-root | |
82 - <div class="oldestShadowMain"> | |
83 - <content select=".distributeMeToOldest"> | |
84 <div id="fallbackOldest"></div> | |
85 ↪ <div> | |
86 ↪ <div> | |
87 ↪ <div> | |
88 </content> | |
89 </div> | |
90 <div class="distributeMeToYoungest original">\n youngest distribute
d text\n </div> | |
91 <div class="distributeMeToOldest original">\n oldest distributed te
xt\n </div> | |
92 <div class="distributeMeToInner original">\n oldest distributed tex
t\n </div> | |
93 <div class="distributeMeToInner original2">\n oldest distributed te
xt\n </div> | |
94 <div class="distributeMeToOldest distributeMeAsWell_1"></div> | |
95 <div class="distributeMeToOldest distributeMeAsWell_2"></div> | |
96 </div> | |
97 ========= After adding inner shadow root node ======== | |
98 - <div id="shadowHost"> | |
99 - #shadow-root | |
100 - <div class="youngestShadowMain"> | |
101 - <shadow> | |
102 ↪ <div> | |
103 </shadow> | |
104 - <content select=".distributeMeToYoungest"> | |
105 <div id="fallbackYoungest"></div> | |
106 ↪ <div> | |
107 </content> | |
108 - <div class="innerShadowHost" id="innerShadowHost"> | |
109 - #shadow-root | |
110 - <div class="innerShadowMain"> | |
111 - <content in-inner-shadow-root select=".distributeMeToI
nner"> | |
112 ↪ <div> | |
113 ↪ <div> | |
114 </content> | |
115 </div> | |
116 - <content in-youngest-shadow-root select=".distributeMeToInner"
> | |
117 ↪ <div> | |
118 ↪ <div> | |
119 </content> | |
120 </div> | |
121 </div> | |
122 - #shadow-root | |
123 - <div class="oldestShadowMain"> | |
124 - <content select=".distributeMeToOldest"> | |
125 <div id="fallbackOldest"></div> | |
126 ↪ <div> | |
127 ↪ <div> | |
128 ↪ <div> | |
129 </content> | |
130 </div> | |
131 <div class="distributeMeToYoungest original">\n youngest distribute
d text\n </div> | |
132 <div class="distributeMeToOldest original">\n oldest distributed te
xt\n </div> | |
133 <div class="distributeMeToInner original">\n oldest distributed tex
t\n </div> | |
134 <div class="distributeMeToInner original2">\n oldest distributed te
xt\n </div> | |
135 <div class="distributeMeToOldest distributeMeAsWell_1"></div> | |
136 <div class="distributeMeToOldest distributeMeAsWell_2"></div> | |
137 </div> | |
138 | |
OLD | NEW |