1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the grid display badge toggles on the grid highlighter.
const TEST_URI = `
<style type="text/css">
#grid {
display: grid;
}
</style>
<div id="grid"></div>
`;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector } = await openLayoutView();
const { highlighters, store } = inspector;
const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
getHighlighterTestHelpers(inspector);
info("Check the grid display badge is shown and not active.");
await selectNode("#grid", inspector);
const gridContainer = await getContainerForSelector("#grid", inspector);
const gridDisplayBadge = gridContainer.elt.querySelector(
".inspector-badge.interactive[data-display]"
);
ok(
!gridDisplayBadge.classList.contains("active"),
"grid display badge is not active."
);
ok(
gridDisplayBadge.classList.contains("interactive"),
"grid display badge is interactive."
);
info("Check the initial state of the grid highlighter.");
ok(
!highlighters.gridHighlighters.size,
"No CSS grid highlighter exists in the highlighters overlay."
);
info("Toggling ON the CSS grid highlighter from the grid display badge.");
const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
let onCheckboxChange = waitUntilState(
store,
state => state.grids.length === 1 && state.grids[0].highlighted
);
gridDisplayBadge.click();
await onHighlighterShown;
await onCheckboxChange;
info(
"Check that the CSS grid highlighter is created and the display badge state."
);
is(
highlighters.gridHighlighters.size,
1,
"CSS grid highlighter is created in the highlighters overlay."
);
ok(
gridDisplayBadge.classList.contains("active"),
"grid display badge is active."
);
ok(
gridDisplayBadge.classList.contains("interactive"),
"grid display badge is interactive."
);
info("Toggling OFF the CSS grid highlighter from the grid display badge.");
const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
onCheckboxChange = waitUntilState(
store,
state => state.grids.length == 1 && !state.grids[0].highlighted
);
gridDisplayBadge.click();
await onHighlighterHidden;
await onCheckboxChange;
ok(
!gridDisplayBadge.classList.contains("active"),
"grid display badge is not active."
);
ok(
gridDisplayBadge.classList.contains("interactive"),
"grid display badge is interactive."
);
});
|
