<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>meta viewport test</title> <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> <meta name="viewport" content="width=320"> <script src="viewport_helpers.js"></script> </head> <body> <p>Dynamic viewport updates</p> <script type="application/javascript;version=1.7"> "use strict"; SimpleTest.waitForExplicitFinish(); let tests = []; tests.push(function test1() { SpecialPowers.pushPrefEnv(scaleRatio(1.0), function() { updateViewport("width=device-width"); let info = getViewportInfo(800, 480); is(info.defaultZoom, 1, "initial zoom is 100%"); is(info.width, 800, "width is the same as the displayWidth"); is(info.height, 480, "height is the same as the displayHeight"); is(info.autoSize, true, "width=device-width enables autoSize"); is(info.allowZoom, true, "zooming is enabled by default"); info = getViewportInfo(900, 600); is(info.width, 900, "changing the displayWidth changes the width"); is(info.height, 600, "changing the displayHeight changes the height"); nextTest(); }); }); tests.push(function test2() { SpecialPowers.pushPrefEnv(scaleRatio(1.0), function() { updateViewport("width=320"); let info = getViewportInfo(800, 80); is(info.defaultZoom, 2.5, "initial zoom fits the displayWidth"); is(info.width, 320, "width is set explicitly"); is(info.height, 40, "height is at the absolute minimum"); is(info.autoSize, false, "width=device-width enables autoSize"); is(info.allowZoom, true, "zooming is enabled by default"); info = getViewportInfo(480, 800); is(info.defaultZoom, 1.5, "initial zoom fits the new displayWidth"); is(info.width, 320, "explicit width is unchanged"); is(info.height, 533, "height changes proportional to displayHeight"); nextTest(); }); }); tests.push(function test3() { SpecialPowers.pushPrefEnv(scaleRatio(1.0), function() { updateViewport("user-scalable=no"); let info = getViewportInfo(800, 480); is(info.allowZoom, false, "zooming is explicitly disabled"); nextTest(); }); }); tests.push(function test4() { SpecialPowers.pushPrefEnv(scaleRatio(1.0), function() { updateViewport("user-scalable=yes"); let info = getViewportInfo(800, 480); is(info.allowZoom, true, "zooming is explicitly allowed"); nextTest(); }); }); function getViewportInfo(aDisplayWidth, aDisplayHeight) { let defaultZoom = {}, allowZoom = {}, minZoom = {}, maxZoom = {}, width = {}, height = {}, autoSize = {}; let cwu = SpecialPowers.getDOMWindowUtils(window); cwu.getViewportInfo(aDisplayWidth, aDisplayHeight, defaultZoom, allowZoom, minZoom, maxZoom, width, height, autoSize); return { defaultZoom: defaultZoom.value, minZoom: minZoom.value, maxZoom: maxZoom.value, width: width.value, height: height.value, autoSize: autoSize.value, allowZoom: allowZoom.value }; } function updateViewport(content) { let meta = document.querySelector("meta[name=viewport]"); meta.content = content; } function nextTest() { if (tests.length) { (tests.shift())(); } else { SimpleTest.finish(); } } addEventListener("load", nextTest); </script> </body> </html>