| OLD | NEW |
|---|
| (Empty) | |
| 1 <html> |
| 2 <head> |
| 3 |
| 4 <script src="../../http/tests/inspector/inspector-test.js"></script> |
| 5 |
| 6 <style> |
| 7 body { |
| 8 margin: 0; |
| 9 min-height: 1000px; |
| 10 } |
| 11 #test { |
| 12 width: 100px; |
| 13 height: 100px; |
| 14 } |
| 15 @media all and (device-width:700px) |
| 16 { |
| 17 #test { width: 300px; } |
| 18 } |
| 19 @media all and (max-device-width:699px) |
| 20 { |
| 21 #test { width: 200px; } |
| 22 } |
| 23 @media all and (min-device-width:701px) |
| 24 { |
| 25 #test { width: 400px; } |
| 26 } |
| 27 @media all and (device-height:500px) |
| 28 { |
| 29 #test { height: 300px; } |
| 30 } |
| 31 @media all and (max-device-height:499px) |
| 32 { |
| 33 #test { height: 200px; } |
| 34 } |
| 35 @media all and (min-device-height:501px) |
| 36 { |
| 37 #test { height: 400px; } |
| 38 } |
| 39 </style> |
| 40 |
| 41 <script> |
| 42 if (window.testRunner) |
| 43 testRunner.useUnfortunateSynchronousResizeMode(); |
| 44 |
| 45 function dumpSize() |
| 46 { |
| 47 var div = document.querySelector("#test"); |
| 48 return div.offsetWidth + "x" + div.offsetHeight; |
| 49 } |
| 50 |
| 51 function resize(width, height) |
| 52 { |
| 53 window.resizeTo(width, height); |
| 54 } |
| 55 |
| 56 function test() |
| 57 { |
| 58 function getSize(callback) |
| 59 { |
| 60 InspectorTest.evaluateInPage("dumpSize()", parse); |
| 61 |
| 62 function parse(result) |
| 63 { |
| 64 callback(result.value); |
| 65 } |
| 66 } |
| 67 |
| 68 function testOnSize(width, height, expected, next) |
| 69 { |
| 70 InspectorTest.evaluateInPage("resize(900, 700)", enable); |
| 71 |
| 72 function enable() |
| 73 { |
| 74 PageAgent.invoke_setDeviceMetricsOverride({width: 0, height: 0, devi
ceScaleFactor: 0, emulateViewport: true, fitWindow: false}, resize); |
| 75 } |
| 76 |
| 77 function resize() |
| 78 { |
| 79 InspectorTest.evaluateInPage("resize(" + width + "," + height + ")",
getSize.bind(null, check)); |
| 80 } |
| 81 |
| 82 function check(size) |
| 83 { |
| 84 var fail = size != expected; |
| 85 InspectorTest.addResult((fail ? "[FAIL] " : "") + width + "x" + heig
ht + ": " + size + (fail ? " instead of " + expected : "")); |
| 86 PageAgent.clearDeviceMetricsOverride(next); |
| 87 } |
| 88 } |
| 89 |
| 90 InspectorTest.runTestSuite([ |
| 91 function exactSize(next) |
| 92 { |
| 93 testOnSize(700, 500, "300x300", next); |
| 94 }, |
| 95 |
| 96 function testWidthMore(next) |
| 97 { |
| 98 testOnSize(710, 500, "400x300", next); |
| 99 }, |
| 100 |
| 101 function testWidthLess(next) |
| 102 { |
| 103 testOnSize(690, 500, "200x300", next); |
| 104 }, |
| 105 |
| 106 function testHeightMore(next) |
| 107 { |
| 108 testOnSize(700, 510, "300x400", next); |
| 109 }, |
| 110 |
| 111 function testHeightLess(next) |
| 112 { |
| 113 testOnSize(700, 490, "300x200", next); |
| 114 }, |
| 115 |
| 116 function testBothMore(next) |
| 117 { |
| 118 testOnSize(710, 510, "400x400", next); |
| 119 }, |
| 120 |
| 121 function testBothLess(next) |
| 122 { |
| 123 testOnSize(690, 490, "200x200", next); |
| 124 }, |
| 125 |
| 126 function reset(next) |
| 127 { |
| 128 testOnSize(800, 600, "400x400", next); |
| 129 } |
| 130 ]); |
| 131 } |
| 132 </script> |
| 133 |
| 134 </head> |
| 135 <body onload="runTest()"> |
| 136 <div id="test"></div> |
| 137 <p> |
| 138 Tests that [max-]device-{width,height} media query values are updated when resiz
ing with device emulation enabled. |
| 139 </p> |
| 140 </body> |
| 141 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 308003007:
[DevTools] Update media queries when resizing with emulation on. (Closed)
Base URL: svn://svn.chromium.org/blink/trunk