| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script> |
| function changeElementDisplayValue(id, value) |
| { |
| document.getElementById(id).style.display = value; |
| } |
| |
| function appendElementToBody(tag, id) |
| { |
| let element = document.createElement(tag); |
| element.id = id; |
| document.body.appendChild(element); |
| } |
| |
| function test() |
| { |
| let documentNode; |
| |
| let suite = InspectorTest.createAsyncSuite("CSS.nodeLayoutContextTypeChanged"); |
| |
| function addTestCase({name, description, selector, setup, domNodeHandler}) |
| { |
| suite.addTestCase({ |
| name, |
| description, |
| setup, |
| async test() { |
| let nodeId = await documentNode.querySelector(selector); |
| let domNode = WI.domManager.nodeForId(nodeId); |
| InspectorTest.assert(domNode, `Should find DOM Node for selector '${selector}'.`); |
| await domNodeHandler(domNode); |
| }, |
| }); |
| } |
| |
| async function changeElementDisplayValue(id, value) |
| { |
| await InspectorTest.evaluateInPage(`changeElementDisplayValue("${id}", "${value}")`); |
| } |
| |
| async function appendElementToBody(tag, id) |
| { |
| await InspectorTest.evaluateInPage(`appendElementToBody("${tag}", "${id}")`); |
| } |
| |
| addTestCase({ |
| name: "CSS.nodeLayoutContextTypeChanged.GridToNonGrid", |
| description: "Change a `grid` to a non-grid.", |
| selector: "#gridToNonGrid", |
| async domNodeHandler(domNode) { |
| InspectorTest.expectEqual(domNode.layoutContextType, WI.DOMNode.LayoutContextType.Grid, "Layout context should be `grid`."); |
| |
| await Promise.all([ |
| domNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged), |
| changeElementDisplayValue("gridToNonGrid", "block"), |
| ]); |
| |
| InspectorTest.expectEqual(domNode.layoutContextType, null, "Layout context should now be `null`."); |
| } |
| }); |
| |
| addTestCase({ |
| name: "CSS.nodeLayoutContextTypeChanged.NonGridToGrid", |
| description: "Change a non-grid to a grid.", |
| selector: "#nonGridToGrid", |
| async domNodeHandler(domNode) { |
| InspectorTest.expectEqual(domNode.layoutContextType, null, "Layout context should be `null`."); |
| |
| await Promise.all([ |
| domNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged), |
| changeElementDisplayValue("nonGridToGrid", "grid"), |
| ]); |
| |
| InspectorTest.expectEqual(domNode.layoutContextType, WI.DOMNode.LayoutContextType.Grid, "Layout context should now be `grid`."); |
| } |
| }); |
| |
| addTestCase({ |
| name: "CSS.nodeLayoutContextTypeChanged.FlexToNonFlex", |
| description: "Change a flex container to a non-flex container.", |
| selector: "#flexToNonFlex", |
| async domNodeHandler(domNode) { |
| InspectorTest.expectEqual(domNode.layoutContextType, WI.DOMNode.LayoutContextType.Flex, "Layout context should be `flex`."); |
| |
| await Promise.all([ |
| domNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged), |
| changeElementDisplayValue("flexToNonFlex", "block"), |
| ]); |
| |
| InspectorTest.expectEqual(domNode.layoutContextType, null, "Layout context should now be `null`."); |
| } |
| }); |
| |
| addTestCase({ |
| name: "CSS.nodeLayoutContextTypeChanged.NonFlexToFlex", |
| description: "Change a non-flex container to a flex container.", |
| selector: "#nonFlexToFlex", |
| async domNodeHandler(domNode) { |
| InspectorTest.expectEqual(domNode.layoutContextType, null, "Layout context should be `null`."); |
| |
| await Promise.all([ |
| domNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged), |
| changeElementDisplayValue("nonFlexToFlex", "flex"), |
| ]); |
| |
| InspectorTest.expectEqual(domNode.layoutContextType, WI.DOMNode.LayoutContextType.Flex, "Layout context should now be `flex`."); |
| } |
| }); |
| |
| addTestCase({ |
| name: "CSS.nodeLayoutContextTypeChanged.GridToFlex", |
| description: "Change a non-flex container to a flex container.", |
| selector: "#gridToFlex", |
| async domNodeHandler(domNode) { |
| InspectorTest.expectEqual(domNode.layoutContextType, WI.DOMNode.LayoutContextType.Grid, "Layout context should now be `grid`."); |
| |
| await Promise.all([ |
| domNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged), |
| changeElementDisplayValue("gridToFlex", "flex"), |
| ]); |
| |
| InspectorTest.expectEqual(domNode.layoutContextType, WI.DOMNode.LayoutContextType.Flex, "Layout context should now be `flex`."); |
| } |
| }); |
| |
| function addEnsureLayoutContextTypeTestCase({name, description, selector, expectedLayoutContextType, setup}) |
| { |
| addTestCase({name, description, selector, setup, async domNodeHandler(domNode) { |
| InspectorTest.expectEqual(domNode.layoutContextType, expectedLayoutContextType, `Layout context should be \`${expectedLayoutContextType}\`.`); |
| } |
| }); |
| } |
| |
| addEnsureLayoutContextTypeTestCase({ |
| name: "CSS.nodeLayoutContextTypeChanged.NotFlex.SubmitInput", |
| description: "Make sure an `input` element of type `submit` is not considered a flex container.", |
| selector: "#flexSubmitInput", |
| expectedLayoutContextType: null, |
| }); |
| |
| addEnsureLayoutContextTypeTestCase({ |
| name: "CSS.nodeLayoutContextTypeChanged.NotFlex.Select", |
| description: "Make sure a `select` element is not considered a flex container.", |
| selector: "#flexSelect", |
| expectedLayoutContextType: null, |
| }); |
| |
| addEnsureLayoutContextTypeTestCase({ |
| name: "CSS.nodeLayoutContextTypeChanged.NotFlex.Button", |
| description: "Make sure a `button` is not considered a flex container.", |
| selector: "#flexButton", |
| expectedLayoutContextType: null, |
| }); |
| |
| addEnsureLayoutContextTypeTestCase({ |
| name: "CSS.nodeLayoutContextTypeChanged.NotFlex.DynamicallyAddedButton", |
| description: "Make sure a `button` that is added dynamically is not considered a flex container.", |
| selector: "#dynamicallyAddedFlexButton", |
| expectedLayoutContextType: null, |
| async setup() { |
| await appendElementToBody("button", "dynamicallyAddedFlexButton"); |
| } |
| }); |
| |
| WI.domManager.requestDocument().then((doc) => { |
| documentNode = doc; |
| suite.runTestCasesAndFinish(); |
| }); |
| } |
| </script> |
| <style> |
| .grid-container { |
| display: grid; |
| } |
| |
| .flex-container { |
| display: flex; |
| } |
| </style> |
| </head> |
| <body onload="runTest()"> |
| <p>Tests for the CSS.nodeLayoutContextTypeChanged event.</p> |
| <div id="gridToNonGrid" class="grid-container"> |
| <div></div> |
| <div></div> |
| </div> |
| |
| <div id="nonGridToGrid"> |
| <div></div> |
| <div></div> |
| </div> |
| |
| <div id="flexToNonFlex" class="flex-container"> |
| <div></div> |
| <div></div> |
| </div> |
| |
| <div id="nonFlexToFlex"> |
| <div></div> |
| <div></div> |
| </div> |
| |
| <div id="gridToFlex" class="grid-container"> |
| <div></div> |
| <div></div> |
| </div> |
| |
| <input type="submit" id="flexSubmitInput" /> |
| <select id="flexSelect"></select> |
| <button id="flexButton"></button> |
| </body> |
| </html> |