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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the grid toggle is hidden when the maximum number of grid highlighters
// have been reached.
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, gridInspector } = await openLayoutView();
const ruleView = selectRuleView(inspector);
const { document: doc } = gridInspector;
const { highlighters } = inspector;
const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
getHighlighterTestHelpers(inspector);
await selectNode("#grid1", inspector);
const gridList = doc.getElementById("grid-list");
const checkbox2 = gridList.children[1].querySelector("input");
const checkbox3 = gridList.children[2].querySelector("input");
const container = getRuleViewProperty(ruleView, ".grid", "display").valueSpan;
const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
info("Checking the initial state of the CSS grid toggle in the rule-view.");
ok(
!gridToggle.hasAttribute("disabled"),
"Grid highlighter toggle is not disabled."
);
ok(
!gridToggle.classList.contains("active"),
"Grid highlighter toggle button is not active."
);
ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
info("Toggling ON the CSS grid highlighter for #grid2.");
let onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
checkbox2.click();
await onHighlighterShown;
info(
"Checking the CSS grid toggle for #grid1 is not disabled and not active."
);
ok(
!gridToggle.hasAttribute("disabled"),
"Grid highlighter toggle is not disabled."
);
ok(
!gridToggle.classList.contains("active"),
"Grid highlighter toggle button is not active."
);
is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
info("Toggling ON the CSS grid highlighter for #grid3.");
onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
checkbox3.click();
await onHighlighterShown;
info("Checking the CSS grid toggle for #grid1 is disabled.");
ok(
gridToggle.hasAttribute("disabled"),
"Grid highlighter toggle is disabled."
);
is(highlighters.gridHighlighters.size, 2, "CSS grid highlighters are shown.");
info("Toggling OFF the CSS grid highlighter for #grid3.");
let onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
checkbox3.click();
await onHighlighterHidden;
info(
"Checking the CSS grid toggle for #grid1 is not disabled and not active."
);
ok(
!gridToggle.hasAttribute("disabled"),
"Grid highlighter toggle is not disabled."
);
ok(
!gridToggle.classList.contains("active"),
"Grid highlighter toggle button is not active."
);
is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
info("Toggling ON the CSS grid highlighter for #grid1 from the rule-view.");
onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
gridToggle.click();
await onHighlighterShown;
info("Checking the CSS grid toggle for #grid1 is not disabled.");
ok(
!gridToggle.hasAttribute("disabled"),
"Grid highlighter toggle is not disabled."
);
ok(
gridToggle.classList.contains("active"),
"Grid highlighter toggle is active."
);
is(highlighters.gridHighlighters.size, 2, "CSS grid highlighters are shown.");
info("Toggling OFF the CSS grid highlighter for #grid1 from the rule-view.");
onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
gridToggle.click();
await onHighlighterHidden;
info(
"Checking the CSS grid toggle for #grid1 is not disabled and not active."
);
ok(
!gridToggle.hasAttribute("disabled"),
"Grid highlighter toggle is not disabled."
);
ok(
!gridToggle.classList.contains("active"),
"Grid highlighter toggle button is not active."
);
is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
});
|
