Tests that distributed nodes and their updates are correctly shown in different shadow host display modes.
========= Original ========
- <div id="shadowHost">
<div slot="distributeMeToYoungest"> youngest distributed text </div>
<div slot="distributeMeToOldest"> oldest distributed text </div>
<div slot="distributeMeToInner"> oldest distributed text </div>
<div slot="distributeMeToInner"> oldest distributed text </div>
</div>
========= After shadow root created ========
- <div id="shadowHost">
- #shadow-root (open)
- <div class="oldestShadowMain">
- <slot name=".distributeMeToOldest">
<div id="fallbackOldest"></div>
</slot>
</div>
<div slot="distributeMeToYoungest"> youngest distributed text </div>
<div slot="distributeMeToOldest"> oldest distributed text </div>
<div slot="distributeMeToInner"> oldest distributed text </div>
<div slot="distributeMeToInner"> oldest distributed text </div>
</div>
========= After adding distributed node ========
- <div id="shadowHost">
- #shadow-root (open)
- <div class="oldestShadowMain">
- <slot name=".distributeMeToOldest">
<div id="fallbackOldest"></div>
</slot>
</div>
<div slot="distributeMeToYoungest"> youngest distributed text </div>
<div slot="distributeMeToOldest"> oldest distributed text </div>
<div slot="distributeMeToInner"> oldest distributed text </div>
<div slot="distributeMeToInner"> oldest distributed text </div>
<div slot="distributeMeAsWell_1"></div>
</div>
========= After adding another distributed node ========
- <div id="shadowHost">
- #shadow-root (open)
- <div class="oldestShadowMain">
- <slot name=".distributeMeToOldest">
<div id="fallbackOldest"></div>
</slot>
</div>
<div slot="distributeMeToYoungest"> youngest distributed text </div>
<div slot="distributeMeToOldest"> oldest distributed text </div>
<div slot="distributeMeToInner"> oldest distributed text </div>
<div slot="distributeMeToInner"> oldest distributed text </div>
<div slot="distributeMeAsWell_1"></div>
<div slot="distributeMeAsWell_2"></div>
</div>