| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script> |
| customElements.define("test-element", class TestElement extends HTMLElement { |
| connectedCallback() { |
| let shadowRoot = this.attachShadow({ |
| mode: "open", |
| slotAssignment: this.id.substring(0, this.id.indexOf("-")), |
| }); |
| |
| this._slotElement = shadowRoot.appendChild(document.createElement("slot")); |
| this._slotElement.name = "test-slot"; |
| } |
| |
| assign(...nodes) { |
| this._slotElement.assign(...nodes); |
| } |
| }); |
| |
| function test() |
| { |
| let suite = InspectorTest.createAsyncSuite("CSS.nodeLayoutFlagsChanged.SlotFilled"); |
| |
| function addTestCase({name, selector, domNodeHandler}) |
| { |
| suite.addTestCase({ |
| name, |
| async test() { |
| let documentNode = await WI.domManager.requestDocument(); |
| |
| let containerNodeId = await documentNode.querySelector(selector); |
| let containerNode = WI.domManager.nodeForId(containerNodeId); |
| InspectorTest.assert(containerNode, `Should find DOM Node for selector '${selector}'.`); |
| |
| let slotNodeId = await containerNode.shadowRoots()[0].querySelector("slot"); |
| let slotNode = WI.domManager.nodeForId(slotNodeId); |
| InspectorTest.assert(slotNode, `Should find <slot> inside DOM Node for selector '${selector}'.`); |
| |
| await domNodeHandler(slotNode); |
| }, |
| }); |
| } |
| |
| addTestCase({ |
| name: "CSS.nodeLayoutFlagsChanged.SlotFilled.Named.Empty", |
| selector: "#named-empty", |
| async domNodeHandler(domNode) { |
| InspectorTest.expectFalse(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotFilled), "Should not be filled."); |
| |
| InspectorTest.log("Changing slot of child..."); |
| await Promise.all([ |
| domNode.awaitEvent(WI.DOMNode.Event.LayoutFlagsChanged), |
| InspectorTest.evaluateInPage(`document.querySelector("#named-empty-1").slot = "test-slot"`), |
| ]); |
| InspectorTest.expectTrue(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotFilled), "Should be filled."); |
| |
| let listener = domNode.addEventListener(WI.DOMNode.Event.LayoutFlagsChanged, (event) => { |
| InspectorTest.fail("Should not change layout flags."); |
| }); |
| |
| InspectorTest.log("Adding child with slot..."); |
| await InspectorTest.evaluateInPage(`document.querySelector("#named-empty").appendChild(document.querySelector("#named-empty-2"))`); |
| InspectorTest.expectTrue(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotFilled), "Should be filled."); |
| |
| domNode.removeEventListener(WI.DOMNode.Event.LayoutFlagsChanged, listener); |
| }, |
| }); |
| |
| addTestCase({ |
| name: "CSS.nodeLayoutFlagsChanged.SlotFilled.Named.Filled", |
| selector: "#named-filled", |
| async domNodeHandler(domNode) { |
| InspectorTest.expectTrue(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotFilled), "Should be filled."); |
| |
| let listener = domNode.addEventListener(WI.DOMNode.Event.LayoutFlagsChanged, (event) => { |
| InspectorTest.fail("Should not change layout flags."); |
| }); |
| |
| InspectorTest.log("Removing first assigned node..."); |
| await InspectorTest.evaluateInPage(`document.querySelector("#named-filled-1").remove()`); |
| InspectorTest.expectTrue(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotFilled), "Should be filled."); |
| |
| domNode.removeEventListener(WI.DOMNode.Event.LayoutFlagsChanged, listener); |
| |
| InspectorTest.log("Removing last assigned node..."); |
| await Promise.all([ |
| domNode.awaitEvent(WI.DOMNode.Event.LayoutFlagsChanged), |
| InspectorTest.evaluateInPage(`document.querySelector("#named-filled-2").slot = "invalid-slot"`), |
| ]); |
| InspectorTest.expectFalse(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotFilled), "Should not be filled."); |
| }, |
| }); |
| |
| addTestCase({ |
| name: "CSS.nodeLayoutFlagsChanged.SlotFilled.Manual.Empty", |
| selector: "#manual-empty", |
| async domNodeHandler(domNode) { |
| InspectorTest.expectFalse(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotFilled), "Should not be filled."); |
| |
| InspectorTest.log("Adding second child as assigned node..."); |
| await Promise.all([ |
| domNode.awaitEvent(WI.DOMNode.Event.LayoutFlagsChanged), |
| InspectorTest.evaluateInPage(`document.querySelector("#manual-empty").assign(document.querySelector("#manual-empty-2"))`), |
| ]); |
| InspectorTest.expectTrue(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotFilled), "Should be filled."); |
| |
| let listener = domNode.addEventListener(WI.DOMNode.Event.LayoutFlagsChanged, (event) => { |
| InspectorTest.fail("Should not change layout flags."); |
| }); |
| |
| InspectorTest.log("Adding first child as assigned node..."); |
| await InspectorTest.evaluateInPage(`document.querySelector("#manual-empty").assign(...document.querySelectorAll("#manual-empty > span"))`); |
| InspectorTest.expectTrue(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotFilled), "Should be filled."); |
| |
| domNode.removeEventListener(WI.DOMNode.Event.LayoutFlagsChanged, listener); |
| }, |
| }); |
| |
| addTestCase({ |
| name: "CSS.nodeLayoutFlagsChanged.SlotFilled.Manual.Filled", |
| selector: "#manual-filled", |
| async domNodeHandler(domNode) { |
| InspectorTest.expectTrue(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotFilled), "Should be filled."); |
| |
| let listener = domNode.addEventListener(WI.DOMNode.Event.LayoutFlagsChanged, (event) => { |
| InspectorTest.fail("Should not change layout flags."); |
| }); |
| |
| InspectorTest.log("Removing first assigned node..."); |
| await InspectorTest.evaluateInPage(`document.querySelector("#manual-filled").assign(document.querySelector("#manual-filled-2"))`); |
| InspectorTest.expectTrue(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotFilled), "Should be filled."); |
| |
| domNode.removeEventListener(WI.DOMNode.Event.LayoutFlagsChanged, listener); |
| |
| InspectorTest.log("Removing last assigned node..."); |
| await Promise.all([ |
| domNode.awaitEvent(WI.DOMNode.Event.LayoutFlagsChanged), |
| InspectorTest.evaluateInPage(`document.querySelector("#manual-filled").assign()`), |
| ]); |
| InspectorTest.expectFalse(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotFilled), "Should not be filled."); |
| }, |
| }); |
| |
| suite.runTestCasesAndFinish(); |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <test-element id="named-empty"> |
| <span slot="invalid-slot" id="named-empty-1"></span> |
| </test-element> |
| <span slot="test-slot" id="named-empty-2"></span> |
| |
| <test-element id="named-filled"> |
| <span slot="test-slot" id="named-filled-1"></span> |
| <span slot="test-slot" id="named-filled-2"></span> |
| </test-element> |
| |
| <test-element id="manual-empty"> |
| <span slot="test-slot" id="manual-empty-1"></span> |
| <span slot="test-slot" id="manual-empty-2"></span> |
| </test-element> |
| |
| <test-element id="manual-filled"> |
| <span slot="invalid-slot" id="manual-filled-1"></span> |
| <span slot="invalid-slot" id="manual-filled-2"></span> |
| </test-element> |
| |
| <script> |
| document.querySelector("#manual-filled").assign(...document.querySelectorAll("#manual-filled > span")); |
| </script> |
| </body> |
| </html> |
