| 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 |