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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
/* Tests responsive mode links for
* @media sidebar width and height related conditions */
loader.lazyRequireGetter(
this,
"ResponsiveUIManager",
"resource://devtools/client/responsive/manager.js"
);
const TESTCASE_URI = TEST_BASE_HTTPS + "media-rules.html";
const responsiveModeToggleClass = ".media-responsive-mode-toggle";
add_task(async function () {
// ensure that original RDM size is big enough so it doesn't match the
// media queries by default.
await pushPref("devtools.responsive.viewport.width", 1000);
await pushPref("devtools.responsive.viewport.height", 1000);
const { ui } = await openStyleEditorForURL(TESTCASE_URI);
const editor = ui.editors[1];
await openEditor(editor);
const tab = gBrowser.selectedTab;
testNumberOfLinks(editor);
await testMediaLink(editor, tab, ui, 2, "width", 550);
await testMediaLink(editor, tab, ui, 3, "height", 300);
const onMediaChange = waitForManyEvents(ui, 1000);
await closeRDM(tab);
info("Wait for at-rules-list-changed events to settle on StyleEditorUI");
await onMediaChange;
doFinalChecks(editor);
});
function testNumberOfLinks(editor) {
const sidebar = editor.details.querySelector(".stylesheet-sidebar");
const conditions = sidebar.querySelectorAll(".at-rule-condition");
info("Testing if media rules have the appropriate number of links");
ok(
!conditions[0].querySelector(responsiveModeToggleClass),
"There should be no links in the first media rule."
);
ok(
!conditions[1].querySelector(responsiveModeToggleClass),
"There should be no links in the second media rule."
);
ok(
conditions[2].querySelector(responsiveModeToggleClass),
"There should be 1 responsive mode link in the media rule"
);
is(
conditions[3].querySelectorAll(responsiveModeToggleClass).length,
2,
"There should be 2 responsive mode links in the media rule"
);
}
async function testMediaLink(editor, tab, ui, itemIndex, type, value) {
const sidebar = editor.details.querySelector(".stylesheet-sidebar");
const conditions = sidebar.querySelectorAll(".at-rule-condition");
const onRDMOpened = once(ui, "responsive-mode-opened");
ok(
sidebar
.querySelectorAll(".at-rule-condition")
[itemIndex].classList.contains("media-condition-unmatched"),
`The ${type} condition is not matched when not in responsive mode`
);
info("Launching responsive mode");
conditions[itemIndex].querySelector(responsiveModeToggleClass).click();
await onRDMOpened;
const rdmUI = ResponsiveUIManager.getResponsiveUIForTab(tab);
await waitForResizeTo(rdmUI, type, value);
rdmUI.transitionsEnabled = false;
info("Wait for RDM ui to be fully loaded");
await waitForRDMLoaded(rdmUI);
// Ensure that the content has reflowed, which will ensure that all the
// element classes are reported correctly.
await promiseContentReflow(rdmUI);
ok(
ResponsiveUIManager.isActiveForTab(tab),
"Responsive mode should be active."
);
await waitFor(() => {
const el = sidebar.querySelectorAll(".at-rule-condition")[itemIndex];
return !el.classList.contains("media-condition-unmatched");
});
ok(true, "media rule should now be matched after responsive mode is active");
const dimension = (await getSizing(rdmUI))[type];
is(dimension, value, `${type} should be properly set.`);
}
function doFinalChecks(editor) {
const sidebar = editor.details.querySelector(".stylesheet-sidebar");
let conditions = sidebar.querySelectorAll(".at-rule-condition");
conditions = sidebar.querySelectorAll(".at-rule-condition");
ok(
conditions[2].classList.contains("media-condition-unmatched"),
"The width condition should now be unmatched"
);
ok(
conditions[3].classList.contains("media-condition-unmatched"),
"The height condition should now be unmatched"
);
}
/* Helpers */
function waitForResizeTo(rdmUI, type, value) {
return new Promise(resolve => {
const onResize = data => {
if (data[type] != value) {
return;
}
rdmUI.off("content-resize", onResize);
info(`Got content-resize to a ${type} of ${value}`);
resolve();
};
info(`Waiting for content-resize to a ${type} of ${value}`);
rdmUI.on("content-resize", onResize);
});
}
function promiseContentReflow(ui) {
return SpecialPowers.spawn(ui.getViewportBrowser(), [], async function () {
return new Promise(resolve => {
content.window.requestAnimationFrame(() => {
content.window.requestAnimationFrame(resolve);
});
});
});
}
async function getSizing(rdmUI) {
const browser = rdmUI.getViewportBrowser();
const sizing = await SpecialPowers.spawn(browser, [], async function () {
return {
width: content.innerWidth,
height: content.innerHeight,
};
});
return sizing;
}
function openEditor(editor) {
getLinkFor(editor).click();
return editor.getSourceEditor();
}
function getLinkFor(editor) {
return editor.summary.querySelector(".stylesheet-name");
}
|
