| 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..61b0f02534aee34f90adffa5292cddf8d352ea31
|
| --- /dev/null
|
| +++ b/LayoutTests/inspector/device-emulation/device-emulation-mq-on-resize.html
|
| @@ -0,0 +1,141 @@
|
| +<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)
|
| + {
|
| + var fail = size != expected;
|
| + InspectorTest.addResult((fail ? "[FAIL] " : "") + width + "x" + height + ": " + size + (fail ? " 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 [max-]device-{width,height} media query values are updated when resizing with device emulation enabled.
|
| +</p>
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 308003007:
[DevTools] Update media queries when resizing with emulation on. (Closed)
Base URL: svn://svn.chromium.org/blink/trunk