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| Index: LayoutTests/inspector/device-emulation/device-emulation-mq-on-resize.html |
| diff --git a/LayoutTests/inspector/device-emulation/device-emulation-mq-on-resize.html b/LayoutTests/inspector/device-emulation/device-emulation-mq-on-resize.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..6e1ee5e3026a460ef326eee092cf097c86f96975 |
| --- /dev/null |
| +++ b/LayoutTests/inspector/device-emulation/device-emulation-mq-on-resize.html |
| @@ -0,0 +1,140 @@ |
| +<html> |
| +<head> |
| + |
| +<script src="../../http/tests/inspector/inspector-test.js"></script> |
| + |
| +<style> |
| +body { |
| + margin: 0; |
| + min-height: 1000px; |
| +} |
| +#test { |
| + width: 100px; |
| + height: 100px; |
| +} |
| +@media all and (device-width:700px) |
| +{ |
| + #test { width: 300px; } |
| +} |
| +@media all and (max-device-width:699px) |
| +{ |
| + #test { width: 200px; } |
| +} |
| +@media all and (min-device-width:701px) |
| +{ |
| + #test { width: 400px; } |
| +} |
| +@media all and (device-height:500px) |
| +{ |
| + #test { height: 300px; } |
| +} |
| +@media all and (max-device-height:499px) |
| +{ |
| + #test { height: 200px; } |
| +} |
| +@media all and (min-device-height:501px) |
| +{ |
| + #test { height: 400px; } |
| +} |
| +</style> |
| + |
| +<script> |
| +if (window.testRunner) |
| + testRunner.useUnfortunateSynchronousResizeMode(); |
| + |
| +function dumpSize() |
| +{ |
| + var div = document.querySelector("#test"); |
| + return div.offsetWidth + "x" + div.offsetHeight; |
| +} |
| + |
| +function resize(width, height) |
| +{ |
| + window.resizeTo(width, height); |
| +} |
| + |
| +function test() |
| +{ |
| + function getSize(callback) |
| + { |
| + InspectorTest.evaluateInPage("dumpSize()", parse); |
| + |
| + function parse(result) |
| + { |
| + callback(result.value); |
| + } |
| + } |
| + |
| + function testOnSize(width, height, expected, next) |
| + { |
| + InspectorTest.evaluateInPage("resize(900, 700)", enable); |
| + |
| + function enable() |
| + { |
| + PageAgent.invoke_setDeviceMetricsOverride({width: 0, height: 0, deviceScaleFactor: 0, emulateViewport: true, fitWindow: false}, resize); |
| + } |
| + |
| + function resize() |
| + { |
| + InspectorTest.evaluateInPage("resize(" + width + "," + height + ")", getSize.bind(null, check)); |
| + } |
| + |
| + function check(size) |
| + { |
| + InspectorTest.addResult(width + "x" + height + ": " + size + (size != expected ? " instead of " + expected : "")); |
| + PageAgent.clearDeviceMetricsOverride(next); |
| + } |
| + } |
| + |
| + InspectorTest.runTestSuite([ |
| + function exactSize(next) |
| + { |
| + testOnSize(700, 500, "300x300", next); |
| + }, |
| + |
| + function testWidthMore(next) |
| + { |
| + testOnSize(710, 500, "400x300", next); |
| + }, |
| + |
| + function testWidthLess(next) |
| + { |
| + testOnSize(690, 500, "200x300", next); |
| + }, |
| + |
| + function testHeightMore(next) |
| + { |
| + testOnSize(700, 510, "300x400", next); |
| + }, |
| + |
| + function testHeightLess(next) |
| + { |
| + testOnSize(700, 490, "300x200", next); |
| + }, |
| + |
| + function testBothMore(next) |
| + { |
| + testOnSize(710, 510, "400x400", next); |
| + }, |
| + |
| + function testBothLess(next) |
| + { |
| + testOnSize(690, 490, "200x200", next); |
| + }, |
| + |
| + function reset(next) |
| + { |
| + testOnSize(800, 600, "400x400", next); |
| + } |
| + ]); |
| +} |
| +</script> |
| + |
| +</head> |
| +<body onload="runTest()"> |
| +<div id="test"></div> |
| +<p> |
| +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.
|
| +</p> |
| +</body> |
| +</html> |
