OLD | NEW |
| (Empty) |
1 function setMetaViewport(override) | |
2 { | |
3 var VIEWPORTS = { | |
4 "w=320": "width=320", | |
5 "w=dw": "width=device-width", | |
6 "w=980": "width=980", | |
7 "none": "no viewport (desktop site)" | |
8 }; | |
9 | |
10 var viewport = VIEWPORTS["none"]; | |
11 for (var key in VIEWPORTS) { | |
12 if (location.search.indexOf(key) !== -1) { | |
13 viewport = VIEWPORTS[key]; | |
14 window.__viewport = key; | |
15 break; | |
16 } | |
17 } | |
18 if (override) { | |
19 viewport = VIEWPORTS[override]; | |
20 window.__viewport = override; | |
21 } | |
22 if (viewport != VIEWPORTS["none"]) | |
23 document.write('<meta name="viewport" content="'+viewport+'">'); | |
24 } | |
25 | |
26 // matchMedia() polyfill from https://github.com/paulirish/matchMedia.js | |
27 // Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MI
T/BSD license | |
28 window.matchMedia = window.matchMedia || (function(doc, undefined){ | |
29 var bool, | |
30 docElem = doc.documentElement, | |
31 refNode = docElem.firstElementChild || docElem.firstChild, | |
32 // fakeBody required for <FF4 when executed in <head> | |
33 fakeBody = doc.createElement('body'), | |
34 div = doc.createElement('div'); | |
35 | |
36 div.id = 'mq-test-1'; | |
37 div.style.cssText = "position:absolute;top:-100em"; | |
38 fakeBody.style.background = "none"; | |
39 fakeBody.appendChild(div); | |
40 | |
41 return function(q){ | |
42 div.innerHTML = '­<style media="'+q+'"> #mq-test-1 { width: 42px; }<
/style>'; | |
43 | |
44 docElem.insertBefore(fakeBody, refNode); | |
45 bool = div.offsetWidth == 42; | |
46 docElem.removeChild(fakeBody); | |
47 | |
48 return { matches: bool, media: q }; | |
49 }; | |
50 })(document); | |
51 | |
52 var results; | |
53 | |
54 function dumpMetrics(full) | |
55 { | |
56 results = []; | |
57 writeResult("Device:", ""); | |
58 testJS("window.screenX"); | |
59 testJS("window.screenY"); | |
60 | |
61 writeResult("Viewport:", "?" + window.__viewport); | |
62 | |
63 testMQOrientation(); | |
64 testJS("window.orientation", ""); | |
65 | |
66 if (full) { | |
67 testMQDimension("resolution", null, "dpi"); | |
68 testMQDevicePixelRatio(window.devicePixelRatio); | |
69 testJS("window.devicePixelRatio", ""); | |
70 } | |
71 | |
72 writeResult("Widths:", ""); | |
73 | |
74 if (full) { | |
75 testMQDimension("device-width", screen.width); | |
76 testJS("screen.width"); | |
77 testJS("screen.availWidth"); | |
78 testJS("window.outerWidth"); | |
79 testJS("window.innerWidth"); | |
80 testMQDimension("width", document.documentElement.clientWidth); | |
81 } | |
82 testJS("document.documentElement.clientWidth"); | |
83 testJS("document.documentElement.offsetWidth"); | |
84 testJS("document.documentElement.scrollWidth"); | |
85 if (full) | |
86 testJS("document.body.clientWidth"); | |
87 testJS("document.body.offsetWidth"); | |
88 testJS("document.body.scrollWidth"); | |
89 | |
90 writeResult("Heights:", ""); | |
91 | |
92 if (full) { | |
93 testMQDimension("device-height", screen.height); | |
94 testJS("screen.height"); | |
95 testJS("screen.availHeight"); | |
96 testJS("window.outerHeight"); | |
97 testJS("window.innerHeight"); | |
98 testMQDimension("height", document.documentElement.clientHeight); | |
99 } | |
100 testJS("document.documentElement.clientHeight"); | |
101 testJS("document.documentElement.offsetHeight"); | |
102 testJS("document.documentElement.scrollHeight"); | |
103 if (full) | |
104 testJS("document.body.clientHeight"); | |
105 testJS("document.body.offsetHeight"); | |
106 testJS("document.body.scrollHeight"); | |
107 | |
108 var measured = document.querySelectorAll(".device-emulation-measure"); | |
109 for (var i = 0; i < measured.length; ++i) | |
110 writeResult("measured " + measured[i].getAttribute("type") + ": " + meas
ured[i].offsetWidth + "x" + measured[i].offsetHeight); | |
111 | |
112 return results.join("\n"); | |
113 } | |
114 | |
115 function testJS(expr, unit) | |
116 { | |
117 if (unit === undefined) | |
118 unit = "px"; | |
119 | |
120 var ans = eval(expr); | |
121 if (typeof ans == "number") | |
122 ans += unit; | |
123 | |
124 // Shorten long properties to make more readable | |
125 expr = expr.replace("documentElement", "docElem").replace("document", "doc")
; | |
126 | |
127 writeResult(expr, ans); | |
128 } | |
129 | |
130 function testMQOrientation() | |
131 { | |
132 if (matchMedia("screen and (orientation: portrait)").matches) | |
133 writeResult("@media orientation", "portrait"); | |
134 else if (matchMedia("screen and (orientation: landscape)").matches) | |
135 writeResult("@media orientation", "landscape"); | |
136 else | |
137 writeResult("@media orientation", "???"); | |
138 } | |
139 | |
140 function testMQDevicePixelRatio(guess) | |
141 { | |
142 // To save time, try the guess value first; otherwise try common values (TOD
O: binary search). | |
143 if (matchMedia("screen and (-webkit-device-pixel-ratio: "+guess+"), screen a
nd (device-pixel-ratio: "+guess+")").matches) | |
144 writeResult("@media device-pixel-ratio", guess); | |
145 else if (matchMedia("screen and (-webkit-device-pixel-ratio: 2), screen and
(device-pixel-ratio: 2)").matches) | |
146 writeResult("@media device-pixel-ratio", "2"); | |
147 else if (matchMedia("screen and (-webkit-device-pixel-ratio: 1.5), screen an
d (device-pixel-ratio: 1.5)").matches) | |
148 writeResult("@media device-pixel-ratio", "1.5"); | |
149 else if (matchMedia("screen and (-webkit-device-pixel-ratio: 1), screen and
(device-pixel-ratio: 1)").matches) | |
150 writeResult("@media device-pixel-ratio", "1"); | |
151 else if (matchMedia("screen and (-webkit-device-pixel-ratio: 2.25), screen a
nd (device-pixel-ratio: 2.25)").matches) | |
152 writeResult("@media device-pixel-ratio", "2.25"); | |
153 else | |
154 writeResult("@media device-pixel-ratio", "???"); | |
155 } | |
156 | |
157 function testMQDimension(feature, guess, unit) | |
158 { | |
159 unit = unit || "px"; | |
160 // To save time, try the guess value first; otherwise binary search. | |
161 if (guess && matchMedia("screen and (" + feature + ":" + guess + unit + ")")
.matches) { | |
162 writeResult("@media " + feature, guess + unit); | |
163 } else { | |
164 var val = mqBinarySearch(feature, 1, 2560, unit); | |
165 writeResult("@media " + feature, val ? val + unit : "???"); | |
166 } | |
167 } | |
168 | |
169 // Searches the inclusive range [minValue, maxValue]. | |
170 function mqBinarySearch(feature, minValue, maxValue, unit) | |
171 { | |
172 if (minValue == maxValue) { | |
173 if (matchMedia("screen and (" + feature + ":" + minValue + unit + ")").m
atches) | |
174 return minValue; | |
175 else | |
176 return null; | |
177 } | |
178 var mid = Math.ceil((minValue + maxValue) / 2); | |
179 if (matchMedia("screen and (min-" + feature + ":" + mid + unit + ")").matche
s) | |
180 return mqBinarySearch(feature, mid, maxValue, unit); // feature is >= mi
d | |
181 else | |
182 return mqBinarySearch(feature, minValue, mid - 1, unit); // feature is <
mid | |
183 } | |
184 | |
185 function writeResult(key, val) | |
186 { | |
187 results.push(key + (val ? " = " + val : "")); | |
188 } | |
189 | |
190 var initialize_DeviceEmulationTest = function() { | |
191 | |
192 InspectorTest.getPageMetrics = function(full, callback) | |
193 { | |
194 InspectorTest.evaluateInPage("dumpMetrics(" + full + ")", callback); | |
195 } | |
196 | |
197 InspectorTest.applyEmulationAndReload = function(enabled, width, height, deviceS
caleFactor, viewport, insets, noReload, callback) | |
198 { | |
199 if (enabled) { | |
200 var params = {}; | |
201 params.width = width; | |
202 params.height = height; | |
203 params.deviceScaleFactor = deviceScaleFactor; | |
204 params.mobile = true; | |
205 params.fitWindow = false; | |
206 params.scale = 1; | |
207 params.screenWidth = width; | |
208 params.screenHeight = height; | |
209 params.positionX = 0; | |
210 params.positionY = 0; | |
211 if (insets) { | |
212 params.screenWidth += insets.left + insets.right; | |
213 params.positionX = insets.left; | |
214 params.screenHeight += insets.top + insets.bottom; | |
215 params.positionY = insets.top; | |
216 } | |
217 InspectorTest.sendCommand("Emulation.setDeviceMetricsOverride", params,
emulateCallback); | |
218 } else { | |
219 InspectorTest.sendCommand("Emulation.clearDeviceMetricsOverride", {}, em
ulateCallback); | |
220 } | |
221 | |
222 function emulateCallback(result) | |
223 { | |
224 if (result.error) | |
225 InspectorTest._deviceEmulationResults.push("Error: " + result.error)
; | |
226 if (noReload) | |
227 callback(); | |
228 else | |
229 InspectorTest.navigate(InspectorTest._deviceEmulationPageUrl + "?" +
viewport, callback); | |
230 } | |
231 }; | |
232 | |
233 InspectorTest.emulateAndGetMetrics = function(width, height, deviceScaleFactor,
viewport, insets, noReload, callback) | |
234 { | |
235 InspectorTest._deviceEmulationResults.push("Emulating device: " + width + "x
" + height + "x" + deviceScaleFactor + " viewport='" + viewport + "'"); | |
236 var full = !!width && !!height && !!deviceScaleFactor; | |
237 InspectorTest.applyEmulationAndReload(true, width, height, deviceScaleFactor
, viewport, insets, noReload, InspectorTest.getPageMetrics.bind(InspectorTest, f
ull, printMetrics)); | |
238 | |
239 function printMetrics(metrics) | |
240 { | |
241 InspectorTest._deviceEmulationResults.push(metrics + "\n"); | |
242 callback(); | |
243 } | |
244 }; | |
245 | |
246 InspectorTest.testDeviceEmulation = function(pageUrl, width, height, deviceScale
Factor, viewport, insets, noReload) | |
247 { | |
248 InspectorTest._deviceEmulationPageUrl = pageUrl; | |
249 InspectorTest._deviceEmulationResults = []; | |
250 InspectorTest.emulateAndGetMetrics(width, height, deviceScaleFactor, viewpor
t, insets, noReload, callback); | |
251 | |
252 function callback() | |
253 { | |
254 InspectorTest.log(InspectorTest._deviceEmulationResults.join("\n")); | |
255 InspectorTest.completeTest(); | |
256 } | |
257 }; | |
258 | |
259 }; | |
OLD | NEW |