| <!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 test() |
| { |
| let suite = InspectorTest.createAsyncSuite("CSS.setLayoutContextTypeChangedMode"); |
| |
| async function changeElementDisplayValue(id, value) |
| { |
| await InspectorTest.evaluateInPage(`changeElementDisplayValue("${id}", "${value}")`); |
| } |
| |
| async function setLayoutContextTypeChangeMode(layoutContextTypeChangedMode) |
| { |
| WI.cssManager.layoutContextTypeChangedMode = layoutContextTypeChangedMode; |
| } |
| |
| suite.addTestCase({ |
| name: "CSS.setLayoutContextTypeChangedMode.queryGrid", |
| description: "Test that the expected number of grids are instrumented without chagning the LayoutContextTypeChangedMode.", |
| async test() { |
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 0, "0 grid nodes should be instrumented."); |
| |
| // Query for the node, sending it to the frontend. |
| InspectorTest.log("Querying document for selector `#queryGrid`..."); |
| let documentNode = await WI.domManager.requestDocument(); |
| let queryNode = WI.domManager.nodeForId(await documentNode.querySelector("#queryGrid")); |
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 1, "1 grid node should be instrumented."); |
| |
| InspectorTest.log("Changing `#queryGrid` to `display: block;`..."); |
| await Promise.all([ |
| queryNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged), |
| changeElementDisplayValue("queryGrid", "block"), |
| ]); |
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 0, "0 grid nodes should be instrumented."); |
| |
| InspectorTest.log("Changing `#queryGrid` to `display: grid;`..."); |
| await Promise.all([ |
| queryNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged), |
| changeElementDisplayValue("queryGrid", "grid"), |
| ]); |
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 1, "1 grid node should be instrumented."); |
| |
| InspectorTest.log("Changing `#queryGrid` to `display: block;`..."); |
| await Promise.all([ |
| queryNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged), |
| changeElementDisplayValue("queryGrid", "block"), |
| ]); |
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 0, "0 grid nodes should be instrumented."); |
| |
| InspectorTest.log("Changing `#queryGrid` to `display: inline-grid;`..."); |
| await Promise.all([ |
| queryNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged), |
| changeElementDisplayValue("queryGrid", "inline-grid"), |
| ]); |
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 1, "1 grid node should be instrumented."); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "CSS.setLayoutContextTypeChangedMode.normalGrid", |
| description: "Test that grids become instrumented when chagning the mode to `All`.", |
| async test() { |
| await WI.domManager.requestDocument(); |
| |
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 1, "1 grid node should be instrumented."); |
| |
| // Grid layout contexts are sent to the frontend when the mode is changed to all. |
| InspectorTest.log("Changing `layoutContextTypeChangedMode` to `All`..."); |
| await Promise.all([ |
| WI.domManager.awaitEvent(WI.DOMManager.Event.NodeInserted), |
| setLayoutContextTypeChangeMode(WI.CSSManager.LayoutContextTypeChangedMode.All), |
| ]); |
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 2, "2 grid nodes should be instrumented."); |
| |
| // Once a node has been observed, it will always be kept up-to-date. |
| InspectorTest.log("Changing `layoutContextTypeChangedMode` to `Observed`..."); |
| await setLayoutContextTypeChangeMode(WI.CSSManager.LayoutContextTypeChangedMode.Observed), |
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 2, "2 grid nodes should be instrumented."); |
| |
| InspectorTest.log("Changing `#normalGrid` to `display: block;`..."); |
| await Promise.all([ |
| WI.DOMNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged), |
| changeElementDisplayValue("normalGrid", "block"), |
| ]); |
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 1, "1 grid node should be instrumented."); |
| |
| InspectorTest.log("Changing `#normalGrid` to `display: grid;`..."); |
| await Promise.all([ |
| WI.DOMNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged), |
| changeElementDisplayValue("normalGrid", "grid"), |
| ]); |
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 2, "2 grid nodes should be instrumented."); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "CSS.setLayoutContextTypeChangedMode.normalNonGrid", |
| description: "Ensure that layout context type changes for unobserved nodes do not fire events when the mode is `Observed`.", |
| async test() { |
| await WI.domManager.requestDocument(); |
| |
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 2, "2 grid nodes should be instrumented."); |
| |
| // Changes to unobserved nodes should not change the grid count. |
| InspectorTest.log("Changing `#normalNonGrid` to `display: grid;`..."); |
| await changeElementDisplayValue("normalNonGrid", "grid"); |
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 2, "2 grid nodes should be instrumented."); |
| |
| InspectorTest.log("Changing `#normalNonGrid` to `display: block;`..."); |
| await changeElementDisplayValue("normalNonGrid", "block"); |
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 2, "2 grid nodes should be instrumented."); |
| |
| // Enabling `All` mode should not change the grid count. |
| InspectorTest.log("Changing `layoutContextTypeChangedMode` to `All`..."); |
| await setLayoutContextTypeChangeMode(WI.CSSManager.LayoutContextTypeChangedMode.All), |
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 2, "2 grid nodes should be instrumented."); |
| |
| // Changing a node to a grid after enabling `All` mode will increase the count. |
| InspectorTest.log("Changing `#normalNonGrid` to `display: grid;`..."); |
| await Promise.all([ |
| WI.DOMNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged), |
| changeElementDisplayValue("normalNonGrid", "grid"), |
| ]); |
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 3, "3 grid nodes should be instrumented."); |
| |
| InspectorTest.log("Changing `#normalNonGrid` to `display: block;`..."); |
| await Promise.all([ |
| WI.DOMNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged), |
| changeElementDisplayValue("normalNonGrid", "block"), |
| ]); |
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 2, "2 grid nodes should be instrumented."); |
| } |
| }); |
| |
| suite.runTestCasesAndFinish(); |
| } |
| </script> |
| <style> |
| .grid-container { |
| display: grid; |
| } |
| </style> |
| </head> |
| <body onload="runTest()"> |
| <p>Tests for the CSS.setLayoutContextTypeChangedMode command.</p> |
| <div id="queryGrid" class="grid-container"> |
| <div></div> |
| <div></div> |
| </div> |
| |
| <div> |
| <div id="normalGrid" class="grid-container"> |
| <div></div> |
| <div></div> |
| </div> |
| </div> |
| |
| <div> |
| <div id="normalNonGrid"> |
| <div></div> |
| <div></div> |
| </div> |
| </div> |
| </body> |
| </html> |
