Bug 1494422 - Test cases for viewport calculation. r=botond
authorHiroyuki Ikezoe <hikezoe@mozilla.com>
Fri, 19 Oct 2018 22:11:24 +0000
changeset 490558 d94fc104be3b3cc4d0d9b08678648863932ca269
parent 490557 a7172b2e62e0cdcf7c492c06b21f08be13d093b4
child 490559 dc549720ed1f4da047add507439c3b17cc4b6d38
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewersbotond
bugs1494422
milestone64.0a1
Bug 1494422 - Test cases for viewport calculation. r=botond Depends on D8690 Differential Revision: https://phabricator.services.mozilla.com/D8691
dom/base/test/mochitest.ini
dom/base/test/test_meta_viewport_device_width.html
dom/base/test/test_meta_viewport_device_width_with_initial_scale_0_5.html
dom/base/test/test_meta_viewport_device_width_with_initial_scale_2.html
dom/base/test/test_meta_viewport_initial_scale_0_5.html
dom/base/test/test_meta_viewport_initial_scale_2.html
dom/base/test/test_meta_viewport_maximum_scale_0_5.html
dom/base/test/test_meta_viewport_maximum_scale_2.html
dom/base/test/test_meta_viewport_negative_width_and_negative_height.html
dom/base/test/test_meta_viewport_negative_width_and_no_height.html
dom/base/test/test_meta_viewport_negative_width_and_valid_height.html
dom/base/test/test_meta_viewport_no_width_and_negative_height.html
dom/base/test/test_meta_viewport_no_width_and_valid_height.html
dom/base/test/test_meta_viewport_valid_width_and_negative_height.html
dom/base/test/test_meta_viewport_valid_width_and_no_height.html
--- a/dom/base/test/mochitest.ini
+++ b/dom/base/test/mochitest.ini
@@ -687,17 +687,31 @@ skip-if = !e10s # Track Bug 1281415
 [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_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_initial_scale_0_5.html]
+[test_meta_viewport_initial_scale_2.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_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_mozbrowser_apis_blocked.html]
 [test_mozMatchesSelector.html]
 [test_mutationobserver_anonymous.html]
 [test_mutationobservers.html]
 [test_named_frames.html]
 [test_navigator_hardwareConcurrency.html]
 [test_navigator_language.html]
 [test_navigatorPrefOverride.html]
new file mode 100644
--- /dev/null
+++ b/dom/base/test/test_meta_viewport_device_width.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>device-width in meta viewport</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="/tests/SimpleTest/AddTask.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>
new file mode 100644
--- /dev/null
+++ b/dom/base/test/test_meta_viewport_device_width_with_initial_scale_0_5.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>device-width with initial-scale=0.5 in meta viewport</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="/tests/SimpleTest/AddTask.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>
new file mode 100644
--- /dev/null
+++ b/dom/base/test/test_meta_viewport_device_width_with_initial_scale_2.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>device-width with initial-scale=2 in meta viewport</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="/tests/SimpleTest/AddTask.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>
new file mode 100644
--- /dev/null
+++ b/dom/base/test/test_meta_viewport_initial_scale_0_5.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>initial-scale=0.5 in meta viewport</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="/tests/SimpleTest/AddTask.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>
new file mode 100644
--- /dev/null
+++ b/dom/base/test/test_meta_viewport_initial_scale_2.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>initial-scale=2 in meta viewport</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="/tests/SimpleTest/AddTask.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>
new file mode 100644
--- /dev/null
+++ b/dom/base/test/test_meta_viewport_maximum_scale_0_5.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>maximum-scale=0.5 in meta viewport</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="/tests/SimpleTest/AddTask.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>
new file mode 100644
--- /dev/null
+++ b/dom/base/test/test_meta_viewport_maximum_scale_2.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>maximum-scale=2 in meta viewport</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="/tests/SimpleTest/AddTask.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);
+      // FIXME: Bug 1500314
+      // As of revision: 067a1c08f91d, width and height are 980 and 588
+      // respectively, that's because we are using
+      // gfxPrefs::DesktopViewportWidth for the case where neither width nor
+      // height is specified in viewport meta and no initial-scale is specified.
+      // That's odd, it should be fixed.
+      //
+      // From 'Resolve width value' in
+      // https://drafts.csswg.org/css-device-adapt/#resolve-width
+      //
+      // 1. If width and height are both auto, set width = initial-width
+      // 2. Otherwise, if width is auto, set
+      //    width = height * (initial-width / initial-height), or
+      //    width = initial-width if initial-height is 0.
+      //
+      // In this test case 1 should be applied.
+      todo_is(info.width, 800, "width should be the display width");
+      todo_is(info.height, 480, "height should be the display height");
+      is(info.maxZoom, 2, "maximum-scale should be 2");
+    });
+  </script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/dom/base/test/test_meta_viewport_negative_width_and_negative_height.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>negative width and height in meta viewport</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="/tests/SimpleTest/AddTask.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>
new file mode 100644
--- /dev/null
+++ b/dom/base/test/test_meta_viewport_negative_width_and_no_height.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>negative width in meta viewport</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="/tests/SimpleTest/AddTask.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>
new file mode 100644
--- /dev/null
+++ b/dom/base/test/test_meta_viewport_negative_width_and_valid_height.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>negative width and valid height in meta viewport</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="/tests/SimpleTest/AddTask.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, 400, "width should be 400 which is the result of " +
+                          "display width * viewport height / display height");
+      is(info.height, 240, "height should be 240");
+    });
+  </script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/dom/base/test/test_meta_viewport_no_width_and_negative_height.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>negative height in meta viewport</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="/tests/SimpleTest/AddTask.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);
+      // See comments in test_meta_viewport_maximum_scale_2.html.
+      todo_is(info.width, 800, "width should be the display width");
+      todo_is(info.height, 480, "height should be the display height");
+    });
+  </script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/dom/base/test/test_meta_viewport_no_width_and_valid_height.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>valid height in meta viewport</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="/tests/SimpleTest/AddTask.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, 400, "width should be 400 which is the result of the " +
+                           "display width * viewport height / display height");
+      is(info.height, 240, "height should be 240");
+    });
+  </script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/dom/base/test/test_meta_viewport_valid_width_and_negative_height.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>valid width and negative height in meta viewport</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="/tests/SimpleTest/AddTask.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>
new file mode 100644
--- /dev/null
+++ b/dom/base/test/test_meta_viewport_valid_width_and_no_height.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>valid width in meta viewport</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="/tests/SimpleTest/AddTask.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>