Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Tests that markup display node shows for only for grid and flex containers.
const TEST_URI = `
<style type="text/css">
#grid {
display: grid;
}
#subgrid {
display: grid;
grid: subgrid / subgrid;
}
#flex {
display: flex;
}
#block {
display: block;
}
</style>
<div id="grid">
<div id="subgrid"></div>
</div>
<div id="flex">Flex</div>
<div id="block">Block</div>
<span>HELLO WORLD</span>
`;
add_task(async function () {
const { inspector } = await openInspectorForURL(
"data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
);
info("Check the display node is shown and the value of #grid.");
await selectNode("#grid", inspector);
const gridContainer = await getContainerForSelector("#grid", inspector);
const gridDisplayNode = gridContainer.elt.querySelector(
".inspector-badge.interactive[data-display]"
);
ok(gridDisplayNode, "#grid display node is shown.");
is(
gridDisplayNode.textContent,
"grid",
"Got the correct display type for #grid."
);
info("Check the display node is shown and the value of #subgrid.");
await selectNode("#subgrid", inspector);
const subgridContainer = await getContainerForSelector("#subgrid", inspector);
const subgridDisplayNode = subgridContainer.elt.querySelector(
".inspector-badge[data-display]"
);
ok(subgridDisplayNode, "#subgrid display node is shown");
is(
subgridDisplayNode.textContent,
"subgrid",
"Got the correct display type for #subgrid"
);
info("Check the display node is shown and the value of #flex.");
await selectNode("#flex", inspector);
const flexContainer = await getContainerForSelector("#flex", inspector);
const flexDisplayNode = flexContainer.elt.querySelector(
".inspector-badge.interactive[data-display]"
);
ok(flexDisplayNode, "#flex display node is shown.");
is(
flexDisplayNode.textContent,
"flex",
"Got the correct display type for #flex"
);
info("Check the display node is hidden for #block.");
await selectNode("#block", inspector);
const blockContainer = await getContainerForSelector("#block", inspector);
const blockDisplayNode = blockContainer.elt.querySelector(
".inspector-badge.interactive[data-display]"
);
ok(!blockDisplayNode, "#block display node is hidden.");
info("Check the display node is hidden for span.");
await selectNode("span", inspector);
const spanContainer = await getContainerForSelector("span", inspector);
const spanDisplayNode = spanContainer.elt.querySelector(
".inspector-badge.interactive[data-display]"
);
ok(!spanDisplayNode, "span display node is hidden.");
});