browser_markup_shadowdom_slotupdate.js (1897B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Test that slotted elements are correctly updated when the slot attribute is modified 7 // on already slotted elements. 8 9 const TEST_URL = `data:text/html;charset=utf-8, 10 <test-component> 11 <div slot="slot1">slot1-1</div> 12 <div slot="slot1">slot1-2</div> 13 <div slot="slot2" id="to-update">slot2-1</div> 14 <div slot="slot2">slot2-2</div> 15 </test-component> 16 17 <script> 18 'use strict'; 19 customElements.define('test-component', class extends HTMLElement { 20 constructor() { 21 super(); 22 let shadowRoot = this.attachShadow({mode: 'open'}); 23 shadowRoot.innerHTML = '<slot name="slot1"></slot><slot name="slot2"></slot>'; 24 } 25 }); 26 </script>`; 27 28 add_task(async function () { 29 const { inspector } = await openInspectorForURL(TEST_URL); 30 31 const tree = ` 32 test-component 33 #shadow-root 34 name="slot1" 35 div!slotted 36 div!slotted 37 name="slot2" 38 div!slotted 39 div!slotted 40 slot1-1 41 slot1-2 42 slot2-1 43 slot2-2`; 44 await assertMarkupViewAsTree(tree, "test-component", inspector); 45 46 info("Listening for the markupmutation event"); 47 const mutated = inspector.once("markupmutation"); 48 SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () { 49 content.document.getElementById("to-update").setAttribute("slot", "slot1"); 50 }); 51 await mutated; 52 53 // After mutation we expect slot1 to have one more slotted node, and slot2 one less. 54 const mutatedTree = ` 55 test-component 56 #shadow-root 57 name="slot1" 58 div!slotted 59 div!slotted 60 div!slotted 61 name="slot2" 62 div!slotted 63 slot1-1 64 slot1-2 65 slot2-1 66 slot2-2`; 67 await assertMarkupViewAsTree(mutatedTree, "test-component", inspector); 68 });