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

   1 function setMetaViewport()
   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 (viewport != VIEWPORTS["none"])
  18         document.write('<meta name="viewport" content="'+viewport+'">');
  19 }
  20
  21 // matchMedia() polyfill from https://github.com/paulirish/matchMedia.js
  22 // Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license
  23 window.matchMedia = window.matchMedia || (function(doc, undefined){
  24     var bool,
  25         docElem  = doc.documentElement,
  26         refNode  = docElem.firstElementChild || docElem.firstChild,
  27         // fakeBody required for <FF4 when executed in <head>
  28         fakeBody = doc.createElement('body'),
  29         div      = doc.createElement('div');
  30
  31     div.id = 'mq-test-1';
  32     div.style.cssText = "position:absolute;top:-100em";
  33     fakeBody.style.background = "none";
  34     fakeBody.appendChild(div);
  35
  36     return function(q){
  37         div.innerHTML = '&shy;<style media="'+q+'"> #mq-test-1 { width: 42px; }</style>';
  38
  39         docElem.insertBefore(fakeBody, refNode);
  40         bool = div.offsetWidth == 42;
  41         docElem.removeChild(fakeBody);
  42
  43         return { matches: bool, media: q };
  44     };
  45 })(document);
  46
  47 var results;
  48
  49 function dumpMetrics()
  50 {
  51     results = [];
  52     writeResult("Device:", "");
  53     testJS("window.screenX");
  54     testJS("window.screenY");
  55
  56     writeResult("Viewport:", location.search);
  57
  58     testMQOrientation();
  59     testJS("window.orientation", "");
  60
  61     testMQDimension("resolution", null, "dpi");
  62     testMQDevicePixelRatio(window.devicePixelRatio);
  63     testJS("window.devicePixelRatio", "");
  64
  65     writeResult("Widths:", "");
  66
  67     testMQDimension("device-width", screen.width);
  68     testJS("screen.width");
  69     testJS("screen.availWidth");
  70     testJS("window.outerWidth");
  71     testJS("window.innerWidth");
  72     testMQDimension("width", document.documentElement.clientWidth);
  73     testJS("document.documentElement.clientWidth");
  74     testJS("document.documentElement.offsetWidth");
  75     testJS("document.documentElement.scrollWidth");
  76     testJS("document.body.clientWidth");
  77     testJS("document.body.offsetWidth");
  78     testJS("document.body.scrollWidth");
  79
  80     writeResult("Heights:", "");
  81
  82     testMQDimension("device-height", screen.height);
  83     testJS("screen.height");
  84     testJS("screen.availHeight");
  85     testJS("window.outerHeight");
  86     testJS("window.innerHeight");
  87     testMQDimension("height", document.documentElement.clientHeight);
  88     testJS("document.documentElement.clientHeight");
  89     testJS("document.documentElement.offsetHeight");
  90     testJS("document.documentElement.scrollHeight");
  91     testJS("document.body.clientHeight");
  92     testJS("document.body.offsetHeight");
  93     testJS("document.body.scrollHeight");
  94
  95     return results.join("\n");
  96 }
  97
  98 function testJS(expr, unit)
  99 {
 100     if (unit === undefined)
 101         unit = "px";
 102
 103     var ans = eval(expr);
 104     if (typeof ans == "number")
 105         ans += unit;
 106
 107     // Shorten long properties to make more readable
 108     expr = expr.replace("documentElement", "docElem").replace("document", "doc");
 109
 110     writeResult(expr, ans);
 111 }
 112
 113 function testMQOrientation()
 114 {
 115     if (matchMedia("screen and (orientation: portrait)").matches)
 116         writeResult("@media orientation", "portrait");
 117     else if (matchMedia("screen and (orientation: landscape)").matches)
 118         writeResult("@media orientation", "landscape");
 119     else
 120         writeResult("@media orientation", "???");
 121 }
 122
 123 function testMQDevicePixelRatio(guess)
 124 {
 125     // To save time, try the guess value first; otherwise try common values (TODO: binary search).
 126     if (matchMedia("screen and (-webkit-device-pixel-ratio: "+guess+"), screen and (device-pixel-ratio: "+guess+")").matches)
 127         writeResult("@media device-pixel-ratio", guess);
 128     else if (matchMedia("screen and (-webkit-device-pixel-ratio: 2), screen and (device-pixel-ratio: 2)").matches)
 129         writeResult("@media device-pixel-ratio", "2");
 130     else if (matchMedia("screen and (-webkit-device-pixel-ratio: 1.5), screen and (device-pixel-ratio: 1.5)").matches)
 131         writeResult("@media device-pixel-ratio", "1.5");
 132     else if (matchMedia("screen and (-webkit-device-pixel-ratio: 1), screen and (device-pixel-ratio: 1)").matches)
 133         writeResult("@media device-pixel-ratio", "1");
 134     else if (matchMedia("screen and (-webkit-device-pixel-ratio: 2.25), screen and (device-pixel-ratio: 2.25)").matches)
 135         writeResult("@media device-pixel-ratio", "2.25");
 136     else
 137         writeResult("@media device-pixel-ratio", "???");
 138 }
 139
 140 function testMQDimension(feature, guess, unit)
 141 {
 142     unit = unit || "px";
 143     // To save time, try the guess value first; otherwise binary search.
 144     if (guess && matchMedia("screen and (" + feature + ":" + guess + unit + ")").matches) {
 145         writeResult("@media " + feature, guess + unit);
 146     } else {
 147         var val = mqBinarySearch(feature, 1, 2560, unit);
 148         writeResult("@media " + feature, val ? val + unit : "???");
 149     }
 150 }
 151
 152 // Searches the inclusive range [minValue, maxValue].
 153 function mqBinarySearch(feature, minValue, maxValue, unit)
 154 {
 155     if (minValue == maxValue) {
 156         if (matchMedia("screen and (" + feature + ":" + minValue + unit + ")").matches)
 157             return minValue;
 158         else
 159             return null;
 160     }
 161     var mid = Math.ceil((minValue + maxValue) / 2);
 162     if (matchMedia("screen and (min-" + feature + ":" + mid + unit + ")").matches)
 163         return mqBinarySearch(feature, mid, maxValue, unit); // feature is >= mid
 164     else
 165         return mqBinarySearch(feature, minValue, mid - 1, unit); // feature is < mid
 166 }
 167
 168 function writeResult(key, val)
 169 {
 170     results.push(key + (val ? " = " + val : ""));
 171 }
 172
 173 var initialize_DeviceEmulationTest = function() {
 174
 175 InspectorTest.getPageMetrics = function(callback)
 176 {
 177     InspectorTest.evaluateInPage("dumpMetrics()", callback);
 178 }
 179
 180 InspectorTest.applyEmulationAndReload = function(width, height, deviceScaleFactor, viewport, callback)
 181 {
 182     InspectorTest.addSniffer(WebInspector.overridesSupport, "_deviceMetricsOverrideAppliedForTest", emulateCallback);
 183     WebInspector.overridesSupport.emulateDevice(width + "x" + height + "x" + deviceScaleFactor + "x0x0", "");
 184
 185     function emulateCallback()
 186     {
 187         var warning = WebInspector.overridesSupport.warningMessage();
 188         if (warning)
 189             InspectorTest._deviceEmulationResults.push("Emulation warning: " + warning);
 190         InspectorTest.navigate(InspectorTest._deviceEmulationPageUrl + "?" + viewport, callback);
 191     }
 192 };
 193
 194 InspectorTest.emulateAndGetMetrics = function(width, height, deviceScaleFactor, viewport, callback)
 195 {
 196     InspectorTest._deviceEmulationResults.push("Emulating device: " + width + "x" + height + "x" + deviceScaleFactor + " viewport='" + viewport + "'");
 197     InspectorTest.applyEmulationAndReload(width, height, deviceScaleFactor, viewport, InspectorTest.getPageMetrics.bind(InspectorTest, printMetrics));
 198
 199     function printMetrics(metrics)
 200     {
 201         InspectorTest._deviceEmulationResults.push(metrics.value + "\n");
 202         callback();
 203     }
 204 };
 205
 206 InspectorTest.testDeviceEmulation = function(pageUrl, width, height, deviceScaleFactor, viewport)
 207 {
 208     InspectorTest._deviceEmulationPageUrl = pageUrl;
 209     InspectorTest._deviceEmulationResults = [];
 210     InspectorTest.emulateAndGetMetrics(width, height, deviceScaleFactor, viewport, callback);
 211
 212     function callback()
 213     {
 214         InspectorTest.addResult(InspectorTest._deviceEmulationResults.join("\n"));
 215         InspectorTest.completeTest();
 216     }
 217 };
 218
 219 };