| 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 |
|---|
Chromium Code Reviews
Issue 2942573003:
[DevTools] New harness for inspector-protocol layout tests (Closed)
