summaryrefslogtreecommitdiffstats
path: root/devtools/shared/commands/target-configuration/tests/browser_target_configuration_command_color_scheme.js
blob: 509ecb84b2c5338391bd0d6d6cac35be726efa60 (plain)
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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
/* Any copyright is dedicated to the Public Domain.
 http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Test color scheme simulation.
const TEST_DOCUMENT = "target_configuration_test_doc.sjs";
const TEST_URI = URL_ROOT_COM_SSL + TEST_DOCUMENT;

add_task(async function () {
  info("Setup the test page with workers of all types");
  const tab = await addTab(TEST_URI);

  is(
    await topLevelDocumentMatchPrefersDarkColorSchemeMediaAtStartup(),
    false,
    "The dark mode simulation wasn't enabled in the content page when it loaded"
  );
  is(
    await topLevelDocumentMatchPrefersDarkColorSchemeMedia(),
    false,
    "The dark mode simulation isn't enabled in the content page by default"
  );
  is(
    await iframeDocumentMatchPrefersDarkColorSchemeMediaAtStartup(),
    false,
    "The dark mode simulation wasn't enabled in the remote iframe when it loaded"
  );
  is(
    await iframeDocumentMatchPrefersDarkColorSchemeMedia(),
    false,
    "The dark mode simulation isn't enabled in the remote iframe by default"
  );

  info("Create a target list for a tab target");
  const commands = await CommandsFactory.forTab(tab);

  const targetConfigurationCommand = commands.targetConfigurationCommand;
  const targetCommand = commands.targetCommand;
  await targetCommand.startListening();

  info("Update configuration to enable dark mode simulation");
  await targetConfigurationCommand.updateConfiguration({
    colorSchemeSimulation: "dark",
  });
  is(
    await topLevelDocumentMatchPrefersDarkColorSchemeMedia(),
    true,
    "The dark mode simulation is enabled after updating the configuration"
  );
  is(
    await iframeDocumentMatchPrefersDarkColorSchemeMedia(),
    true,
    "The dark mode simulation is enabled in the remote iframe after updating the configuration"
  );

  info("Reload the page");
  await BrowserTestUtils.reloadTab(tab, /* includeSubFrames */ true);

  is(
    await topLevelDocumentMatchPrefersDarkColorSchemeMediaAtStartup(),
    true,
    "The dark mode simulation was enabled in the content page when it loaded after reloading"
  );
  is(
    await topLevelDocumentMatchPrefersDarkColorSchemeMedia(),
    true,
    "The dark mode simulation is enabled in the content page after reloading"
  );
  is(
    await iframeDocumentMatchPrefersDarkColorSchemeMediaAtStartup(),
    true,
    "The dark mode simulation was enabled in the remote iframe when it loaded after reloading"
  );
  is(
    await iframeDocumentMatchPrefersDarkColorSchemeMedia(),
    true,
    "The dark mode simulation is enabled in the remote iframe after reloading"
  );

  const previousBrowsingContextId = gBrowser.selectedBrowser.browsingContext.id;
  info(
    "Check that navigating to a page that forces the creation of a new browsing context keep the simulation enabled"
  );

  const onPageLoaded = BrowserTestUtils.browserLoaded(
    gBrowser.selectedBrowser,
    /* includeSubFrames */ true
  );
  BrowserTestUtils.startLoadingURIString(
    gBrowser.selectedBrowser,
    URL_ROOT_ORG_SSL + TEST_DOCUMENT + "?crossOriginIsolated=true"
  );
  await onPageLoaded;

  isnot(
    gBrowser.selectedBrowser.browsingContext.id,
    previousBrowsingContextId,
    "A new browsing context was created"
  );

  is(
    await topLevelDocumentMatchPrefersDarkColorSchemeMediaAtStartup(),
    true,
    "The dark mode simulation was enabled in the content page when it loaded after navigating to a new browsing context"
  );
  is(
    await topLevelDocumentMatchPrefersDarkColorSchemeMedia(),
    true,
    "The dark mode simulation is enabled in the content page after navigating to a new browsing context"
  );
  is(
    await iframeDocumentMatchPrefersDarkColorSchemeMediaAtStartup(),
    true,
    "The dark mode simulation was enabled in the remote iframe when it loaded after navigating to a new browsing context"
  );
  is(
    await iframeDocumentMatchPrefersDarkColorSchemeMedia(),
    true,
    "The dark mode simulation is enabled in the remote iframe after navigating to a new browsing context"
  );

  targetCommand.destroy();
  await commands.destroy();

  is(
    await topLevelDocumentMatchPrefersDarkColorSchemeMedia(),
    false,
    "The dark mode simulation is disabled in the content page after destroying the commands"
  );
  is(
    await iframeDocumentMatchPrefersDarkColorSchemeMedia(),
    false,
    "The dark mode simulation is disabled in the remote iframe after destroying the commands"
  );
});

function matchPrefersDarkColorSchemeMedia(browserOrBrowsingContext) {
  return SpecialPowers.spawn(
    browserOrBrowsingContext,
    [],
    () => content.matchMedia("(prefers-color-scheme: dark)").matches
  );
}

function matchPrefersDarkColorSchemeMediaAtStartup(browserOrBrowsingContext) {
  return SpecialPowers.spawn(
    browserOrBrowsingContext,
    [],
    () => content.wrappedJSObject.initialMatchesPrefersDarkColorScheme
  );
}

function topLevelDocumentMatchPrefersDarkColorSchemeMedia() {
  return matchPrefersDarkColorSchemeMedia(gBrowser.selectedBrowser);
}

function topLevelDocumentMatchPrefersDarkColorSchemeMediaAtStartup() {
  return matchPrefersDarkColorSchemeMediaAtStartup(gBrowser.selectedBrowser);
}

function getIframeBrowsingContext() {
  return SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
    // Ensure we've rendered the iframe so that the prefers-color-scheme
    // value propagated from the embedder is up-to-date.
    await new Promise(resolve => {
      content.requestAnimationFrame(() =>
        content.requestAnimationFrame(resolve)
      );
    });
    return content.document.querySelector("iframe").browsingContext;
  });
}

async function iframeDocumentMatchPrefersDarkColorSchemeMedia() {
  const iframeBC = await getIframeBrowsingContext();
  return matchPrefersDarkColorSchemeMedia(iframeBC);
}

async function iframeDocumentMatchPrefersDarkColorSchemeMediaAtStartup() {
  const iframeBC = await getIframeBrowsingContext();
  return matchPrefersDarkColorSchemeMediaAtStartup(iframeBC);
}