LayoutTests/inspector/styles/override-screen-size.html

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