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
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
// Bug 1521188 - Indicate grid/flex container/item in infobar
// Check the text content of the highlighter nodeinfo bar.
const HighlightersBundle = new Localization(
["devtools/shared/highlighters.ftl"],
true
);
const TEST_URI = URL_ROOT + "doc_inspector_infobar_04.html";
const CLASS_GRID_TYPE = "box-model-infobar-grid-type";
const CLASS_FLEX_TYPE = "box-model-infobar-flex-type";
const FLEX_CONTAINER_TEXT =
HighlightersBundle.formatValueSync("flextype-container");
const FLEX_ITEM_TEXT = HighlightersBundle.formatValueSync("flextype-item");
const FLEX_DUAL_TEXT = HighlightersBundle.formatValueSync("flextype-dual");
const GRID_CONTAINER_TEXT =
HighlightersBundle.formatValueSync("gridtype-container");
const GRID_ITEM_TEXT = HighlightersBundle.formatValueSync("gridtype-item");
const GRID_DUAL_TEXT = HighlightersBundle.formatValueSync("gridtype-dual");
const TEST_DATA = [
{
selector: "#flex-container",
flexText: FLEX_CONTAINER_TEXT,
gridText: "",
},
{
selector: "#flex-item",
flexText: FLEX_ITEM_TEXT,
gridText: "",
},
{
selector: "#flex-container-item",
flexText: FLEX_DUAL_TEXT,
gridText: "",
},
{
selector: "#grid-container",
flexText: "",
gridText: GRID_CONTAINER_TEXT,
},
{
selector: "#grid-item",
flexText: "",
gridText: GRID_ITEM_TEXT,
},
{
selector: "#grid-container-item",
flexText: "",
gridText: GRID_DUAL_TEXT,
},
{
selector: "#flex-item-grid-container",
flexText: FLEX_ITEM_TEXT,
gridText: GRID_CONTAINER_TEXT,
},
];
const TEST_TEXT_DATA = [
{
selector: "#flex-text-container",
flexText: FLEX_ITEM_TEXT,
gridText: "",
},
{
selector: "#grid-text-container",
flexText: "",
gridText: GRID_ITEM_TEXT,
},
];
add_task(async function () {
const { inspector, highlighterTestFront } = await openInspectorForURL(
TEST_URI
);
for (const currentTest of TEST_DATA) {
info("Testing " + currentTest.selector);
await testTextContent(currentTest, inspector, highlighterTestFront);
}
for (const currentTest of TEST_TEXT_DATA) {
info("Testing " + currentTest.selector);
await testTextNodeTextContent(currentTest, inspector, highlighterTestFront);
}
});
async function testTextContent(
{ selector, gridText, flexText },
inspector,
highlighterTestFront
) {
await selectAndHighlightNode(selector, inspector);
const gridType = await highlighterTestFront.getHighlighterNodeTextContent(
CLASS_GRID_TYPE
);
const flexType = await highlighterTestFront.getHighlighterNodeTextContent(
CLASS_FLEX_TYPE
);
is(gridType, gridText, "node " + selector + ": grid type matches.");
is(flexType, flexText, "node " + selector + ": flex type matches.");
}
async function testTextNodeTextContent(test, inspector, highlighterTestFront) {
const { walker } = inspector;
const div = await walker.querySelector(walker.rootNode, test.selector);
const { nodes } = await walker.children(div);
test.selector = nodes[0];
await testTextContent(test, inspector, highlighterTestFront);
}
|
