browser_markup_shadowdom_noslot.js (3011B)
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 markup view is correctly displayed when a component has children but no 7 // slots are available under the shadow root. 8 9 const TEST_URL = `data:text/html;charset=utf-8, 10 <style> 11 .has-before::before { content: "before-content" } 12 </style> 13 14 <div class="root"> 15 <no-slot-component> 16 <div class="not-nested">light</div> 17 <div class="nested"> 18 <div class="has-before"></div> 19 <div>dummy for Bug 1441863</div> 20 </div> 21 </no-slot-component> 22 <slot-component> 23 <div class="not-nested">light</div> 24 <div class="nested"> 25 <div class="has-before"></div> 26 </div> 27 </slot-component> 28 </div> 29 30 <script> 31 'use strict'; 32 customElements.define('no-slot-component', class extends HTMLElement { 33 constructor() { 34 super(); 35 let shadowRoot = this.attachShadow({mode: 'open'}); 36 shadowRoot.innerHTML = '<div class="no-slot-div"></div>'; 37 } 38 }); 39 customElements.define('slot-component', class extends HTMLElement { 40 constructor() { 41 super(); 42 let shadowRoot = this.attachShadow({mode: 'open'}); 43 shadowRoot.innerHTML = '<slot></slot>'; 44 } 45 }); 46 </script>`; 47 48 add_task(async function () { 49 const { inspector } = await openInspectorForURL(TEST_URL); 50 51 // We expect that host children are correctly displayed when no slots are defined. 52 const beforeTree = ` 53 class="root" 54 no-slot-component 55 #shadow-root 56 no-slot-div 57 class="not-nested" 58 class="nested" 59 class="has-before" 60 dummy for Bug 1441863 61 slot-component 62 #shadow-root 63 slot 64 div!slotted 65 div!slotted 66 class="not-nested" 67 class="nested" 68 class="has-before" 69 ::before`; 70 await assertMarkupViewAsTree(beforeTree, ".root", inspector); 71 72 info( 73 "Move the non-slotted element with class has-before and check the pseudo appears" 74 ); 75 const mutated = waitForNMutations(inspector, "childList", 3); 76 SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () { 77 const root = content.document.querySelector(".root"); 78 const hasBeforeEl = content.document.querySelector( 79 "no-slot-component .has-before" 80 ); 81 root.appendChild(hasBeforeEl); 82 }); 83 await mutated; 84 85 // As the non-slotted has-before is moved into the tree, the before pseudo is expected 86 // to appear. 87 const afterTree = ` 88 class="root" 89 no-slot-component 90 #shadow-root 91 no-slot-div 92 class="not-nested" 93 class="nested" 94 dummy for Bug 1441863 95 slot-component 96 #shadow-root 97 slot 98 div!slotted 99 div!slotted 100 class="not-nested" 101 class="nested" 102 class="has-before" 103 ::before 104 class="has-before" 105 ::before`; 106 await assertMarkupViewAsTree(afterTree, ".root", inspector); 107 });