diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/markup/test/browser_markup_display_node_01.js | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_display_node_01.js b/devtools/client/inspector/markup/test/browser_markup_display_node_01.js new file mode 100644 index 0000000000..6082d586c1 --- /dev/null +++ b/devtools/client/inspector/markup/test/browser_markup_display_node_01.js @@ -0,0 +1,91 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"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."); +}); |