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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the list of grids show the subgrids in the correct nested list and toggling
// the CSS grid highlighter for a subgrid.
const TEST_URI = URL_ROOT + "doc_subgrid.html";
add_task(async function () {
await addTab(TEST_URI);
const { gridInspector, inspector } = await openLayoutView();
const { document: doc } = gridInspector;
const { highlighters, store } = inspector;
await selectNode(".container", inspector);
const gridListEl = doc.getElementById("grid-list");
const containerSubgridListEl = gridListEl.children[1];
const mainSubgridListEl = containerSubgridListEl.querySelector("ul");
info("Checking the initial state of the Grid Inspector.");
is(
getGridItemElements(gridListEl).length,
1,
"One grid container is listed."
);
is(
getGridItemElements(containerSubgridListEl).length,
2,
"Got the correct number of subgrids in div.container"
);
is(
getGridItemElements(mainSubgridListEl).length,
2,
"Got the correct number of subgrids in main.subgrid"
);
ok(
!highlighters.gridHighlighters.size &&
!highlighters.parentGridHighlighters.size,
"No CSS grid highlighter is shown."
);
info("Toggling ON the CSS grid highlighter for header.");
let onHighlighterShown = highlighters.once("grid-highlighter-shown");
let onCheckboxChange = waitUntilState(
store,
state => state.grids[1].highlighted
);
let checkbox = containerSubgridListEl.children[0].querySelector("input");
checkbox.click();
await onHighlighterShown;
await onCheckboxChange;
info(
"Checking the CSS grid highlighter and parent grid highlighter are created."
);
is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
is(
highlighters.parentGridHighlighters.size,
1,
"CSS grid highlighter for parent grid container is shown."
);
info("Toggling ON the CSS grid highlighter for main.");
onHighlighterShown = highlighters.once("grid-highlighter-shown");
onCheckboxChange = waitUntilState(
store,
state => state.grids[1].highlighted && state.grids[2].highlighted
);
checkbox = containerSubgridListEl.children[1].querySelector("input");
checkbox.click();
await onHighlighterShown;
await onCheckboxChange;
info("Checking the number of CSS grid highlighters present.");
is(
highlighters.gridHighlighters.size,
2,
"Got the correct number of CSS grid highlighter shown."
);
is(
highlighters.parentGridHighlighters.size,
1,
"Only 1 parent grid highlighter should be shown for the same subgrid parent."
);
info("Toggling OFF the CSS grid highlighter for main.");
let onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
onCheckboxChange = waitUntilState(
store,
state => state.grids[1].highlighted && !state.grids[2].highlighted
);
checkbox.click();
await onHighlighterHidden;
await onCheckboxChange;
info("Checking the number of CSS grid highlighters present.");
is(
highlighters.gridHighlighters.size,
1,
"Got the correct number of CSS grid highlighter shown."
);
is(
highlighters.parentGridHighlighters.size,
1,
"Got the correct number of CSS grid parent highlighter shown."
);
info("Toggling OFF the CSS grid highlighter for header.");
onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
onCheckboxChange = waitUntilState(
store,
state => !state.grids[1].highlighted
);
checkbox = containerSubgridListEl.children[0].querySelector("input");
checkbox.click();
await onHighlighterHidden;
await onCheckboxChange;
info("Checking the CSS grid highlighter is not shown.");
ok(
!highlighters.gridHighlighters.size &&
!highlighters.parentGridHighlighters.size,
"No CSS grid highlighter is shown."
);
});
/**
* Returns the grid item elements <li> from the grid list element <ul>.
*
* @param {Element} gridListEl
* The grid list element <ul>.
* @return {Array<Element>} containing the grid item elements <li>.
*/
function getGridItemElements(gridListEl) {
return [...gridListEl.children].filter(node => node.nodeName === "li");
}
|
