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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the grid highlighters are re-displayed after reloading a page and multiple
// grids are highlighted.
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>
<div id="grid4" class="grid">
<div class="cell1">cell1</div>
<div class="cell2">cell2</div>
</div>
`;
add_task(async function () {
await pushPref("devtools.gridinspector.maxHighlighters", 3);
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { gridInspector, inspector } = await openLayoutView();
const { document: doc } = gridInspector;
const { highlighters, store } = inspector;
await selectNode("#grid1", inspector);
const gridList = doc.getElementById("grid-list");
const checkbox1 = gridList.children[0].querySelector("input");
const checkbox2 = gridList.children[1].querySelector("input");
const checkbox3 = gridList.children[2].querySelector("input");
info("Toggling ON the CSS grid highlighter for #grid1.");
let onHighlighterShown = highlighters.once("grid-highlighter-shown");
let onCheckboxChange = waitUntilState(
store,
state =>
state.grids.length == 4 &&
state.grids[0].highlighted &&
!state.grids[0].disabled &&
!state.grids[1].highlighted &&
!state.grids[1].disabled &&
!state.grids[2].highlighted &&
!state.grids[2].disabled &&
!state.grids[3].highlighted &&
!state.grids[3].disabled
);
checkbox1.click();
await onHighlighterShown;
await onCheckboxChange;
info("Toggling ON the CSS grid highlighter for #grid2.");
onHighlighterShown = highlighters.once("grid-highlighter-shown");
onCheckboxChange = waitUntilState(
store,
state =>
state.grids.length == 4 &&
state.grids[0].highlighted &&
!state.grids[0].disabled &&
state.grids[1].highlighted &&
!state.grids[1].disabled &&
!state.grids[2].highlighted &&
!state.grids[2].disabled &&
!state.grids[3].highlighted &&
!state.grids[3].disabled
);
checkbox2.click();
await onHighlighterShown;
await onCheckboxChange;
info("Toggling ON the CSS grid highlighter for #grid3.");
onHighlighterShown = highlighters.once("grid-highlighter-shown");
onCheckboxChange = waitUntilState(
store,
state =>
state.grids.length == 4 &&
state.grids[0].highlighted &&
!state.grids[0].disabled &&
state.grids[1].highlighted &&
!state.grids[1].disabled &&
state.grids[2].highlighted &&
!state.grids[2].disabled &&
!state.grids[3].highlighted &&
state.grids[3].disabled
);
checkbox3.click();
await onHighlighterShown;
await onCheckboxChange;
info(
"Check that the CSS grid highlighters are created and the saved grid state."
);
is(
highlighters.gridHighlighters.size,
3,
"Got expected number of grid highlighters shown."
);
is(
highlighters.state.grids.size,
3,
"Got expected number of grids in the saved state"
);
info(
"Reload the page, expect the highlighters to be displayed once again and " +
"grids are checked"
);
const onStateRestored = waitForNEvents(
highlighters,
"highlighter-restored",
3
);
const onGridListRestored = waitUntilState(
store,
state =>
state.grids.length == 4 &&
state.grids[0].highlighted &&
!state.grids[0].disabled &&
state.grids[1].highlighted &&
!state.grids[1].disabled &&
state.grids[2].highlighted &&
!state.grids[2].disabled &&
!state.grids[3].highlighted &&
state.grids[3].disabled
);
await reloadBrowser();
await onStateRestored;
await onGridListRestored;
info(
"Check that the grid highlighters can be displayed after reloading the page"
);
is(
highlighters.gridHighlighters.size,
3,
"Got expected number of grid highlighters shown."
);
is(
highlighters.state.grids.size,
3,
"Got expected number of grids in the saved state"
);
});
|
