diff options
Diffstat (limited to '')
53 files changed, 1682 insertions, 0 deletions
diff --git a/dom/base/test/meta_viewport/mochitest.ini b/dom/base/test/meta_viewport/mochitest.ini new file mode 100644 index 0000000000..cfe63cc999 --- /dev/null +++ b/dom/base/test/meta_viewport/mochitest.ini @@ -0,0 +1,54 @@ +[DEFAULT] +support-files = + viewport_helpers.js + +[test_meta_viewport0.html] +[test_meta_viewport1.html] +[test_meta_viewport2.html] +[test_meta_viewport3.html] +[test_meta_viewport4.html] +[test_meta_viewport5.html] +[test_meta_viewport6.html] +[test_meta_viewport7.html] +[test_meta_viewport8.html] +[test_meta_viewport_auto_size_by_device_height.html] +[test_meta_viewport_auto_size_by_device_width.html] +[test_meta_viewport_auto_size_by_fixed_height_and_initial_scale_1.html] +[test_meta_viewport_auto_size_by_fixed_width_and_device_height.html] +[test_meta_viewport_auto_size_by_fixed_width_and_initial_scale_1.html] +[test_meta_viewport_auto_size_by_initial_scale_0_5.html] +[test_meta_viewport_auto_size_by_initial_scale_1.html] +[test_meta_viewport_auto_size_by_invalid_width.html] +[test_meta_viewport_auto_size_by_invalid_width_and_fixed_height.html] +[test_meta_viewport_change_content_among_multiple.html] +[test_meta_viewport_change_name.html] +[test_meta_viewport_change_name_among_multiple.html] +[test_meta_viewport_device_width.html] +[test_meta_viewport_device_width_with_initial_scale_0_5.html] +[test_meta_viewport_device_width_with_initial_scale_2.html] +[test_meta_viewport_fit.html] +[test_meta_viewport_fit_multiple.html] +[test_meta_viewport_fixed_width_and_zero_display_width.html] +[test_meta_viewport_initial_scale_0_5.html] +[test_meta_viewport_initial_scale_2.html] +[test_meta_viewport_insert_before_existing_tag.html] +[test_meta_viewport_maximum_scale_0.html] +[test_meta_viewport_maximum_scale_0_5.html] +[test_meta_viewport_maximum_scale_2.html] +[test_meta_viewport_multiple_tags.html] +[test_meta_viewport_negative_width_and_negative_height.html] +[test_meta_viewport_negative_width_and_no_height.html] +[test_meta_viewport_negative_width_and_valid_height.html] +[test_meta_viewport_valid_width_and_negative_height.html] +[test_meta_viewport_valid_width_and_no_height.html] +[test_meta_viewport_no_width_and_negative_height.html] +[test_meta_viewport_no_width_and_valid_height.html] +[test_meta_viewport_remove_node.html] +[test_meta_viewport_remove_node_from_multiple.html] +[test_meta_viewport_replace_content.html] +[test_meta_viewport_tiny_display_size.html] +[test_meta_viewport_initial_scale_with_trailing_characters.html] +[test_meta_viewport_width_with_trailing_characters.html] +[test_meta_viewport_empty_content_and_valid_content_tags.html] +[test_meta_viewport_no_content_and_valid_content_tags.html] +[test_meta_viewport_removing_content_attribute.html] diff --git a/dom/base/test/meta_viewport/moz.build b/dom/base/test/meta_viewport/moz.build new file mode 100644 index 0000000000..60b508c774 --- /dev/null +++ b/dom/base/test/meta_viewport/moz.build @@ -0,0 +1,9 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +MOCHITEST_MANIFESTS += [ + "mochitest.ini", +] diff --git a/dom/base/test/meta_viewport/test_meta_viewport0.html b/dom/base/test/meta_viewport/test_meta_viewport0.html new file mode 100644 index 0000000000..8fef72c578 --- /dev/null +++ b/dom/base/test/meta_viewport/test_meta_viewport0.html @@ -0,0 +1,41 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>meta viewport test</title> + <script src="/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> + <script src="viewport_helpers.js"></script> +</head> +<body> + <p>No <meta name="viewport"> 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); +} |