4 <style type="text/css" media="screen">
5 @media (max-device-width: 998px) and (max-device-height: 1199x) {
6 #main { background: red; }
9 @media (max-device-width: 1000px) and (max-device-height: 1200px) {
10 #main { background: green; }
13 @media (min-device-width: 1001px) and (min-device-height: 1201px) {
14 #main { background: yellow; }
29 <script src="../../http/tests/inspector/inspector-test.js"></script>
30 <script src="../../http/tests/inspector/elements-test.js"></script>
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
44 var exceededDimension = 10000001;
45 var overridesEnabled = false;
46 var originalScreenSize;
48 function saveSizeCallback(jsonResult)
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.");
55 InspectorTest.selectNodeAndWaitForStyles("main", step0);
58 InspectorTest.evaluateInPage("getSizes()", saveSizeCallback);
63 overrideAndDumpData(1000, 1200, step1);
68 overrideAndDumpData(1200, 1000, step2);
73 applyOverride(exceededDimension, 1200, step3);
78 applyOverride(-1, 1200, step4);
83 applyOverride(1000, exceededDimension, step5);
90 InspectorTest.addResult("Current dimensions:");
91 getAndDumpSizes(step6);
93 applyOverride(1000, -1, callback);
98 function compareSizeCallback(jsonResult)
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();
107 function overrideCallback()
109 InspectorTest.evaluateInPage("getSizes()", compareSizeCallback);
112 // Disable overrides.
113 applyOverride(0, 0, overrideCallback);
116 function applyOverride(width, height, userCallback)
118 function callback(error)
121 InspectorTest.addResult("Override: " + width + "x" + height + " => ERROR");
125 var enabled = width != 0 || height != 0;
126 PageAgent.setDeviceMetricsOverride(width, height, 1, false, true, callback);
127 overridesEnabled = enabled;
130 function overrideAndDumpData(width, height, callback)
132 function finalCallback()
134 InspectorTest.addResult("Main style:");
135 InspectorTest.dumpSelectedElementStyles(true, false, true);
141 function stylesCallback()
144 return finalCallback();
148 function sizesCallback()
155 function applyCallback()
157 getAndDumpSizes(sizesCallback);
160 InspectorTest.addResult("Override: " + width + "x" + height);
161 InspectorTest.waitForStyles("main", stylesCallback);
162 applyOverride(width, height, applyCallback);
165 function getAndDumpSizes(callback)
167 function getSizesCallback(jsonResult)
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);
177 InspectorTest.evaluateInPage("getSizes()", getSizesCallback);
183 <body onload="runTest()">
185 Tests that screen dimension overrides affect media rules, body dimensions, and window.screen.
188 <div id="main"></div>