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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the text editor correctly calculates the grid line names shown in the
// autocomplete popup. We generally want to show all the grid line names for a grid
// container, except for implicit line names created by an implicitly named area.
const TEST_URL = URL_ROOT + "doc_grid_area_gridline_names.html";
add_task(async function () {
await addTab(TEST_URL);
const { inspector, view } = await openRuleView();
info(
"Test that implicit grid line names from explicit grid areas are shown."
);
await testExplicitNamedAreas(inspector, view);
info(
"Test that explicit grid line names creating implicit grid areas are shown."
);
await testImplicitNamedAreasWithExplicitGridLineNames(inspector, view);
info(
"Test that implicit grid line names creating implicit grid areas are not shown."
);
await testImplicitAreasWithImplicitGridLineNames(inspector, view);
await testImplicitNamedAreasWithReversedGridLineNames(inspector, view);
});
async function testExplicitNamedAreas(inspector, view) {
await selectNode(".header", inspector);
const gridColLines = ["header-start", "header-end", "main-start", "main-end"];
const propertyName = view.styleDocument.querySelectorAll(
".ruleview-propertyvalue"
)[0];
const gridLineNamesUpdated = inspector.once("grid-line-names-updated");
const editor = await focusEditableField(view, propertyName);
const onPopupShown = once(editor.popup, "popup-opened");
await gridLineNamesUpdated;
EventUtils.synthesizeKey("VK_DOWN", { shiftKey: true }, view.styleWindow);
await onPopupShown;
info(
"Check that the expected grid line column names are shown in the editor popup."
);
for (const lineName of gridColLines) {
ok(
editor.gridLineNames.cols.indexOf(lineName) > -1,
`${lineName} is a suggested implicit grid line`
);
}
}
async function testImplicitNamedAreasWithExplicitGridLineNames(
inspector,
view
) {
await selectNode(".contentArea", inspector);
const gridRowLines = [
"main-start",
"main-end",
"content-start",
"content-end",
];
const propertyName = view.styleDocument.querySelectorAll(
".ruleview-propertyvalue"
)[1];
const gridLineNamesUpdated = inspector.once("grid-line-names-updated");
const editor = await focusEditableField(view, propertyName);
const onPopupShown = once(editor.popup, "popup-opened");
await gridLineNamesUpdated;
EventUtils.synthesizeKey("VK_DOWN", { shiftKey: true }, view.styleWindow);
await onPopupShown;
info(
"Check that the expected grid line row names are shown in the editor popup."
);
for (const lineName of gridRowLines) {
ok(
editor.gridLineNames.rows.indexOf(lineName) > -1,
`${lineName} is a suggested explicit grid line`
);
}
}
async function testImplicitAreasWithImplicitGridLineNames(inspector, view) {
await selectNode(".a", inspector);
const propertyName = view.styleDocument.querySelectorAll(
".ruleview-propertyvalue"
)[0];
const gridLineNamesUpdated = inspector.once("grid-line-names-updated");
const editor = await focusEditableField(view, propertyName);
const onPopupShown = once(editor.popup, "popup-opened");
await gridLineNamesUpdated;
EventUtils.synthesizeKey("VK_DOWN", { shiftKey: true }, view.styleWindow);
await onPopupShown;
info(
"Check that the implicit grid lines created by implicit areas are not shown."
);
ok(
!(editor.gridLineNames.cols.indexOf("a-end") > -1),
"a-end is not shown because it is created by an implicit named area."
);
}
async function testImplicitNamedAreasWithReversedGridLineNames(
inspector,
view
) {
await selectNode(".b", inspector);
const propertyName = view.styleDocument.querySelectorAll(
".ruleview-propertyvalue"
)[0];
const gridLineNamesUpdated = inspector.once("grid-line-names-updated");
const editor = await focusEditableField(view, propertyName);
const onPopupShown = once(editor.popup, "popup-opened");
await gridLineNamesUpdated;
EventUtils.synthesizeKey("VK_DOWN", { shiftKey: true }, view.styleWindow);
await onPopupShown;
info(
"Test that reversed implicit grid line names from implicit areas are not shown"
);
ok(
!(editor.gridLineNames.cols.indexOf("b-start") > -1),
"b-start is not shown because it is created by an implicit named area."
);
}
|
