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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test toggling the flexbox highlighter in the rule view with multiple flexboxes in the
// page.
const TEST_URI = `
<style type='text/css'>
.flex {
display: flex;
}
</style>
<div id="flex1" class="flex"></div>
<div id="flex2" class="flex"></div>
`;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openRuleView();
const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
const {
getActiveHighlighter,
getNodeForActiveHighlighter,
waitForHighlighterTypeShown,
} = getHighlighterTestHelpers(inspector);
info("Selecting the first flexbox container.");
await selectNode("#flex1", inspector);
let container = getRuleViewProperty(view, ".flex", "display").valueSpan;
let flexboxToggle = container.querySelector(".js-toggle-flexbox-highlighter");
info(
"Checking the state of the flexbox toggle for the first flexbox container in " +
"the rule-view."
);
ok(flexboxToggle, "flexbox highlighter toggle is visible.");
ok(
!flexboxToggle.classList.contains("active"),
"Flexbox highlighter toggle button is not active."
);
ok(
!getActiveHighlighter(HIGHLIGHTER_TYPE),
"No flexbox highlighter exists in the rule-view."
);
ok(
!getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
"No flexbox highlighter is shown."
);
info(
"Toggling ON the flexbox highlighter for the first flexbox container from the " +
"rule-view."
);
let onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
flexboxToggle.click();
await onHighlighterShown;
info(
"Checking the flexbox highlighter is created and toggle button is active in " +
"the rule-view."
);
ok(
flexboxToggle.classList.contains("active"),
"Flexbox highlighter toggle is active."
);
ok(
getActiveHighlighter(HIGHLIGHTER_TYPE),
"Flexbox highlighter created in the rule-view."
);
ok(
getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
"Flexbox highlighter is shown."
);
info("Selecting the second flexbox container.");
await selectNode("#flex2", inspector);
const firstFlexboxHighterShown =
getNodeForActiveHighlighter(HIGHLIGHTER_TYPE);
container = getRuleViewProperty(view, ".flex", "display").valueSpan;
flexboxToggle = container.querySelector(".js-toggle-flexbox-highlighter");
info(
"Checking the state of the CSS flexbox toggle for the second flexbox container " +
"in the rule-view."
);
ok(flexboxToggle, "Flexbox highlighter toggle is visible.");
ok(
!flexboxToggle.classList.contains("active"),
"Flexbox highlighter toggle button is not active."
);
ok(
getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
"Flexbox highlighter is still shown."
);
info(
"Toggling ON the flexbox highlighter for the second flexbox container from the " +
"rule-view."
);
onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
flexboxToggle.click();
await onHighlighterShown;
info(
"Checking the flexbox highlighter is created for the second flexbox container " +
"and toggle button is active in the rule-view."
);
ok(
flexboxToggle.classList.contains("active"),
"Flexbox highlighter toggle is active."
);
ok(
getNodeForActiveHighlighter(HIGHLIGHTER_TYPE) != firstFlexboxHighterShown,
"Flexbox highlighter for the second flexbox container is shown."
);
info("Selecting the first flexbox container.");
await selectNode("#flex1", inspector);
container = getRuleViewProperty(view, ".flex", "display").valueSpan;
flexboxToggle = container.querySelector(".js-toggle-flexbox-highlighter");
info(
"Checking the state of the flexbox toggle for the first flexbox container in " +
"the rule-view."
);
ok(flexboxToggle, "Flexbox highlighter toggle is visible.");
ok(
!flexboxToggle.classList.contains("active"),
"Flexbox highlighter toggle button is not active."
);
});
|
