browser_markup_shadowdom_dynamic.js (4656B)
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 the inspector is correctly updated when shadow roots are attached to 7 // components after displaying them in the markup view. 8 9 const TEST_URL = 10 `data:text/html;charset=utf-8,` + 11 encodeURIComponent(` 12 <div id="root"> 13 <test-component> 14 <div slot="slot1" id="el1">slot1-1</div> 15 <div slot="slot1" id="el2">slot1-2</div> 16 </test-component> 17 <inline-component>inline text</inline-component> 18 </div> 19 20 <script> 21 'use strict'; 22 window.attachTestComponent = function () { 23 customElements.define('test-component', class extends HTMLElement { 24 constructor() { 25 super(); 26 let shadowRoot = this.attachShadow({mode: 'open'}); 27 shadowRoot.innerHTML = \`<div id="slot1-container"> 28 <slot name="slot1"></slot> 29 </div> 30 <other-component> 31 <div slot="slot2">slot2-1</div> 32 </other-component>\`; 33 } 34 }); 35 } 36 37 window.attachOtherComponent = function () { 38 customElements.define('other-component', class extends HTMLElement { 39 constructor() { 40 super(); 41 let shadowRoot = this.attachShadow({mode: 'open'}); 42 shadowRoot.innerHTML = \`<div id="slot2-container"> 43 <slot name="slot2"></slot> 44 <div>some-other-node</div> 45 </div>\`; 46 } 47 }); 48 } 49 50 window.attachInlineComponent = function () { 51 customElements.define('inline-component', class extends HTMLElement { 52 constructor() { 53 super(); 54 let shadowRoot = this.attachShadow({mode: 'open'}); 55 shadowRoot.innerHTML = \`<div id="inline-component-content"> 56 <div>some-inline-content</div> 57 </div>\`; 58 } 59 }); 60 } 61 </script>`); 62 63 add_task(async function () { 64 const { inspector } = await openInspectorForURL(TEST_URL); 65 66 const tree = ` 67 div 68 test-component 69 slot1-1 70 slot1-2 71 inline text`; 72 await assertMarkupViewAsTree(tree, "#root", inspector); 73 74 info("Attach a shadow root to test-component"); 75 let mutated = waitForMutation(inspector, "shadowRootAttached"); 76 SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () { 77 content.wrappedJSObject.attachTestComponent(); 78 }); 79 await mutated; 80 81 const treeAfterTestAttach = ` 82 div 83 test-component 84 #shadow-root 85 slot1-container 86 slot 87 div!slotted 88 div!slotted 89 other-component 90 slot2-1 91 slot1-1 92 slot1-2 93 inline text`; 94 await assertMarkupViewAsTree(treeAfterTestAttach, "#root", inspector); 95 96 info("Attach a shadow root to other-component, nested in test-component"); 97 mutated = waitForMutation(inspector, "shadowRootAttached"); 98 SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () { 99 content.wrappedJSObject.attachOtherComponent(); 100 }); 101 await mutated; 102 103 const treeAfterOtherAttach = ` 104 div 105 test-component 106 #shadow-root 107 slot1-container 108 slot 109 div!slotted 110 div!slotted 111 other-component 112 #shadow-root 113 slot2-container 114 slot 115 div!slotted 116 some-other-node 117 slot2-1 118 slot1-1 119 slot1-2 120 inline text`; 121 await assertMarkupViewAsTree(treeAfterOtherAttach, "#root", inspector); 122 123 info( 124 "Attach a shadow root to inline-component, check the inline text child." 125 ); 126 mutated = waitForMutation(inspector, "shadowRootAttached"); 127 SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () { 128 content.wrappedJSObject.attachInlineComponent(); 129 }); 130 await mutated; 131 132 const treeAfterInlineAttach = ` 133 div 134 test-component 135 #shadow-root 136 slot1-container 137 slot 138 div!slotted 139 div!slotted 140 other-component 141 #shadow-root 142 slot2-container 143 slot 144 div!slotted 145 some-other-node 146 slot2-1 147 slot1-1 148 slot1-2 149 inline-component 150 #shadow-root 151 inline-component-content 152 some-inline-content 153 inline text`; 154 await assertMarkupViewAsTree(treeAfterInlineAttach, "#root", inspector); 155 });