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