Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Test that the markup view is correctly displayed when a component has children but no
// slots are available under the shadow root.
const TEST_URL = `data:text/html;charset=utf-8,
<style>
.has-before::before { content: "before-content" }
</style>
<div class="root">
<no-slot-component>
<div class="not-nested">light</div>
<div class="nested">
<div class="has-before"></div>
</div>
</no-slot-component>
<slot-component>
<div class="not-nested">light</div>
<div class="nested">
<div class="has-before"></div>
</div>
</slot-component>
</div>
<script>
'use strict';
customElements.define('no-slot-component', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<div class="no-slot-div"></div>';
}
});
customElements.define('slot-component', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<slot></slot>';
}
});
</script>`;
add_task(async function () {
const { inspector } = await openInspectorForURL(TEST_URL);
// We expect that host children are correctly displayed when no slots are defined.
const beforeTree = `
class="root"
no-slot-component
#shadow-root
no-slot-div
class="not-nested"
class="nested"
class="has-before"
slot-component
#shadow-root
slot
div!slotted
div!slotted
class="not-nested"
class="nested"
class="has-before"
::before`;
await assertMarkupViewAsTree(beforeTree, ".root", inspector);
info(
"Move the non-slotted element with class has-before and check the pseudo appears"
);
const mutated = waitForNMutations(inspector, "childList", 3);
SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
const root = content.document.querySelector(".root");
const hasBeforeEl = content.document.querySelector(
"no-slot-component .has-before"
);
root.appendChild(hasBeforeEl);
});
await mutated;
// As the non-slotted has-before is moved into the tree, the before pseudo is expected
// to appear.
const afterTree = `
class="root"
no-slot-component
#shadow-root
no-slot-div
class="not-nested"
class="nested"
slot-component
#shadow-root
slot
div!slotted
div!slotted
class="not-nested"
class="nested"
class="has-before"
::before
class="has-before"
::before`;
await assertMarkupViewAsTree(afterTree, ".root", inspector);
});