src/third_party/WebKit/LayoutTests/inspector/elements/styles/override-screen-size.html

   1 <html>
   2 <head>
   3
   4 <style type="text/css" media="screen">
   5 @media (max-device-width: 998px) and (max-device-height: 1199x) {
   6     #main { background: red; }
   7 }
   8
   9 @media (max-device-width: 1000px) and (max-device-height: 1200px) {
  10     #main { background: green; }
  11 }
  12
  13 @media (min-device-width: 1001px) and (min-device-height: 1201px) {
  14     #main { background: yellow; }
  15 }
  16
  17 body {
  18     position: absolute;
  19     top: 0;
  20     right: 0;
  21     bottom: 0;
  22     left: 0;
  23     margin: 0;
  24     font-size: 8px;
  25 }
  26
  27 </style>
  28
  29 <script src="../../../http/tests/inspector/inspector-test.js"></script>
  30 <script src="../../../http/tests/inspector/elements-test.js"></script>
  31 <script>
  32
  33 function getSizes()
  34 {
  35     return JSON.stringify({
  36         screen: window.screen.width + "x" + window.screen.height,
  37         inner: window.innerWidth + "x" + window.innerHeight,
  38         body: document.body.offsetWidth + "x" + document.body.offsetHeight
  39     });
  40 }
  41
  42 function test()
  43 {
  44     var exceededDimension = 10000001;
  45     var overridesEnabled = false;
  46     var originalScreenSize;
  47
  48     function saveSizeCallback(jsonResult)
  49     {
  50         var value = JSON.parse(jsonResult.value);
  51         originalScreenSize = value.screen;
  52         if (!originalScreenSize || originalScreenSize.indexOf("x") === -1)
  53             InspectorTest.addResult("Invalid original screen size: " + originalScreenSize + ". Expect runtime failures later on.");
  54
  55         InspectorTest.selectNodeAndWaitForStyles("main", step0);
  56     }
  57
  58     InspectorTest.evaluateInPage("getSizes()", saveSizeCallback);
  59
  60
  61     function step0()
  62     {
  63         overrideAndDumpData(1000, 1200, step1);
  64     }
  65
  66     function step1()
  67     {
  68         overrideAndDumpData(1200, 1000, step2);
  69     }
  70
  71     function step2()
  72     {
  73         applyOverride(exceededDimension, 1200, step3);
  74     }
  75
  76     function step3()
  77     {
  78         applyOverride(-1, 1200, step4);
  79     }
  80
  81     function step4()
  82     {
  83         applyOverride(1000, exceededDimension, step5);
  84     }
  85
  86     function step5()
  87     {
  88         function callback()
  89         {
  90             InspectorTest.addResult("Current dimensions:");
  91             getAndDumpSizes(step6);
  92         }
  93         applyOverride(1000, -1, callback);
  94     }
  95
  96     function step6()
  97     {
  98         function compareSizeCallback(jsonResult)
  99         {
 100             // Check that the screen size reported is the same as the original one.
 101             var result = JSON.parse(jsonResult.value);
 102             if (result.screen !== originalScreenSize)
 103                 InspectorTest.addResult("Original size " + originalScreenSize + " not restored, found: " + result.screen);
 104             InspectorTest.completeTest();
 105         }
 106
 107         function overrideCallback()
 108         {
 109             InspectorTest.evaluateInPage("getSizes()", compareSizeCallback);
 110         }
 111
 112         // Disable overrides.
 113         applyOverride(0, 0, overrideCallback);
 114     }
 115
 116     function applyOverride(width, height, userCallback)
 117     {
 118         function callback(error)
 119         {
 120             if (error)
 121                 InspectorTest.addResult("Override: " + width + "x" + height + " => ERROR");
 122             userCallback();
 123         }
 124
 125         var enabled = width != 0 || height != 0;
 126         PageAgent.setDeviceMetricsOverride(width, height, 1, false, true, callback);
 127         overridesEnabled = enabled;
 128     }
 129
 130     function overrideAndDumpData(width, height, callback)
 131     {
 132         function finalCallback()
 133         {
 134             InspectorTest.addResult("Main style:");
 135             InspectorTest.dumpSelectedElementStyles(true, false, true);
 136             callback();
 137         }
 138
 139         var gotSizes;
 140         var gotStyles;
 141         function stylesCallback()
 142         {
 143             if (gotSizes)
 144                 return finalCallback();
 145             gotStyles = true;
 146         }
 147
 148         function sizesCallback()
 149         {
 150             gotSizes = true;
 151             if (gotStyles)
 152                 finalCallback();
 153         }
 154
 155         function applyCallback()
 156         {
 157             getAndDumpSizes(sizesCallback);
 158         }
 159
 160         InspectorTest.addResult("Override: " + width + "x" + height);
 161         InspectorTest.waitForStyles("main", stylesCallback);
 162         applyOverride(width, height, applyCallback);
 163     }
 164
 165     function getAndDumpSizes(callback)
 166     {
 167         function getSizesCallback(jsonResult)
 168         {
 169             var result = JSON.parse(jsonResult.value);
 170             InspectorTest.addResult("Screen from page: " + result.screen);
 171             InspectorTest.addResult("Window from page: " + result.inner);
 172             InspectorTest.addResult("Body from page: " + result.body);
 173             if (callback)
 174                 callback();
 175         }
 176
 177         InspectorTest.evaluateInPage("getSizes()", getSizesCallback);
 178     }
 179 }
 180 </script>
 181 </head>
 182
 183 <body onload="runTest()">
 184 <p>
 185 Tests that screen dimension overrides affect media rules, body dimensions, and window.screen.
 186 </p>
 187
 188 <div id="main"></div>
 189 </body>
 190 </html>