| Tests that elements panel updates dom tree structure upon distribution in shadow dom. |
| |
| |
| Running: createHost1 |
| - <div id="host1"> |
| - #shadow-root (open) |
| - <slot id="slot1" name="slot1"> |
| </slot> |
| - <slot id="slot2" name="slot2"> |
| </slot> |
| - <slot id="slot3"> |
| </slot> |
| </div> |
| |
| Running: createChild1 |
| - <div id="host1"> |
| - #shadow-root (open) |
| - <slot id="slot1" name="slot1"> |
| </slot> |
| - <slot id="slot2" name="slot2"> |
| ↪ <span> reveal |
| </slot> |
| - <slot id="slot3"> |
| </slot> |
| <span id="child1" slot="slot2"></span> |
| </div> |
| |
| Running: createChild2 |
| - <div id="host1"> |
| - #shadow-root (open) |
| - <slot id="slot1" name="slot1"> |
| </slot> |
| - <slot id="slot2" name="slot2"> |
| ↪ <span> reveal |
| </slot> |
| - <slot id="slot3"> |
| ↪ <div> reveal |
| </slot> |
| <span id="child1" slot="slot2"></span> |
| <div id="child2"></div> |
| </div> |
| |
| Running: createChild3 |
| - <div id="host1"> |
| - #shadow-root (open) |
| - <slot id="slot1" name="slot1"> |
| </slot> |
| - <slot id="slot2" name="slot2"> |
| ↪ <span> reveal |
| ↪ <h1> reveal |
| </slot> |
| - <slot id="slot3"> |
| ↪ <div> reveal |
| </slot> |
| <span id="child1" slot="slot2"></span> |
| <div id="child2"></div> |
| <h1 id="child3" slot="slot2"></h1> |
| </div> |
| |
| Running: createChild4 |
| - <div id="host1"> |
| - #shadow-root (open) |
| - <slot id="slot1" name="slot1"> |
| ↪ <h2> reveal |
| </slot> |
| - <slot id="slot2" name="slot2"> |
| ↪ <span> reveal |
| ↪ <h1> reveal |
| </slot> |
| - <slot id="slot3"> |
| ↪ <div> reveal |
| </slot> |
| <span id="child1" slot="slot2"></span> |
| <div id="child2"></div> |
| <h1 id="child3" slot="slot2"></h1> |
| <h2 id="child4" slot="slot1"></h2> |
| </div> |
| |
| Running: createChild5 |
| - <div id="host1"> |
| - #shadow-root (open) |
| - <slot id="slot1" name="slot1"> |
| ↪ <h2> reveal |
| </slot> |
| - <slot id="slot2" name="slot2"> |
| ↪ <span> reveal |
| ↪ <h1> reveal |
| </slot> |
| - <slot id="slot3"> |
| ↪ <div> reveal |
| </slot> |
| <span id="child1" slot="slot2"></span> |
| <div id="child2"></div> |
| <h1 id="child3" slot="slot2"></h1> |
| <h2 id="child4" slot="slot1"></h2> |
| <h3 id="child5" slot="slot3"></h3> |
| </div> |
| |
| Running: modifyChild1 |
| - <div id="host1"> |
| - #shadow-root (open) |
| - <slot id="slot1" name="slot1"> |
| ↪ <span> reveal |
| ↪ <h2> reveal |
| </slot> |
| - <slot id="slot2" name="slot2"> |
| ↪ <h1> reveal |
| </slot> |
| - <slot id="slot3"> |
| ↪ <div> reveal |
| </slot> |
| <span id="child1" slot="slot1"></span> |
| <div id="child2"></div> |
| <h1 id="child3" slot="slot2"></h1> |
| <h2 id="child4" slot="slot1"></h2> |
| <h3 id="child5" slot="slot3"></h3> |
| </div> |
| |
| Running: modifyChild4 |
| - <div id="host1"> |
| - #shadow-root (open) |
| - <slot id="slot1" name="slot1"> |
| ↪ <span> reveal |
| </slot> |
| - <slot id="slot2" name="slot2"> |
| ↪ <h1> reveal |
| </slot> |
| - <slot id="slot3"> |
| ↪ <div> reveal |
| ↪ <h2> reveal |
| </slot> |
| <span id="child1" slot="slot1"></span> |
| <div id="child2"></div> |
| <h1 id="child3" slot="slot2"></h1> |
| <h2 id="child4"></h2> |
| <h3 id="child5" slot="slot3"></h3> |
| </div> |
| |
| Running: modifySlot1 |
| - <div id="host1"> |
| - #shadow-root (open) |
| - <slot id="slot1" name="slot3"> |
| ↪ <h3> reveal |
| </slot> |
| - <slot id="slot2" name="slot2"> |
| ↪ <h1> reveal |
| </slot> |
| - <slot id="slot3"> |
| ↪ <div> reveal |
| ↪ <h2> reveal |
| </slot> |
| <span id="child1" slot="slot1"></span> |
| <div id="child2"></div> |
| <h1 id="child3" slot="slot2"></h1> |
| <h2 id="child4"></h2> |
| <h3 id="child5" slot="slot3"></h3> |
| </div> |
| |
| Running: modifySlot2 |
| - <div id="host1"> |
| - #shadow-root (open) |
| - <slot id="slot1" name="slot3"> |
| ↪ <h3> reveal |
| </slot> |
| - <slot id="slot2" name="slot1"> |
| ↪ <span> reveal |
| </slot> |
| - <slot id="slot3"> |
| ↪ <div> reveal |
| ↪ <h2> reveal |
| </slot> |
| <span id="child1" slot="slot1"></span> |
| <div id="child2"></div> |
| <h1 id="child3" slot="slot2"></h1> |
| <h2 id="child4"></h2> |
| <h3 id="child5" slot="slot3"></h3> |
| </div> |
| |
| Running: removeChild3 |
| - <div id="host1"> |
| - #shadow-root (open) |
| - <slot id="slot1" name="slot3"> |
| ↪ <h3> reveal |
| </slot> |
| - <slot id="slot2" name="slot1"> |
| ↪ <span> reveal |
| </slot> |
| - <slot id="slot3"> |
| ↪ <div> reveal |
| ↪ <h2> reveal |
| </slot> |
| <span id="child1" slot="slot1"></span> |
| <div id="child2"></div> |
| <h2 id="child4"></h2> |
| <h3 id="child5" slot="slot3"></h3> |
| </div> |
| |
| Running: removeChild1 |
| - <div id="host1"> |
| - #shadow-root (open) |
| - <slot id="slot1" name="slot3"> |
| ↪ <h3> reveal |
| </slot> |
| - <slot id="slot2" name="slot1"> |
| </slot> |
| - <slot id="slot3"> |
| ↪ <div> reveal |
| ↪ <h2> reveal |
| </slot> |
| <div id="child2"></div> |
| <h2 id="child4"></h2> |
| <h3 id="child5" slot="slot3"></h3> |
| </div> |
| |
| Running: removeSlot1 |
| - <div id="host1"> |
| - #shadow-root (open) |
| - <slot id="slot2" name="slot1"> |
| </slot> |
| - <slot id="slot3"> |
| ↪ <div> reveal |
| ↪ <h2> reveal |
| </slot> |
| <div id="child2"></div> |
| <h2 id="child4"></h2> |
| <h3 id="child5" slot="slot3"></h3> |
| </div> |
| |
| Running: createHost2 |
| - <div id="host2"> |
| - #shadow-root (open) |
| - <slot id="slot1" name="slot3"> |
| </slot> |
| </div> |
| |
| Running: moveChild5FromHost1ToHost2 |
| - <div id="host2"> |
| - #shadow-root (open) |
| - <slot id="slot1" name="slot3"> |
| ↪ <h3> reveal |
| </slot> |
| <h3 id="child5" slot="slot3"></h3> |
| </div> |
| |
| Running: modifyChild4 |
| - <div id="host1"> |
| - #shadow-root (open) |
| - <slot id="slot2" name="slot1"> |
| ↪ <h2> reveal |
| </slot> |
| - <slot id="slot3"> |
| ↪ <div> reveal |
| </slot> |
| <div id="child2"></div> |
| <h2 id="child4" slot="slot1"></h2> |
| </div> |
| |
