Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"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."
);
});