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
157
158
159
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test color scheme simulation.
const TEST_URI = URL_ROOT_SSL + "doc_media_queries.html";
add_task(async function () {
await addTab(TEST_URI);
const { inspector, view, toolbox } = await openRuleView();
info("Check that the color scheme simulation buttons exist");
const lightButton = inspector.panelDoc.querySelector(
"#color-scheme-simulation-light-toggle"
);
const darkButton = inspector.panelDoc.querySelector(
"#color-scheme-simulation-dark-toggle"
);
ok(lightButton, "The light color scheme simulation button exists");
ok(darkButton, "The dark color scheme simulation button exists");
is(
isButtonPressed(lightButton),
false,
"At first, the light button isn't checked"
);
is(
isButtonPressed(darkButton),
false,
"At first, the dark button isn't checked"
);
// Define functions checking if the rule view display the expected property.
const divHasDefaultStyling = async () =>
(await getPropertiesForRuleIndex(view, 1)).has("background-color:yellow");
const divHasDarkSchemeStyling = async () =>
(await getPropertiesForRuleIndex(view, 1)).has("background-color:darkblue");
const iframeElHasDefaultStyling = async () =>
(await getPropertiesForRuleIndex(view, 1)).has("background:cyan");
const iframeHasDarkSchemeStyling = async () =>
(await getPropertiesForRuleIndex(view, 1)).has("background:darkred");
info(
"Select the div that will change according to conditions in prefered color scheme"
);
await selectNode("div", inspector);
ok(
await divHasDefaultStyling(),
"The rule view shows the expected initial rule"
);
info("Click on the dark button");
darkButton.click();
await waitFor(() => isButtonPressed(darkButton));
ok(true, "The dark button is checked");
is(
isButtonPressed(lightButton),
false,
"the light button state didn't change when enabling dark mode"
);
await waitFor(() => divHasDarkSchemeStyling());
is(
getRuleViewAncestorRulesDataTextByIndex(view, 1),
"@media (prefers-color-scheme: dark) {",
"The rules view was updated with the rule from the dark scheme media query"
);
info("Select the node from the remote iframe");
await selectNodeInFrames(["iframe", "html"], inspector);
ok(
await iframeHasDarkSchemeStyling(),
"The simulation is also applied on the remote iframe"
);
is(
getRuleViewAncestorRulesDataTextByIndex(view, 1),
"@media (prefers-color-scheme: dark) {",
"The prefers-color-scheme media query is displayed"
);
info("Select the top level div again");
await selectNode("div", inspector);
info("Click the light button simulate light mode");
lightButton.click();
await waitFor(() => isButtonPressed(lightButton));
ok(true, "The button has the expected light state");
// TODO: Actually simulate light mode. This might require to set the OS-level preference
// to dark as the default state might consume the rule from the like scheme media query.
is(
isButtonPressed(darkButton),
false,
"the dark button was unchecked when enabling light mode"
);
await waitFor(() => divHasDefaultStyling());
info("Click the light button to disable simulation");
lightButton.click();
await waitFor(() => !isButtonPressed(lightButton));
ok(true, "The button isn't checked anymore");
await waitFor(() => divHasDefaultStyling());
ok(true, "We're not simulating color-scheme anymore");
info("Select the node from the remote iframe again");
await selectNodeInFrames(["iframe", "html"], inspector);
await waitFor(() => iframeElHasDefaultStyling());
ok(true, "The simulation stopped on the remote iframe as well");
info("Check that reloading keep the selected simulation");
await selectNode("div", inspector);
darkButton.click();
await waitFor(() => divHasDarkSchemeStyling());
await navigateTo(TEST_URI);
await selectNode("div", inspector);
await waitFor(() => view.element.children[1]);
ok(
await divHasDarkSchemeStyling(),
"dark mode is still simulated after reloading the page"
);
is(
getRuleViewAncestorRulesDataTextByIndex(view, 1),
"@media (prefers-color-scheme: dark) {",
"The prefers-color-scheme media query is displayed on the rule after reloading"
);
await selectNodeInFrames(["iframe", "html"], inspector);
await waitFor(() => iframeHasDarkSchemeStyling());
ok(true, "simulation is still applied to the iframe after reloading");
is(
getRuleViewAncestorRulesDataTextByIndex(view, 1),
"@media (prefers-color-scheme: dark) {",
"The prefers-color-scheme media query is still displayed on the rule for the element in iframe after reloading"
);
info("Check that closing DevTools reset the simulation");
await toolbox.destroy();
const matchesPrefersDarkColorSchemeMedia = await SpecialPowers.spawn(
gBrowser.selectedBrowser,
[],
() => {
const { matches } = content.matchMedia("(prefers-color-scheme: dark)");
return matches;
}
);
is(
matchesPrefersDarkColorSchemeMedia,
false,
"color scheme simulation is disabled after closing DevTools"
);
});
function isButtonPressed(el) {
return el.getAttribute("aria-pressed") === "true";
}
|
