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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
const TEST_URL =
'data:text/html;charset=utf-8,<iframe id="subframe" ' +
'width="200" height="200"></iframe>';
addRDMTask(TEST_URL, async function({ ui, manager }) {
ok(ui, "An instance of the RDM should be attached to the tab.");
await setViewportSizeAndAwaitReflow(ui, manager, 110, 500);
info("Checking initial width/height properties.");
await doInitialChecks(ui, 110);
info("Checking initial width/height with meta viewport on");
await setTouchAndMetaViewportSupport(ui, true);
await doInitialChecks(ui, 980);
await setTouchAndMetaViewportSupport(ui, false);
info("Changing the RDM size");
await setViewportSizeAndAwaitReflow(ui, manager, 90, 500);
info("Checking for screen props");
await checkScreenProps(ui);
info("Checking for screen props with meta viewport on");
await setTouchAndMetaViewportSupport(ui, true);
await checkScreenProps(ui);
await setTouchAndMetaViewportSupport(ui, false);
info("Checking for subframe props");
await checkSubframeProps(ui);
info("Checking for subframe props with meta viewport on");
await setTouchAndMetaViewportSupport(ui, true);
await checkSubframeProps(ui);
await setTouchAndMetaViewportSupport(ui, false);
info("Changing the RDM size using input keys");
await setViewportSizeWithInputKeys(ui);
info("Checking for screen props once again.");
await checkScreenProps2(ui);
});
async function setViewportSizeWithInputKeys(ui) {
const width = 320,
height = 500;
let resized = waitForViewportResizeTo(ui, width, height);
ui.setViewportSize({ width, height });
await resized;
const dimensions = ui.toolWindow.document.querySelectorAll(
".viewport-dimension-input"
);
// Increase width value to 420 by using the Up arrow key
resized = waitForViewportResizeTo(ui, 420, height);
dimensions[0].focus();
for (let i = 1; i <= 100; i++) {
EventUtils.synthesizeKey("KEY_ArrowUp");
}
await resized;
// Resetting width value back to 320 using `Shift + Down` arrow
resized = waitForViewportResizeTo(ui, width, height);
dimensions[0].focus();
for (let i = 1; i <= 10; i++) {
EventUtils.synthesizeKey("KEY_ArrowDown", { shiftKey: true });
}
await resized;
// Increase height value to 600 by using `PageUp + Shift` key
resized = waitForViewportResizeTo(ui, width, 600);
dimensions[1].focus();
EventUtils.synthesizeKey("KEY_PageUp", { shiftKey: true });
await resized;
// Resetting height value back to 500 by using `PageDown + Shift` key
resized = waitForViewportResizeTo(ui, width, height);
dimensions[1].focus();
EventUtils.synthesizeKey("KEY_PageDown", { shiftKey: true });
await resized;
}
async function doInitialChecks(ui, expectedInnerWidth) {
const {
innerWidth,
matchesMedia,
outerHeight,
outerWidth,
} = await grabContentInfo(ui);
is(innerWidth, expectedInnerWidth, "inner width should be as expected");
is(outerWidth, 110, "device's outerWidth should be 110px");
is(outerHeight, 500, "device's outerHeight should be 500px");
isnot(
window.outerHeight,
outerHeight,
"window.outerHeight should not be the size of the device's outerHeight"
);
isnot(
window.outerWidth,
outerWidth,
"window.outerWidth should not be the size of the device's outerWidth"
);
ok(!matchesMedia, "media query shouldn't match.");
}
async function checkScreenProps(ui) {
const { matchesMedia, screen } = await grabContentInfo(ui);
ok(matchesMedia, "media query should match");
isnot(
window.screen.width,
screen.width,
"screen.width should not be the size of the screen."
);
is(screen.width, 90, "screen.width should be the page width");
is(screen.height, 500, "screen.height should be the page height");
}
async function checkScreenProps2(ui) {
const { screen } = await grabContentInfo(ui);
isnot(
window.screen.width,
screen.width,
"screen.width should not be the size of the screen."
);
}
async function checkSubframeProps(ui) {
const { outerWidth, matchesMedia, screen } = await grabContentSubframeInfo(
ui
);
is(outerWidth, 90, "subframe outerWidth should be 90px");
ok(matchesMedia, "subframe media query should match");
is(screen.width, 90, "subframe screen.width should be the page width");
is(screen.height, 500, "subframe screen.height should be the page height");
}
function grabContentInfo(ui) {
return SpecialPowers.spawn(ui.getViewportBrowser(), [], async function() {
return {
screen: {
width: content.screen.width,
height: content.screen.height,
},
innerWidth: content.innerWidth,
matchesMedia: content.matchMedia("(max-device-width:100px)").matches,
outerHeight: content.outerHeight,
outerWidth: content.outerWidth,
};
});
}
function grabContentSubframeInfo(ui) {
return SpecialPowers.spawn(ui.getViewportBrowser(), [], async function() {
const subframe = content.document.getElementById("subframe");
const win = subframe.contentWindow;
return {
screen: {
width: win.screen.width,
height: win.screen.height,
},
innerWidth: win.innerWidth,
matchesMedia: win.matchMedia("(max-device-width:100px)").matches,
outerHeight: win.outerHeight,
outerWidth: win.outerWidth,
};
});
}
|
