summaryrefslogtreecommitdiffstats
path: root/dom/base/test/meta_viewport
diff options
context:
space:
mode:
Diffstat (limited to 'dom/base/test/meta_viewport')
-rw-r--r--dom/base/test/meta_viewport/mochitest.ini54
-rw-r--r--dom/base/test/meta_viewport/moz.build9
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport0.html41
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport1.html41
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport2.html41
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport3.html43
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport4.html42
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport5.html24
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport6.html47
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport7.html71
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport8.html27
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_device_height.html24
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_device_width.html24
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_fixed_height_and_initial_scale_1.html25
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_fixed_width_and_device_height.html25
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_fixed_width_and_initial_scale_1.html25
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_initial_scale_0_5.html25
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_initial_scale_1.html25
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_invalid_width.html24
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_invalid_width_and_fixed_height.html25
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_change_content_among_multiple.html52
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_change_name.html47
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_change_name_among_multiple.html44
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_device_width.html25
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_device_width_with_initial_scale_0_5.html26
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_device_width_with_initial_scale_2.html31
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_empty_content_and_valid_content_tags.html26
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_fit.html34
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_fit_multiple.html25
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_fixed_width_and_zero_display_width.html29
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_initial_scale_0_5.html33
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_initial_scale_2.html26
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_initial_scale_with_trailing_characters.html26
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_insert_before_existing_tag.html32
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_maximum_scale_0.html28
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_maximum_scale_0_5.html29
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_maximum_scale_2.html26
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_multiple_tags.html28
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_negative_width_and_negative_height.html27
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_negative_width_and_no_height.html25
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_negative_width_and_valid_height.html25
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_no_content_and_valid_content_tags.html25
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_no_width_and_negative_height.html26
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_no_width_and_valid_height.html25
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_remove_node.html34
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_remove_node_from_multiple.html44
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_removing_content_attribute.html33
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_replace_content.html39
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_tiny_display_size.html28
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_valid_width_and_negative_height.html26
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_valid_width_and_no_height.html26
-rw-r--r--dom/base/test/meta_viewport/test_meta_viewport_width_with_trailing_characters.html26
-rw-r--r--dom/base/test/meta_viewport/viewport_helpers.js44
53 files changed, 1682 insertions, 0 deletions
diff --git a/dom/base/test/meta_viewport/mochitest.ini b/dom/base/test/meta_viewport/mochitest.ini
new file mode 100644
index 0000000000..cfe63cc999
--- /dev/null
+++ b/dom/base/test/meta_viewport/mochitest.ini
@@ -0,0 +1,54 @@
+[DEFAULT]
+support-files =
+ viewport_helpers.js
+
+[test_meta_viewport0.html]
+[test_meta_viewport1.html]
+[test_meta_viewport2.html]
+[test_meta_viewport3.html]
+[test_meta_viewport4.html]
+[test_meta_viewport5.html]
+[test_meta_viewport6.html]
+[test_meta_viewport7.html]
+[test_meta_viewport8.html]
+[test_meta_viewport_auto_size_by_device_height.html]
+[test_meta_viewport_auto_size_by_device_width.html]
+[test_meta_viewport_auto_size_by_fixed_height_and_initial_scale_1.html]
+[test_meta_viewport_auto_size_by_fixed_width_and_device_height.html]
+[test_meta_viewport_auto_size_by_fixed_width_and_initial_scale_1.html]
+[test_meta_viewport_auto_size_by_initial_scale_0_5.html]
+[test_meta_viewport_auto_size_by_initial_scale_1.html]
+[test_meta_viewport_auto_size_by_invalid_width.html]
+[test_meta_viewport_auto_size_by_invalid_width_and_fixed_height.html]
+[test_meta_viewport_change_content_among_multiple.html]
+[test_meta_viewport_change_name.html]
+[test_meta_viewport_change_name_among_multiple.html]
+[test_meta_viewport_device_width.html]
+[test_meta_viewport_device_width_with_initial_scale_0_5.html]
+[test_meta_viewport_device_width_with_initial_scale_2.html]
+[test_meta_viewport_fit.html]
+[test_meta_viewport_fit_multiple.html]
+[test_meta_viewport_fixed_width_and_zero_display_width.html]
+[test_meta_viewport_initial_scale_0_5.html]
+[test_meta_viewport_initial_scale_2.html]
+[test_meta_viewport_insert_before_existing_tag.html]
+[test_meta_viewport_maximum_scale_0.html]
+[test_meta_viewport_maximum_scale_0_5.html]
+[test_meta_viewport_maximum_scale_2.html]
+[test_meta_viewport_multiple_tags.html]
+[test_meta_viewport_negative_width_and_negative_height.html]
+[test_meta_viewport_negative_width_and_no_height.html]
+[test_meta_viewport_negative_width_and_valid_height.html]
+[test_meta_viewport_valid_width_and_negative_height.html]
+[test_meta_viewport_valid_width_and_no_height.html]
+[test_meta_viewport_no_width_and_negative_height.html]
+[test_meta_viewport_no_width_and_valid_height.html]
+[test_meta_viewport_remove_node.html]
+[test_meta_viewport_remove_node_from_multiple.html]
+[test_meta_viewport_replace_content.html]
+[test_meta_viewport_tiny_display_size.html]
+[test_meta_viewport_initial_scale_with_trailing_characters.html]
+[test_meta_viewport_width_with_trailing_characters.html]
+[test_meta_viewport_empty_content_and_valid_content_tags.html]
+[test_meta_viewport_no_content_and_valid_content_tags.html]
+[test_meta_viewport_removing_content_attribute.html]
diff --git a/dom/base/test/meta_viewport/moz.build b/dom/base/test/meta_viewport/moz.build
new file mode 100644
index 0000000000..60b508c774
--- /dev/null
+++ b/dom/base/test/meta_viewport/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+MOCHITEST_MANIFESTS += [
+ "mochitest.ini",
+]
diff --git a/dom/base/test/meta_viewport/test_meta_viewport0.html b/dom/base/test/meta_viewport/test_meta_viewport0.html
new file mode 100644
index 0000000000..8fef72c578
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport0.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>meta viewport test</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>No &lt;meta name="viewport"&gt; tag</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function test1() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ fuzzeq(info.defaultZoom, 0.25, "initial scale is clamped to the default mimumim scale");
+ fuzzeq(info.minZoom, 0.25, "minimum scale defaults to the absolute minimum");
+ is(info.maxZoom, 10, "maximum scale defaults to the absolute maximum");
+ is(info.width, 980, "width is the default width");
+ is(info.height, 588, "height is proportional to displayHeight");
+ is(info.autoSize, false, "autoSize is disabled by default");
+ is(info.allowZoom, true, "zooming is enabled by default");
+
+ info = getViewportInfo(490, 600);
+ is(info.width, 980, "width is still the default width");
+ is(info.height, 1200, "height is proportional to the new displayHeight");
+ });
+
+ add_task(async function test2() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.5));
+
+ let info = getViewportInfo(800, 480);
+ is(info.width, 980, "width is still the default width");
+ is(info.height, 588, "height is still proportional to displayHeight");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport1.html b/dom/base/test/meta_viewport/test_meta_viewport1.html
new file mode 100644
index 0000000000..66dd02461e
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>meta viewport test</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>width=device-width, initial-scale=1</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function test1() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ 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");
+ });
+
+ add_task(async function test2() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.5));
+
+ let info = getViewportInfo(900, 600);
+ is(info.defaultZoom, 1.5, "initial zoom is 150%");
+ is(info.width, 600, "width equals displayWidth/1.5");
+ is(info.height, 400, "height equals displayHeight/1.5");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport2.html b/dom/base/test/meta_viewport/test_meta_viewport2.html
new file mode 100644
index 0000000000..e0f45813be
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport2.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>meta viewport test</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=device-width">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>width=device-width</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function test1() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ 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");
+ });
+
+ add_task(async function test2() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.5));
+
+ let info = getViewportInfo(900, 600);
+ is(info.defaultZoom, 1.5, "initial zoom is 150%");
+ is(info.width, 600, "width equals displayWidth/1.5");
+ is(info.height, 400, "height equals displayHeight/1.5");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport3.html b/dom/base/test/meta_viewport/test_meta_viewport3.html
new file mode 100644
index 0000000000..32464bd126
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport3.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>meta viewport test</title>
+ <script 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>width=320</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function test1() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ 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");
+ });
+
+ add_task(async function test2() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.5));
+
+ // With an explicit width in CSS px, the scaleRatio has no effect.
+ let info = getViewportInfo(800, 80);
+ is(info.defaultZoom, 2.5, "initial zoom still fits the displayWidth");
+ is(info.width, 320, "width is still set explicitly");
+ is(info.height, 40, "height is still minimum height");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport4.html b/dom/base/test/meta_viewport/test_meta_viewport4.html
new file mode 100644
index 0000000000..bc7f7ada55
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport4.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>meta viewport test</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>initial-scale=1.0, user-scalable=no</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function test1() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ is(info.defaultZoom, 1, "initial zoom is set explicitly");
+ is(info.width, 800, "width fits the initial zoom level");
+ is(info.height, 480, "height fits the initial zoom level");
+ is(info.autoSize, true, "initial-scale=1 enables autoSize");
+ is(info.allowZoom, false, "zooming is explicitly disabled");
+
+ info = getViewportInfo(480, 800);
+ is(info.defaultZoom, 1, "initial zoom is still set explicitly");
+ is(info.width, 480, "width changes to match the displayWidth");
+ is(info.height, 800, "height changes to match the displayHeight");
+ });
+
+ add_task(async function test2() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.5));
+
+ let info = getViewportInfo(800, 480);
+ is(info.defaultZoom, 1.5, "initial zoom is adjusted for device pixel ratio");
+ is(info.width, 533, "width fits the initial zoom");
+ is(info.height, 320, "height fits the initial zoom");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport5.html b/dom/base/test/meta_viewport/test_meta_viewport5.html
new file mode 100644
index 0000000000..938cc052ee
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport5.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>meta viewport test</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="user-scalable=NO">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>user-scalable=NO</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function test1() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ is(info.allowZoom, true, "user-scalable values are case-sensitive; 'NO' is not valid");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport6.html b/dom/base/test/meta_viewport/test_meta_viewport6.html
new file mode 100644
index 0000000000..e3ca1b72aa
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport6.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>meta viewport test</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=2000, minimum-scale=0.75">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>width=2000, minimum-scale=0.75</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function test1() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ is(info.minZoom, 0.75, "minumum scale is set explicitly");
+ is(info.defaultZoom, 0.75, "initial scale is bounded by the minimum scale");
+ is(info.maxZoom, 10, "maximum scale defaults to the absolute maximum");
+ is(info.width, 2000, "width is set explicitly");
+ is(info.height, 1200, "height is proportional to displayHeight");
+ is(info.autoSize, false, "autoSize is disabled by default");
+ is(info.allowZoom, true, "zooming is enabled by default");
+
+ info = getViewportInfo(2000, 1000);
+ is(info.minZoom, 0.75, "minumum scale is still set explicitly");
+ is(info.defaultZoom, 1, "initial scale fits the width");
+ is(info.width, 2000, "width is set explicitly");
+ is(info.height, 1000, "height is proportional to the new displayHeight");
+ });
+
+ add_task(async function test2() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.5));
+
+ let info = getViewportInfo(800, 480);
+ is(info.minZoom, 1.125, "minumum scale is converted to device pixel scale");
+ is(info.defaultZoom, 1.125, "initial scale is bounded by the minimum scale");
+ is(info.maxZoom, 15, "maximum scale defaults to the absolute maximum");
+ is(info.width, 2000, "width is still set explicitly");
+ is(info.height, 1200, "height is still proportional to displayHeight");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport7.html b/dom/base/test/meta_viewport/test_meta_viewport7.html
new file mode 100644
index 0000000000..1f40c27109
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport7.html
@@ -0,0 +1,71 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>meta viewport test</title>
+ <script 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">
+ "use strict";
+
+ add_task(async function test1() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ 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");
+ });
+
+ add_task(async function test2() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ 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");
+ });
+
+ add_task(async function test3() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ updateViewport("user-scalable=no");
+ let info = getViewportInfo(800, 480);
+ is(info.allowZoom, false, "zooming is explicitly disabled");
+ });
+
+ add_task(async function test4() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ updateViewport("user-scalable=yes");
+ let info = getViewportInfo(800, 480);
+ is(info.allowZoom, true, "zooming is explicitly allowed");
+ });
+
+ function updateViewport(content) {
+ let meta = document.querySelector("meta[name=viewport]");
+ meta.content = content;
+ }
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport8.html b/dom/base/test/meta_viewport/test_meta_viewport8.html
new file mode 100644
index 0000000000..4c711c9cc6
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport8.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>meta viewport test</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="initial-scale=0.01">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>minimum-scale=0.01</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function test1() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ is(info.minZoom, 0.25, "minimum scale defaults to the absolute minimum");
+ is(info.defaultZoom, 0.25, "initial scale is bounded by the minimum scale");
+ is(info.width, 3200, "width is scaled correctly by zoom level");
+ is(info.height, 1920, "height is scaled correctly by zoom level");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_device_height.html b/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_device_height.html
new file mode 100644
index 0000000000..1b6c35a602
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_device_height.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>device-height enables autoSize</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="height=device-height">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>height=device-height</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function device_height() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ ok(info.autoSize, "device-height should enable autoSize");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_device_width.html b/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_device_width.html
new file mode 100644
index 0000000000..fb91f2e50c
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_device_width.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>device-width enables autoSize</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=device-width">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>width=device-width</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function device_width() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ ok(info.autoSize, "device-width should enable autoSize");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_fixed_height_and_initial_scale_1.html b/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_fixed_height_and_initial_scale_1.html
new file mode 100644
index 0000000000..83346f4924
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_fixed_height_and_initial_scale_1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>initial-scale=1 with fixed height enable autoSize</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="height=400, initial-scale=1">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>height=400, initial-scale=1</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function fixed_height_and_initial_scale_1() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ ok(info.autoSize,
+ "initial-scale=1 with fixed height should enable autoSize");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_fixed_width_and_device_height.html b/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_fixed_width_and_device_height.html
new file mode 100644
index 0000000000..e570f80644
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_fixed_width_and_device_height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Fixed width and device-height disables autoSize</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=400,height=device-height">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>width=400, height=device-height</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function fixed_width_and_device_height() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ ok(!info.autoSize,
+ "Fixed width should disable autoSize even if height is device-height");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_fixed_width_and_initial_scale_1.html b/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_fixed_width_and_initial_scale_1.html
new file mode 100644
index 0000000000..4453b4c959
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_fixed_width_and_initial_scale_1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>initial-scale=1 with fixed width disables autoSize</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=400, initial-scale=1">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>width=400, initial-scale=1</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function fixed_width_and_initial_scale_1() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ ok(!info.autoSize,
+ "initial-scale=1 with fixed width should disable autoSize");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_initial_scale_0_5.html b/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_initial_scale_0_5.html
new file mode 100644
index 0000000000..ff12b22454
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_initial_scale_0_5.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>initial-scale!=1 without width disables autoSize</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="initial-scale=0.5">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>initial-scale!=1</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function initial_scale_0_5() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ ok(!info.autoSize,
+ "initial-scale!=1 without width should disable autoSize");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_initial_scale_1.html b/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_initial_scale_1.html
new file mode 100644
index 0000000000..e86742b8f2
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_initial_scale_1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>initial-scale=1 without width enables autoSize</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="initial-scale=1">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>initial-scale=1</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function initial_scale_1() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ ok(info.autoSize,
+ "initial-scale=1 without width should enable autoSize");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_invalid_width.html b/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_invalid_width.html
new file mode 100644
index 0000000000..6c950185bc
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_invalid_width.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>invalid width enables autoSize</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=-1">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>width=-1</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function invalid_width() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ ok(info.autoSize, "invalid width should enable autoSize");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_invalid_width_and_fixed_height.html b/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_invalid_width_and_fixed_height.html
new file mode 100644
index 0000000000..db68ecb6ec
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_invalid_width_and_fixed_height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>invalid width but with fixed height disables autoSize</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=-1,height=200">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>width=-1,height=200</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function invalid_width_and_fixed_height() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ ok(!info.autoSize,
+ "invalid width but with valid height should disable autoSize");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_change_content_among_multiple.html b/dom/base/test/meta_viewport/test_meta_viewport_change_content_among_multiple.html
new file mode 100644
index 0000000000..8ec88b8920
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_change_content_among_multiple.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>content attribute changes among multiple meta viewport tags</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta id="first" name="viewport" content="width=980">
+ <meta id="second" name="viewport" content="width=device-width, initial-scale=1">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function change_content_attribute() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ // The second meta tag is the one we use.
+ is(info.defaultZoom, 1, "initial zoom is 1");
+ is(info.width, 800, "width should be 800");
+ is(info.height, 480, "height should be 480");
+
+ // Change the content of the first one.
+ // eslint-disable-next-line no-undef
+ first.setAttribute("content", "width=640");
+
+ // Now the first one is prior to the second one.
+ info = getViewportInfo(800, 480);
+ fuzzeq(info.defaultZoom, 800/640, "initial scale is calculated based on width");
+ is(info.minZoom, 0.25, "minimum scale defaults to the absolute minimum");
+ is(info.maxZoom, 10, "maximum scale defaults to the absolute maximum");
+ is(info.width, 640, "width is the default width");
+ is(info.height, 480*640/800, "height is proportional to displayHeight");
+
+ // Cleat the second content.
+ // eslint-disable-next-line no-undef
+ second.setAttribute("content", "");
+
+ // The second one is prior to the first one, but the content is empty so
+ // that we should behave as if there is no meta viewport tag.
+ info = getViewportInfo(800, 480);
+ is(info.defaultZoom, 0.25, "initial scale is clamped to the default mimumim scale");
+ is(info.minZoom, 0.25, "minimum scale defaults to the absolute minimum");
+ is(info.maxZoom, 10, "maximum scale defaults to the absolute maximum");
+ is(info.width, 980, "width should be 980");
+ is(info.height,588, "height is proportional to displayHeight");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_change_name.html b/dom/base/test/meta_viewport/test_meta_viewport_change_name.html
new file mode 100644
index 0000000000..84b9c321df
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_change_name.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>name attribute changes</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta id="viewport" name="initial-name" content="width=device-width, initial-scale=1">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function change_name_attribute() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ // There is no valid <meta name="viewport"> so that viewport info values
+ // are the same as values in test_meta_viewport0.html.
+ is(info.defaultZoom, 0.25, "initial scale is clamped to the default mimumim scale");
+ is(info.minZoom, 0.25, "minimum scale defaults to the absolute minimum");
+ is(info.maxZoom, 10, "maximum scale defaults to the absolute maximum");
+ is(info.width, 980, "width is the default width");
+ is(info.height, 588, "height is proportional to displayHeight");
+ is(info.autoSize, false, "autoSize is disabled by default");
+ is(info.allowZoom, true, "zooming is enabled by default");
+
+ // Now it's a valid viewport.
+ // eslint-disable-next-line no-undef
+ viewport.setAttribute("name", "viewport");
+ info = getViewportInfo(800, 480);
+ is(info.defaultZoom, 1, "initial zoom is 1");
+ is(info.width, 800, "width should be 800");
+ is(info.height, 480, "height should be 480");
+
+ // Now it's invalid again, but we retain the state.
+ // eslint-disable-next-line no-undef
+ viewport.setAttribute("name", "other");
+ info = getViewportInfo(800, 480);
+ is(info.defaultZoom, 1, "initial zoom is 1");
+ is(info.width, 800, "width should be 800");
+ is(info.height, 480, "height should be 480");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_change_name_among_multiple.html b/dom/base/test/meta_viewport/test_meta_viewport_change_name_among_multiple.html
new file mode 100644
index 0000000000..ca41577bbe
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_change_name_among_multiple.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>name attribute changes among multiple meta viewport tags</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=980">
+ <meta id="viewport" name="initial-name" content="width=device-width, initial-scale=1">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <script>
+ "use strict";
+
+ add_task(async function change_name_attribute() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+ let viewport = document.getElementById("viewport");
+
+ let info = getViewportInfo(800, 480);
+ // The "width=980" content is a valid one.
+ fuzzeq(info.defaultZoom, 800/980, "initial scale is calculated based on width");
+ is(info.minZoom, 0.25, "minimum scale defaults to the absolute minimum");
+ is(info.maxZoom, 10, "maximum scale defaults to the absolute maximum");
+ is(info.width, 980, "width is the default width");
+ is(info.height, 588, "height is proportional to displayHeight");
+
+ // Now the second meta tag is a valid viewport.
+ viewport.setAttribute("name", "viewport");
+ info = getViewportInfo(800, 480);
+ is(info.defaultZoom, 1, "initial zoom is 1");
+ is(info.width, 800, "width should be 800");
+ is(info.height, 480, "height should be 480");
+
+ // Now it's invalid again, but it's retained.
+ viewport.setAttribute("name", "other");
+ info = getViewportInfo(800, 480);
+ is(info.defaultZoom, 1, "initial zoom is 1");
+ is(info.width, 800, "width should be 800");
+ is(info.height, 480, "height should be 480");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_device_width.html b/dom/base/test/meta_viewport/test_meta_viewport_device_width.html
new file mode 100644
index 0000000000..0e1f2f1dac
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_device_width.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>device-width in meta viewport</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=device-width">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>width=device-width</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function device_width() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ is(info.width, 800, "width should be 800");
+ is(info.height, 480, "height should be 480");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_device_width_with_initial_scale_0_5.html b/dom/base/test/meta_viewport/test_meta_viewport_device_width_with_initial_scale_0_5.html
new file mode 100644
index 0000000000..fc3192c854
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_device_width_with_initial_scale_0_5.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>device-width with initial-scale=0.5 in meta viewport</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=device-width, initial-scale=0.5">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>width=device-width, initial-scale=0.5</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function device_width_with_initial_scale_0_5() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ is(info.width, 1600, "width should be the display width / initial-scale");
+ is(info.height, 960, "height should be the display height / initial-scale");
+ is(info.defaultZoom, 0.5, "initial-scale should be 0.5");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_device_width_with_initial_scale_2.html b/dom/base/test/meta_viewport/test_meta_viewport_device_width_with_initial_scale_2.html
new file mode 100644
index 0000000000..e701266e60
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_device_width_with_initial_scale_2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>device-width with initial-scale=2 in meta viewport</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=device-width, initial-scale=2">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>width=device-width, initial-scale=2</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function device_width_with_initial_scale_2() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ // In the case device is specified, max-width isn't 'extend-to-zoom', it's
+ // the display width, and if the initial-scale is greater than 1,
+ // min-width will be the same as max-width because extend-width will be
+ // less than the display width, thus the final width should be the display
+ // width.
+ is(info.width, 800, "width should be the display width");
+ is(info.height, 480, "height should be the display height");
+ is(info.defaultZoom, 2, "initial-scale should be 2");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_empty_content_and_valid_content_tags.html b/dom/base/test/meta_viewport/test_meta_viewport_empty_content_and_valid_content_tags.html
new file mode 100644
index 0000000000..6de2e08c40
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_empty_content_and_valid_content_tags.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>a valid meta viewport tag and empty content attribute viewport tag</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=400">
+ <meta name="viewport" content="">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function multiple_viewport_tags() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ // The empty content attribute meta tag should be valid, which means
+ // it supersedes the first `width=400`.
+ is(info.width, 980, "width should be default, 980");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_fit.html b/dom/base/test/meta_viewport/test_meta_viewport_fit.html
new file mode 100644
index 0000000000..e86ad817d6
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_fit.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>meta viewport viewport-fit test</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="viewport-fit=cover">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>viewport-fit=cover</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function test1() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let viewportFit = SpecialPowers.getDOMWindowUtils(window).getViewportFitInfo();
+ is(viewportFit, "cover", "viewport-fit is cover correctly");
+
+ let elements = document.getElementsByTagName("meta");
+ for (let meta of elements) {
+ if (meta.getAttribute("name") == "viewport") {
+ meta.setAttribute("content", "viewport-fit=contain");
+ }
+ }
+
+ viewportFit = SpecialPowers.getDOMWindowUtils(window).getViewportFitInfo();
+ is(viewportFit, "contain", "viewport-fit is contain correctly");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_fit_multiple.html b/dom/base/test/meta_viewport/test_meta_viewport_fit_multiple.html
new file mode 100644
index 0000000000..e204bb70f6
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_fit_multiple.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>multiple meta viewport viewport-fit test</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="viewport-fit=cover">
+ <meta name="viewport" content="width=device-width">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>viewport-fit=cover</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function test1() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let viewportFit = SpecialPowers.getDOMWindowUtils(window).getViewportFitInfo();
+ is(viewportFit, "auto", "No viewport-fit in last meta viewport. So auto is applied");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_fixed_width_and_zero_display_width.html b/dom/base/test/meta_viewport/test_meta_viewport_fixed_width_and_zero_display_width.html
new file mode 100644
index 0000000000..e649ad9fcd
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_fixed_width_and_zero_display_width.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Fixed meta viewport width, zero display width</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=100">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>Fixed meta viewport width, zero display width</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function valid_width() {
+ // We choose a 2.5 scaleRatio here to make clear that the later check
+ // of the viewport height is getting a scaled value.
+ await SpecialPowers.pushPrefEnv(scaleRatio(2.5));
+
+ // We request a zero-width viewport because that triggers a special
+ // codepath that sets the viewport height to the scaled display height.
+ let info = getViewportInfo(0, 500);
+ is(info.width, 100, "width should be 100");
+ is(info.height, 200, "height should be 200, since 500 / 2.5 = 200");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_initial_scale_0_5.html b/dom/base/test/meta_viewport/test_meta_viewport_initial_scale_0_5.html
new file mode 100644
index 0000000000..99fb5c1d36
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_initial_scale_0_5.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>initial-scale=0.5 in meta viewport</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="initial-scale=0.5">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>initial-scale=0.5</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function initial_scale_0_5() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ // 'min-width' is 'display width / initial-scale', thus the value will be
+ // bigger than the display width in the case where the initial-scale is
+ // less than 1, thus the final viewport width will be the 'min-width'.
+ // See 'Resolve initial width and height from min/max descriptors' section
+ // in the spec for more detail.
+ // height is calculated by the same rule.
+ // https://drafts.csswg.org/css-device-adapt/#resolve-initial-width-height
+ is(info.width, 1600, "width should be scaled by 1 / initial-scale");
+ is(info.height, 960, "height should be scaled by 1 / initial-scale");
+ is(info.defaultZoom, 0.5, "initial-scale should be 0.5");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_initial_scale_2.html b/dom/base/test/meta_viewport/test_meta_viewport_initial_scale_2.html
new file mode 100644
index 0000000000..22f0adc061
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_initial_scale_2.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>initial-scale=2 in meta viewport</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="initial-scale=2">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>initial-scale=2</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function initial_scale_2() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ is(info.width, 400, "width should be scaled by 1 / initial-scale");
+ is(info.height, 240, "height should be scaled by 1 / initial-scale");
+ is(info.defaultZoom, 2, "initial-scale should be 2");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_initial_scale_with_trailing_characters.html b/dom/base/test/meta_viewport/test_meta_viewport_initial_scale_with_trailing_characters.html
new file mode 100644
index 0000000000..5939691cb5
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_initial_scale_with_trailing_characters.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>initial-scale with trailing characters in meta viewport</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="initial-scale=1.0/">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>initial-scale=1.0/</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function initial_scale_with_trailing_characters() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ is(info.width, 800, "width should be scaled by 1 / initial-scale");
+ is(info.height, 480, "height should be scaled by 1 / initial-scale");
+ is(info.defaultZoom, 1, "initial-scale should be 1");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_insert_before_existing_tag.html b/dom/base/test/meta_viewport/test_meta_viewport_insert_before_existing_tag.html
new file mode 100644
index 0000000000..e2162c81f8
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_insert_before_existing_tag.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>interting a meta viewport tag before existing one</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=980">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function multiple_viewport_tags() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ const meta = document.createElement("meta");
+ meta.setAttribute("name", "viewport");
+ meta.setAttribute("content", "initial-scale=1,maximum-scale=1");
+ document.head.insertBefore(meta, document.querySelector("meta[name=viewport]"));
+
+ let info = getViewportInfo(800, 480);
+ info = getViewportInfo(800, 480);
+ is(info.defaultZoom, 1, "initial zoom is 1");
+ is(info.width, 800, "width should be 800");
+ is(info.height, 480, "height should be 480");
+ is(info.maxZoom, 1, "maximum scale is 1");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_maximum_scale_0.html b/dom/base/test/meta_viewport/test_meta_viewport_maximum_scale_0.html
new file mode 100644
index 0000000000..893f3128d9
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_maximum_scale_0.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>meta viewport test</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=0">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>width=device-width, minimum-scale=1, maximum-scale=0</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function test1() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ is(info.maxZoom, 1, "maximum_scale should be clamped");
+ is(info.defaultZoom, 1, "initial scale should be 1");
+ is(info.minZoom, 1, "minimum scale should be 1");
+ is(info.width, 800, "width should be 800");
+ is(info.height, 480, "height should be 480");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_maximum_scale_0_5.html b/dom/base/test/meta_viewport/test_meta_viewport_maximum_scale_0_5.html
new file mode 100644
index 0000000000..7f17ef146e
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_maximum_scale_0_5.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>maximum-scale=0.5 in meta viewport</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="maximum-scale=0.5">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>maximum-scale=0.5</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function maximum_scale_0_5() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ // In the case where the maximum-scale is less than 1 and there is no
+ // initial-scale or initial-scale is NOT greater than the maximum-scale,
+ // 'min-width' will be bigger than the display width.
+ is(info.width, 1600, "width should be scaled by 1 / maximum-scale");
+ is(info.height, 960, "height should be scaled by 1 / maximum-scale");
+ is(info.maxZoom, 0.5, "maximum-scale should be 0.5");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_maximum_scale_2.html b/dom/base/test/meta_viewport/test_meta_viewport_maximum_scale_2.html
new file mode 100644
index 0000000000..2fe3baf27d
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_maximum_scale_2.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>maximum-scale=2 in meta viewport</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="maximum-scale=2">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>maximum-scale=2</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function maximum_scale_2() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ is(info.width, 980, "without specified width, we get default width");
+ is(info.height, 588, "without specified width, height is scaled in aspect ratio to default width");
+ is(info.maxZoom, 2, "maximum-scale should be 2");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_multiple_tags.html b/dom/base/test/meta_viewport/test_meta_viewport_multiple_tags.html
new file mode 100644
index 0000000000..816dd62061
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_multiple_tags.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>multilple meta viewport tags</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=980">
+ <meta name="viewport" content="initial-scale=1,maximum-scale=1">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function multiple_viewport_tags() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ info = getViewportInfo(800, 480);
+ is(info.defaultZoom, 1, "initial zoom is 1");
+ is(info.width, 800, "width should be 800");
+ is(info.height, 480, "height should be 480");
+ is(info.maxZoom, 1, "maximum scale is 1");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_negative_width_and_negative_height.html b/dom/base/test/meta_viewport/test_meta_viewport_negative_width_and_negative_height.html
new file mode 100644
index 0000000000..e458cbc8dd
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_negative_width_and_negative_height.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>negative width and height in meta viewport</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=-400, height=-240">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>width=-400, height=-240</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function negative_width_and_negative_height() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ // negative width and height should be ignored, then display width and
+ // height are used for viewport.
+ is(info.width, 800, "width should be the display width");
+ is(info.height, 480, "height should be the display height");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_negative_width_and_no_height.html b/dom/base/test/meta_viewport/test_meta_viewport_negative_width_and_no_height.html
new file mode 100644
index 0000000000..2369f3b4f3
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_negative_width_and_no_height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>negative width in meta viewport</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=-400">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>width=-400</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function negative_width() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ is(info.width, 800, "width should be 800");
+ is(info.height, 480, "height should be 480");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_negative_width_and_valid_height.html b/dom/base/test/meta_viewport/test_meta_viewport_negative_width_and_valid_height.html
new file mode 100644
index 0000000000..579712504d
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_negative_width_and_valid_height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>negative width and valid height in meta viewport</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=-300,height=240">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>width=-400, height=240</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function negative_width_and_valid_height() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ is(info.width, 980, "width should be default when specified width is invalid");
+ is(info.height, 240, "height should be 240");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_no_content_and_valid_content_tags.html b/dom/base/test/meta_viewport/test_meta_viewport_no_content_and_valid_content_tags.html
new file mode 100644
index 0000000000..f5a78d9eec
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_no_content_and_valid_content_tags.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>a valid meta viewport tag and no content attribute viewport tag</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=400">
+ <meta name="viewport">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function multiple_viewport_tags() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ // The no content attribute meta tag should be ignored.
+ is(info.width, 400, "width should be 400");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_no_width_and_negative_height.html b/dom/base/test/meta_viewport/test_meta_viewport_no_width_and_negative_height.html
new file mode 100644
index 0000000000..0e0d37812b
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_no_width_and_negative_height.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>negative height in meta viewport</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="height=-200">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>height=-200</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function negative_height() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ is(info.width, 980, "without specified width, we get default width");
+ is(info.height, 588, "without specified width, and invalid specified height, " +
+ "height is scaled in aspect ratio to default width");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_no_width_and_valid_height.html b/dom/base/test/meta_viewport/test_meta_viewport_no_width_and_valid_height.html
new file mode 100644
index 0000000000..a7be88ec40
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_no_width_and_valid_height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>valid height in meta viewport</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="height=240">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>height=240</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function valid_height() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ is(info.width, 980, "without specified width, we get default width");
+ is(info.height, 240, "height should be 240");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_remove_node.html b/dom/base/test/meta_viewport/test_meta_viewport_remove_node.html
new file mode 100644
index 0000000000..12104cdf50
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_remove_node.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>remove meta viewport node</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <script>
+ "use strict";
+
+ add_task(async function remove_viewport_node() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+ let viewport = document.getElementById("viewport");
+
+ let info = getViewportInfo(800, 480);
+ is(info.defaultZoom, 1, "initial zoom is 1");
+ is(info.width, 800, "width should be 800");
+ is(info.height, 480, "height should be 480");
+
+ // Now there is no <meta name="viewport">, but we still retain the info
+ // from the last one.
+ viewport.remove();
+ info = getViewportInfo(800, 480);
+ is(info.defaultZoom, 1, "initial zoom is 1");
+ is(info.width, 800, "width should be 800");
+ is(info.height, 480, "height should be 480");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_remove_node_from_multiple.html b/dom/base/test/meta_viewport/test_meta_viewport_remove_node_from_multiple.html
new file mode 100644
index 0000000000..b967967cc1
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_remove_node_from_multiple.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>remove a meta viewport node from multiple ones</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta id="willBeRemoved" name="viewport" content="width=980">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function remove_a_viewport_node() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+
+ // We use "width=980" for viewport stuff.
+ fuzzeq(info.defaultZoom, 800/980, "initial scale is calculated based on width");
+ is(info.minZoom, 0.25, "minimum scale defaults to the absolute minimum");
+ is(info.maxZoom, 10, "maximum scale defaults to the absolute maximum");
+ is(info.width, 980, "width is the default width");
+ is(info.height, 588, "height is proportional to displayHeight");
+ is(info.autoSize, false, "autoSize is disabled by default");
+ is(info.allowZoom, true, "zooming is enabled by default");
+
+ document.getElementById("willBeRemoved").remove();
+ info = getViewportInfo(800, 480);
+
+ // Now it was removed, but we remain the same.
+ fuzzeq(info.defaultZoom, 800/980, "initial scale is calculated based on width");
+ is(info.minZoom, 0.25, "minimum scale defaults to the absolute minimum");
+ is(info.maxZoom, 10, "maximum scale defaults to the absolute maximum");
+ is(info.width, 980, "width is the default width");
+ is(info.height, 588, "height is proportional to displayHeight");
+ is(info.autoSize, false, "autoSize is disabled by default");
+ is(info.allowZoom, true, "zooming is enabled by default");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_removing_content_attribute.html b/dom/base/test/meta_viewport/test_meta_viewport_removing_content_attribute.html
new file mode 100644
index 0000000000..784a503e9f
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_removing_content_attribute.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>removing content attribute</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=400">
+ <meta name="viewport" content="width=800">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <script>
+ "use strict";
+
+ add_task(async function multiple_viewport_tags() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ // The latter meta viewport tag is used.
+ is(info.width, 800, "width should be 800");
+
+ const secondMeta =
+ document.querySelector("meta[name=viewport][content='width=800']");
+ secondMeta.removeAttribute("content");
+
+ info = getViewportInfo(800, 480);
+ // The latter meta viewport tag is still used.
+ is(info.width, 800, "width should be 800");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_replace_content.html b/dom/base/test/meta_viewport/test_meta_viewport_replace_content.html
new file mode 100644
index 0000000000..202c62362b
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_replace_content.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>replace meta viewport content</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function replace_content() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ info = getViewportInfo(800, 480);
+ is(info.defaultZoom, 1, "initial zoom is 1");
+ is(info.width, 800, "width should be 800");
+ is(info.height, 480, "height should be 480");
+
+ // Now the content has only 'width=1080'.
+ // eslint-disable-next-line no-undef
+ viewport.setAttribute("content", "width=1080");
+ info = getViewportInfo(800, 480);
+
+ fuzzeq(info.defaultZoom, 800/1080, "initial scale is calculated by the given width");
+ is(info.minZoom, 0.25, "minimum scale defaults to the absolute minimum");
+ is(info.maxZoom, 10, "maximum scale defaults to the absolute maximum");
+ is(info.width, 1080, "width is the given width");
+ is(info.height, 480*1080/800, "height is proportional to displayHeight");
+ is(info.autoSize, false, "autoSize is disabled by default");
+ is(info.allowZoom, true, "zooming is enabled by default");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_tiny_display_size.html b/dom/base/test/meta_viewport/test_meta_viewport_tiny_display_size.html
new file mode 100644
index 0000000000..8e47fc677a
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_tiny_display_size.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>meta viewport test</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=device-width">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>width=device-width</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function test1() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ // Check that the minimum viewport dimension of (200,40) are not enforced
+ // in cases where the display size itself has a smaller dimension.
+ let info = getViewportInfo(192, 32);
+ is(info.defaultZoom, 1, "initial zoom is 100%");
+ is(info.width, 192, "width is the same as the displayWidth");
+ is(info.height, 32, "height is the same as the displayHeight");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_valid_width_and_negative_height.html b/dom/base/test/meta_viewport/test_meta_viewport_valid_width_and_negative_height.html
new file mode 100644
index 0000000000..10bce57d87
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_valid_width_and_negative_height.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>valid width and negative height in meta viewport</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=400, height=-200">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>width=400, height=-200</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function valid_width_and_negative_height() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ is(info.width, 400, "width should be 400");
+ is(info.height, 240, "height should be 240 which is the result of the " +
+ "display height * viewport width / display width");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_valid_width_and_no_height.html b/dom/base/test/meta_viewport/test_meta_viewport_valid_width_and_no_height.html
new file mode 100644
index 0000000000..b24ce680a7
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_valid_width_and_no_height.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>valid width in meta viewport</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=400">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>width=400</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function valid_width() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ is(info.width, 400, "width should be 400");
+ is(info.height, 240, "height should be 240 which is the result of the " +
+ "display height * viewport width / display width");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/test_meta_viewport_width_with_trailing_characters.html b/dom/base/test/meta_viewport/test_meta_viewport_width_with_trailing_characters.html
new file mode 100644
index 0000000000..f3545d057b
--- /dev/null
+++ b/dom/base/test/meta_viewport/test_meta_viewport_width_with_trailing_characters.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>width with trailing characters in meta viewport</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <meta name="viewport" content="width=400/">
+ <script src="viewport_helpers.js"></script>
+</head>
+<body>
+ <p>width=400/</p>
+ <script type="application/javascript">
+ "use strict";
+
+ add_task(async function width_with_trailing_characters() {
+ await SpecialPowers.pushPrefEnv(scaleRatio(1.0));
+
+ let info = getViewportInfo(800, 480);
+ is(info.width, 400, "width should be 400");
+ is(info.height, 240, "height should be 240 which is the result of the " +
+ "display height * viewport width / display width");
+ });
+ </script>
+</body>
+</html>
diff --git a/dom/base/test/meta_viewport/viewport_helpers.js b/dom/base/test/meta_viewport/viewport_helpers.js
new file mode 100644
index 0000000000..d4d346b5d0
--- /dev/null
+++ b/dom/base/test/meta_viewport/viewport_helpers.js
@@ -0,0 +1,44 @@
+function scaleRatio(scale) {
+ return {
+ set: [
+ ["layout.css.devPixelsPerPx", "" + scale],
+ ["dom.meta-viewport.enabled", true],
+ ],
+ };
+}
+
+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 fuzzeq(a, b, msg) {
+ ok(Math.abs(a - b) < 1e-6, msg);
+}