From 36d22d82aa202bb199967e9512281e9a53db42c9 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 21:33:14 +0200
Subject: Adding upstream version 115.7.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 dom/base/test/meta_viewport/mochitest.ini          | 54 ++++++++++++++++
 dom/base/test/meta_viewport/moz.build              |  9 +++
 .../test/meta_viewport/test_meta_viewport0.html    | 41 +++++++++++++
 .../test/meta_viewport/test_meta_viewport1.html    | 41 +++++++++++++
 .../test/meta_viewport/test_meta_viewport2.html    | 41 +++++++++++++
 .../test/meta_viewport/test_meta_viewport3.html    | 43 +++++++++++++
 .../test/meta_viewport/test_meta_viewport4.html    | 42 +++++++++++++
 .../test/meta_viewport/test_meta_viewport5.html    | 24 ++++++++
 .../test/meta_viewport/test_meta_viewport6.html    | 47 ++++++++++++++
 .../test/meta_viewport/test_meta_viewport7.html    | 71 ++++++++++++++++++++++
 .../test/meta_viewport/test_meta_viewport8.html    | 27 ++++++++
 ...t_meta_viewport_auto_size_by_device_height.html | 24 ++++++++
 ...st_meta_viewport_auto_size_by_device_width.html | 24 ++++++++
 ...o_size_by_fixed_height_and_initial_scale_1.html | 25 ++++++++
 ...auto_size_by_fixed_width_and_device_height.html | 25 ++++++++
 ...to_size_by_fixed_width_and_initial_scale_1.html | 25 ++++++++
 ...ta_viewport_auto_size_by_initial_scale_0_5.html | 25 ++++++++
 ...meta_viewport_auto_size_by_initial_scale_1.html | 25 ++++++++
 ...t_meta_viewport_auto_size_by_invalid_width.html | 24 ++++++++
 ...uto_size_by_invalid_width_and_fixed_height.html | 25 ++++++++
 ...eta_viewport_change_content_among_multiple.html | 52 ++++++++++++++++
 .../test_meta_viewport_change_name.html            | 47 ++++++++++++++
 ...t_meta_viewport_change_name_among_multiple.html | 44 ++++++++++++++
 .../test_meta_viewport_device_width.html           | 25 ++++++++
 ...ewport_device_width_with_initial_scale_0_5.html | 26 ++++++++
 ...viewport_device_width_with_initial_scale_2.html | 31 ++++++++++
 ...wport_empty_content_and_valid_content_tags.html | 26 ++++++++
 .../test/meta_viewport/test_meta_viewport_fit.html | 34 +++++++++++
 .../test_meta_viewport_fit_multiple.html           | 25 ++++++++
 ...iewport_fixed_width_and_zero_display_width.html | 29 +++++++++
 .../test_meta_viewport_initial_scale_0_5.html      | 33 ++++++++++
 .../test_meta_viewport_initial_scale_2.html        | 26 ++++++++
 ...ort_initial_scale_with_trailing_characters.html | 26 ++++++++
 ...t_meta_viewport_insert_before_existing_tag.html | 32 ++++++++++
 .../test_meta_viewport_maximum_scale_0.html        | 28 +++++++++
 .../test_meta_viewport_maximum_scale_0_5.html      | 29 +++++++++
 .../test_meta_viewport_maximum_scale_2.html        | 26 ++++++++
 .../test_meta_viewport_multiple_tags.html          | 28 +++++++++
 ...iewport_negative_width_and_negative_height.html | 27 ++++++++
 ...meta_viewport_negative_width_and_no_height.html | 25 ++++++++
 ...a_viewport_negative_width_and_valid_height.html | 25 ++++++++
 ...viewport_no_content_and_valid_content_tags.html | 25 ++++++++
 ...meta_viewport_no_width_and_negative_height.html | 26 ++++++++
 ...st_meta_viewport_no_width_and_valid_height.html | 25 ++++++++
 .../test_meta_viewport_remove_node.html            | 34 +++++++++++
 ...st_meta_viewport_remove_node_from_multiple.html | 44 ++++++++++++++
 ...t_meta_viewport_removing_content_attribute.html | 33 ++++++++++
 .../test_meta_viewport_replace_content.html        | 39 ++++++++++++
 .../test_meta_viewport_tiny_display_size.html      | 28 +++++++++
 ...a_viewport_valid_width_and_negative_height.html | 26 ++++++++
 ...st_meta_viewport_valid_width_and_no_height.html | 26 ++++++++
 ...ta_viewport_width_with_trailing_characters.html | 26 ++++++++
 dom/base/test/meta_viewport/viewport_helpers.js    | 44 ++++++++++++++
 53 files changed, 1682 insertions(+)
 create mode 100644 dom/base/test/meta_viewport/mochitest.ini
 create mode 100644 dom/base/test/meta_viewport/moz.build
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport0.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport1.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport2.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport3.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport4.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport5.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport6.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport7.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport8.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_device_height.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_device_width.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_fixed_height_and_initial_scale_1.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_fixed_width_and_device_height.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_fixed_width_and_initial_scale_1.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_initial_scale_0_5.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_initial_scale_1.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_invalid_width.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_auto_size_by_invalid_width_and_fixed_height.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_change_content_among_multiple.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_change_name.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_change_name_among_multiple.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_device_width.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_device_width_with_initial_scale_0_5.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_device_width_with_initial_scale_2.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_empty_content_and_valid_content_tags.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_fit.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_fit_multiple.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_fixed_width_and_zero_display_width.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_initial_scale_0_5.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_initial_scale_2.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_initial_scale_with_trailing_characters.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_insert_before_existing_tag.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_maximum_scale_0.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_maximum_scale_0_5.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_maximum_scale_2.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_multiple_tags.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_negative_width_and_negative_height.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_negative_width_and_no_height.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_negative_width_and_valid_height.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_no_content_and_valid_content_tags.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_no_width_and_negative_height.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_no_width_and_valid_height.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_remove_node.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_remove_node_from_multiple.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_removing_content_attribute.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_replace_content.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_tiny_display_size.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_valid_width_and_negative_height.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_valid_width_and_no_height.html
 create mode 100644 dom/base/test/meta_viewport/test_meta_viewport_width_with_trailing_characters.html
 create mode 100644 dom/base/test/meta_viewport/viewport_helpers.js

(limited to 'dom/base/test/meta_viewport')

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);
+}
-- 
cgit v1.2.3