third_party/WebKit/LayoutTests/inspector/device-emulation/device-emulation-test.js

   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 MIT/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 = '&shy;<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 (TODO: binary search).
 136     if (matchMedia("screen and (-webkit-device-pixel-ratio: "+guess+"), screen and (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 and (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 and (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 + ")").matches)
 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 + ")").matches)
 173         return mqBinarySearch(feature, mid, maxValue, unit); // feature is >= mid
 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, deviceScaleFactor, 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, "_deviceMetricsOverrideAppliedForTest", 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 Insets(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: " + warning);
 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, full, 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, deviceScaleFactor, viewport, insets, noReload)
 244 {
 245     InspectorTest._deviceEmulationPageUrl = pageUrl;
 246     InspectorTest._deviceEmulationResults = [];
 247     InspectorTest.emulateAndGetMetrics(width, height, deviceScaleFactor, viewport, insets, noReload, callback);
 248
 249     function callback()
 250     {
 251         InspectorTest.addResult(InspectorTest._deviceEmulationResults.join("\n"));
 252         InspectorTest.completeTest();
 253     }
 254 };
 255
 256 };