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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests changing viewport device pixel ratio
const TEST_URL = "data:text/html;charset=utf-8,DevicePixelRatio list test";
const DEFAULT_DPPX = window.devicePixelRatio;
const VIEWPORT_DPPX = DEFAULT_DPPX + 1;
const Types = require("resource://devtools/client/responsive/types.js");
const testDevice = {
name: "Fake Phone RDM Test",
width: 320,
height: 470,
pixelRatio: 5.5,
userAgent: "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
touch: true,
firefoxOS: true,
os: "custom",
featured: true,
};
// Add the new device to the list
addDeviceForTest(testDevice);
addRDMTask(
TEST_URL,
async function ({ ui }) {
await waitStartup(ui);
await testDefaults(ui);
await testChangingDevice(ui);
await testResetWhenResizingViewport(ui);
await testChangingDevicePixelRatio(ui);
},
{ waitForDeviceList: true }
);
async function waitStartup(ui) {
const { store } = ui.toolWindow;
// Wait until the viewport has been added and the device list has been loaded
await waitUntilState(
store,
state =>
state.viewports.length == 1 &&
state.devices.listState == Types.loadableState.LOADED
);
}
async function testDefaults(ui) {
info("Test Defaults");
const dppx = await getViewportDevicePixelRatio(ui);
is(dppx, DEFAULT_DPPX, "Content has expected devicePixelRatio");
testViewportDevicePixelRatioSelect(ui, {
value: DEFAULT_DPPX,
disabled: false,
});
testViewportDeviceMenuLabel(ui, "Responsive");
}
async function testChangingDevice(ui) {
info("Test Changing Device");
await selectDevice(ui, testDevice.name);
await waitForViewportResizeTo(ui, testDevice.width, testDevice.height);
const dppx = await waitForDevicePixelRatio(ui, testDevice.pixelRatio);
is(dppx, testDevice.pixelRatio, "Content has expected devicePixelRatio");
testViewportDevicePixelRatioSelect(ui, {
value: testDevice.pixelRatio,
disabled: true,
});
testViewportDeviceMenuLabel(ui, testDevice.name);
}
async function testResetWhenResizingViewport(ui) {
info("Test reset when resizing the viewport");
await testViewportResize(
ui,
".viewport-vertical-resize-handle",
[-10, -10],
[0, -10],
{
hasDevice: true,
}
);
const dppx = await waitForDevicePixelRatio(ui, DEFAULT_DPPX);
is(dppx, DEFAULT_DPPX, "Content has expected devicePixelRatio");
testViewportDevicePixelRatioSelect(ui, {
value: DEFAULT_DPPX,
disabled: false,
});
testViewportDeviceMenuLabel(ui, "Responsive");
}
async function testChangingDevicePixelRatio(ui) {
info("Test changing device pixel ratio");
await selectDevicePixelRatio(ui, VIEWPORT_DPPX);
const dppx = await waitForDevicePixelRatio(ui, VIEWPORT_DPPX);
is(dppx, VIEWPORT_DPPX, "Content has expected devicePixelRatio");
testViewportDevicePixelRatioSelect(ui, {
value: VIEWPORT_DPPX,
disabled: false,
});
testViewportDeviceMenuLabel(ui, "Responsive");
}
function testViewportDevicePixelRatioSelect(ui, expected) {
info("Test viewport's DevicePixelRatio Select");
const button = ui.toolWindow.document.getElementById(
"device-pixel-ratio-menu"
);
const title = ui.toolWindow.document.querySelector(
"#device-pixel-ratio-menu .title"
);
is(
title.textContent,
`DPR: ${expected.value}`,
`DevicePixelRatio Select value should be: ${expected.value}`
);
is(
button.disabled,
expected.disabled,
`DevicePixelRatio Select should be ${
expected.disabled ? "disabled" : "enabled"
}.`
);
}
|
