diff options
Diffstat (limited to '')
| -rw-r--r-- | devtools/client/inspector/markup/test/browser_markup_grid_display_badge_02.js | 256 |
1 files changed, 256 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_02.js b/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_02.js new file mode 100644 index 0000000000..7c66688f4e --- /dev/null +++ b/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_02.js @@ -0,0 +1,256 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests toggling multiple grid highlighters in the markup view with the grid display +// badges. + +const TEST_URI = ` + <style type='text/css'> + .grid { + display: grid; + } + </style> + <div id="grid1" class="grid"> + <div class="cell1">cell1</div> + <div class="cell2">cell2</div> + </div> + <div id="grid2" class="grid"> + <div class="cell1">cell1</div> + <div class="cell2">cell2</div> + </div> + <div id="grid3" class="grid"> + <div class="cell1">cell1</div> + <div class="cell2">cell2</div> + </div> +`; + +add_task(async function () { + await pushPref("devtools.gridinspector.maxHighlighters", 2); + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector } = await openLayoutView(); + const { highlighters } = inspector; + const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID; + const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } = + getHighlighterTestHelpers(inspector); + + const grid1 = await getContainerForSelector("#grid1", inspector); + const grid2 = await getContainerForSelector("#grid2", inspector); + const grid3 = await getContainerForSelector("#grid3", inspector); + const gridDisplayBadge1 = grid1.elt.querySelector( + ".inspector-badge.interactive[data-display]" + ); + const gridDisplayBadge2 = grid2.elt.querySelector( + ".inspector-badge.interactive[data-display]" + ); + const gridDisplayBadge3 = grid3.elt.querySelector( + ".inspector-badge.interactive[data-display]" + ); + + info( + "Check the initial state of the grid display badges and grid highlighters" + ); + ok( + !gridDisplayBadge1.classList.contains("active"), + "#grid1 display badge is not active." + ); + ok( + !gridDisplayBadge2.classList.contains("active"), + "#grid2 display badge is not active." + ); + ok( + !gridDisplayBadge3.classList.contains("active"), + "#grid3 display badge is not active." + ); + ok( + gridDisplayBadge1.classList.contains("interactive"), + "#grid1 display badge is interactive" + ); + ok( + gridDisplayBadge2.classList.contains("interactive"), + "#grid2 display badge is interactive" + ); + ok( + gridDisplayBadge3.classList.contains("interactive"), + "#grid3 display badge is interactive" + ); + ok( + !highlighters.gridHighlighters.size, + "No CSS grid highlighter exists in the highlighters overlay." + ); + + info("Toggling ON the CSS grid highlighter from the #grid1 display badge."); + let onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE); + gridDisplayBadge1.click(); + await onHighlighterShown; + + ok( + gridDisplayBadge1.classList.contains("active"), + "#grid1 display badge is active." + ); + ok( + !gridDisplayBadge2.classList.contains("active"), + "#grid2 display badge is not active." + ); + ok( + !gridDisplayBadge3.classList.contains("active"), + "#grid3 display badge is not active." + ); + ok( + gridDisplayBadge1.classList.contains("interactive"), + "#grid1 display badge is interactive" + ); + ok( + gridDisplayBadge2.classList.contains("interactive"), + "#grid2 display badge is interactive" + ); + ok( + gridDisplayBadge3.classList.contains("interactive"), + "#grid3 display badge is interactive" + ); + is( + highlighters.gridHighlighters.size, + 1, + "Got expected number of grid highlighters shown." + ); + + info("Toggling ON the CSS grid highlighter from the #grid2 display badge."); + onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE); + gridDisplayBadge2.click(); + await onHighlighterShown; + + ok( + gridDisplayBadge1.classList.contains("active"), + "#grid1 display badge is active." + ); + ok( + gridDisplayBadge2.classList.contains("active"), + "#grid2 display badge is active." + ); + ok( + !gridDisplayBadge3.classList.contains("active"), + "#grid3 display badge is not active." + ); + ok( + gridDisplayBadge1.classList.contains("interactive"), + "#grid1 display badge is interactive" + ); + ok( + gridDisplayBadge2.classList.contains("interactive"), + "#grid2 display badge is interactive" + ); + ok( + !gridDisplayBadge3.classList.contains("interactive"), + "#grid3 display badge is not interactive" + ); + is( + highlighters.gridHighlighters.size, + 2, + "Got expected number of grid highlighters shown." + ); + + info( + "Attempt to toggle ON the CSS grid highlighter from the #grid3 display badge." + ); + gridDisplayBadge3.click(); + + ok( + gridDisplayBadge1.classList.contains("active"), + "#grid1 display badge is active." + ); + ok( + gridDisplayBadge2.classList.contains("active"), + "#grid2 display badge is active." + ); + ok( + !gridDisplayBadge3.classList.contains("active"), + "#grid3 display badge is not active." + ); + ok( + gridDisplayBadge1.classList.contains("interactive"), + "#grid1 display badge is interactive" + ); + ok( + gridDisplayBadge2.classList.contains("interactive"), + "#grid2 display badge is interactive" + ); + ok( + !gridDisplayBadge3.classList.contains("interactive"), + "#grid3 display badge is not interactive" + ); + is( + highlighters.gridHighlighters.size, + 2, + "Got expected number of grid highlighters shown." + ); + + info("Toggling OFF the CSS grid highlighter from the #grid2 display badge."); + let onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE); + gridDisplayBadge2.click(); + await onHighlighterHidden; + + ok( + gridDisplayBadge1.classList.contains("active"), + "#grid1 display badge is active." + ); + ok( + !gridDisplayBadge2.classList.contains("active"), + "#grid2 display badge is not active." + ); + ok( + !gridDisplayBadge3.classList.contains("active"), + "#grid3 display badge is not active." + ); + ok( + gridDisplayBadge1.classList.contains("interactive"), + "#grid1 display badge is interactive" + ); + ok( + gridDisplayBadge2.classList.contains("interactive"), + "#grid2 display badge is interactive" + ); + ok( + gridDisplayBadge3.classList.contains("interactive"), + "#grid3 display badge is interactive" + ); + is( + highlighters.gridHighlighters.size, + 1, + "Got expected number of grid highlighters shown." + ); + + info("Toggling OFF the CSS grid highlighter from the #grid1 display badge."); + onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE); + gridDisplayBadge1.click(); + await onHighlighterHidden; + + ok( + !gridDisplayBadge1.classList.contains("active"), + "#grid1 display badge is not active." + ); + ok( + !gridDisplayBadge2.classList.contains("active"), + "#grid2 display badge is not active." + ); + ok( + !gridDisplayBadge3.classList.contains("active"), + "#grid3 display badge is not active." + ); + ok( + gridDisplayBadge1.classList.contains("interactive"), + "#grid1 display badge is interactive" + ); + ok( + gridDisplayBadge2.classList.contains("interactive"), + "#grid2 display badge is interactive" + ); + ok( + gridDisplayBadge3.classList.contains("interactive"), + "#grid3 display badge is interactive" + ); + ok( + !highlighters.gridHighlighters.size, + "No CSS grid highlighter exists in the highlighters overlay." + ); +}); |