Chromium Code Reviews Chromium Code Reviews
Issue 308003007:
[DevTools] Update media queries when resizing with emulation on. (Closed)
Base URL: svn://svn.chromium.org/blink/trunk| 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 InspectorTest.addResult(width + "x" + height + ": " + size + (size ! = expected ? " instead of " + expected : "")); | |
| 85 PageAgent.clearDeviceMetricsOverride(next); | |
| 86 } | |
| 87 } | |
| 88 | |
| 89 InspectorTest.runTestSuite([ | |
| 90 function exactSize(next) | |
| 91 { | |
| 92 testOnSize(700, 500, "300x300", next); | |
| 93 }, | |
| 94 | |
| 95 function testWidthMore(next) | |
| 96 { | |
| 97 testOnSize(710, 500, "400x300", next); | |
| 98 }, | |
| 99 | |
| 100 function testWidthLess(next) | |
| 101 { | |
| 102 testOnSize(690, 500, "200x300", next); | |
| 103 }, | |
| 104 | |
| 105 function testHeightMore(next) | |
| 106 { | |
| 107 testOnSize(700, 510, "300x400", next); | |
| 108 }, | |
| 109 | |
| 110 function testHeightLess(next) | |
| 111 { | |
| 112 testOnSize(700, 490, "300x200", next); | |
| 113 }, | |
| 114 | |
| 115 function testBothMore(next) | |
| 116 { | |
| 117 testOnSize(710, 510, "400x400", next); | |
| 118 }, | |
| 119 | |
| 120 function testBothLess(next) | |
| 121 { | |
| 122 testOnSize(690, 490, "200x200", next); | |
| 123 }, | |
| 124 | |
| 125 function reset(next) | |
| 126 { | |
| 127 testOnSize(800, 600, "400x400", next); | |
| 128 } | |
| 129 ]); | |
| 130 } | |
| 131 </script> | |
| 132 | |
| 133 </head> | |
| 134 <body onload="runTest()"> | |
| 135 <div id="test"></div> | |
| 136 <p> | |
| 137 Tests that device width is updated when resizing. | |
|
apavlov
2014/06/04 11:21:06
This is not what this test is about, is it? :)
dgozman
2014/06/10 10:26:02
Done.
| |
| 138 </p> | |
| 139 </body> | |
| 140 </html> | |
| OLD | NEW |
