173 lines
8.7 KiB
HTML
173 lines
8.7 KiB
HTML
<!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> |