Bug 561497 - Respect minimum-scale and maximum-scale viewport properties [r=mfinkle]

mobile/chrome/content/BrowserView.js

@@ -23,6 +23,7 @@
  * Contributor(s):
  *   Roy Frostig <rfrostig@mozilla.com>
  *   Stuart Parmenter <stuart@mozilla.com>
+ *   Matt Brubeck <mbrubeck@mozilla.com>
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -616,8 +617,12 @@ BrowserView.prototype = {
       pageZoom = 1;
 
     let metaData = Util.getViewportMetadata(browser);
+    if (metaData.minScale)
+      pageZoom = Math.max(metaData.minScale, pageZoom);
+    if (metaData.maxScale)
+      pageZoom = Math.min(metaData.maxScale, pageZoom);
     if (metaData.scale)
-      return Math.max(metaData.scale, pageZoom);
+      pageZoom = Math.max(metaData.scale, pageZoom);
 
     return pageZoom;
   },

mobile/chrome/content/Util.js

@@ -23,6 +23,7 @@
  * Contributor(s):
  *   Roy Frostig <rfrostig@mozilla.com>
  *   Ben Combee <bcombee@mozilla.com>
+ *   Matt Brubeck <mbrubeck@mozilla.com>
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -133,6 +134,8 @@ let Util = {
     // http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
     
     let viewportScale = parseFloat(windowUtils.getDocumentMetadata("viewport-initial-scale"));
+    let viewportMinScale = parseFloat(windowUtils.getDocumentMetadata("viewport-minimum-scale"));
+    let viewportMaxScale = parseFloat(windowUtils.getDocumentMetadata("viewport-maximum-scale"));
     let viewportWidthStr = windowUtils.getDocumentMetadata("viewport-width");
     let viewportHeightStr = windowUtils.getDocumentMetadata("viewport-height");
 
@@ -144,20 +147,22 @@ let Util = {
     let viewportHeight = viewportHeightStr == "device-height" ? window.innerHeight : parseInt(viewportHeightStr);
  
     // If (scale * width) < device-width, increase the width (bug 561413).
-    let maxInitialScale = viewportScale;
+    let maxInitialScale = viewportScale || viewportMaxScale;
     if (maxInitialScale && viewportWidth)
       viewportWidth = Math.max(viewportWidth, window.innerWidth / maxInitialScale);
 
-    if (viewportScale > 0 || viewportWidth > 0 || viewportHeight > 0) {
+    if (viewportScale > 0 || viewportWidth > 0 || viewportHeight > 0 || viewportMinScale > 0 || viewportMaxScale > 0) {
       return {
         reason: "viewport",
         result: true,
         scale: viewportScale,
+        minScale: viewportMinScale,
+        maxScale: viewportMaxScale,
         width: viewportWidth,
         height: viewportHeight,
         autoSize: viewportWidthStr == "device-width" || viewportHeightStr == "device-height",
         allowZoom: windowUtils.getDocumentMetadata("viewport-user-scalable") != "no"
-      }
+      };
     }
 
     return { reason: "", result: false, allowZoom: true };

mobile/chrome/tests/Makefile.in

@@ -59,8 +59,14 @@ _BROWSER_FILES = \
   browser_blank_02.html \
   browser_select.html \
   browser_FormAssistant.html \
+  browser_viewport_00.html \
   browser_viewport_01.html \
   browser_viewport_02.html \
+  browser_viewport_03.html \
+  browser_viewport_04.html \
+  browser_viewport_05.html \
+  browser_viewport_06.html \
+  browser_viewport_07.html \
   $(NULL)
 
 libs:: $(_BROWSER_FILES)

mobile/chrome/tests/browser_viewport.js

@@ -1,8 +1,63 @@
+// -*- Mode: js2; tab-width: 2; indent-tabs-mode: nil; js2-basic-offset: 2; js2-skip-preprocessor-directives: t; -*-
+/*
+ * ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is Mozilla Mobile Browser.
+ *
+ * The Initial Developer of the Original Code is
+ * Mozilla Corporation.
+ * Portions created by the Initial Developer are Copyright (C) 2008
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Mark Finkle <mfinkle@mozilla.com>
+ *   Matt Brubeck <mbrubeck@mozilla.com>
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+
 let testURL_blank = "chrome://mochikit/content/browser/mobile/chrome/browser_blank_01.html";
-let testURL_vport_01 = "chrome://mochikit/content/browser/mobile/chrome/browser_viewport_01.html";
-let testURL_vport_02 = "chrome://mochikit/content/browser/mobile/chrome/browser_viewport_02.html";
+let testURL = function testURL(n) {
+  return "chrome://mochikit/content/browser/mobile/chrome/browser_viewport_" +
+         (n<10 ? "0" : "") + n + ".html";
+}
+let deviceWidth = {};
 
 let working_tab;
+let isLoading = function() { return !working_tab.isLoading(); };
+
+let testData = [
+  { width: undefined,   scale: undefined },
+  { width: deviceWidth, scale: 1 },
+  { width: 320,         scale: 1 },
+  { width: undefined,   scale: 1 },
+  { width: 200,         scale: undefined },
+  { width: 2000,        minScale: 0.75 },
+  { width: 100,         maxScale: 2 }
+];
 
 //------------------------------------------------------------------------------
 // Entry point (must be named "test")
@@ -10,105 +65,76 @@ function test() {
   // This test is async
   waitForExplicitFinish();
 
-  // Add new tab
-  working_tab = Browser.addTab(testURL_blank, true);
+  working_tab = Browser.addTab("", true);
   ok(working_tab, "Tab Opened");
-
-  // Check viewport load (need to check the tab "loading", not the document "loading")
-  waitFor(load_first_blank, function() { return working_tab.isLoading() == false; });
+  startTest(0);
 }
 
-function load_first_blank() {
-  // Do sanity tests
-  var uri = working_tab.browser.currentURI.spec;
-  is(uri, testURL_blank, "URL Matches newly created Tab");
-
-  // Check viewport settings
-  ok(working_tab.browser.classList.contains("browser"), "Normal 'browser' class");
-  let style = window.getComputedStyle(working_tab.browser, null);
-  is(style.width, "800px", "Normal 'browser' width is 800 pixels");
-
-  // Load device-width page
-  BrowserUI.goToURI(testURL_vport_01);
-
-  // Check viewport load (need to check the tab "loading", not the document "loading")
-  waitFor(load_first_viewport, function() { return working_tab.isLoading() == false; });
-}
-
-function load_first_viewport() {
-  // Do sanity tests
-  var uri = working_tab.browser.currentURI.spec;
-  is(uri, testURL_vport_01, "URL Matches newly created Tab");
-
-  // Check viewport settings
-  ok(working_tab.browser.classList.contains("browser-viewport"), "Viewport 'browser-viewport' class");
-  let style = window.getComputedStyle(working_tab.browser, null);
-  is(style.width, window.innerWidth + "px", "Viewport device-width is equal to window.innerWidth");
-
-  is(Browser._browserView.getZoomLevel(), 1, "Viewport scale=1");
-
-  // Load device-width page
+function startTest(n) {
   BrowserUI.goToURI(testURL_blank);
-
-  // Check viewport load (need to check the tab "loading", not the document "loading")
-  waitFor(load_second_blank, function() { return working_tab.isLoading() == false; });
+  waitFor(verifyBlank(n), isLoading);
 }
 
-function load_second_blank() {
+function verifyBlank(n) {
+  return function() {
     // Do sanity tests
     var uri = working_tab.browser.currentURI.spec;
-  is(uri, testURL_blank, "URL Matches newly created Tab");
+    is(uri, testURL_blank, "URL Matches newly created Tab "+n);
 
     // Check viewport settings
     ok(working_tab.browser.classList.contains("browser"), "Normal 'browser' class");
     let style = window.getComputedStyle(working_tab.browser, null);
     is(style.width, "800px", "Normal 'browser' width is 800 pixels");
 
-  // Load width fixed page
-  BrowserUI.goToURI(testURL_vport_02);
-
-  // Check viewport load (need to check the tab "loading", not the document "loading")
-  waitFor(load_second_viewport, function() { return working_tab.isLoading() == false; });
+    loadTest(n);
+  }
 }
 
-function load_second_viewport() {
+function loadTest(n) {
+  BrowserUI.goToURI(testURL(n));
+  waitFor(verifyTest(n), isLoading);
+}
+
+function verifyTest(n) {
+  return function() {
+    let data = testData[n];
+
     // Do sanity tests
     var uri = working_tab.browser.currentURI.spec;
-  is(uri, testURL_vport_02, "URL Matches newly created Tab");
+    is(uri, testURL(n), "URL Matches newly created Tab "+n);
 
     // Check viewport settings
+    let width = data.width || (data.scale ? window.innerWidth : 800);
+    if (width == deviceWidth) {
+      width = window.innerWidth;
       ok(working_tab.browser.classList.contains("browser-viewport"), "Viewport 'browser-viewport' class");
-  let style = window.getComputedStyle(working_tab.browser, null);
-  let expectedWidth = Math.max(320, window.innerWidth);
-  is(style.width, expectedWidth+"px", "Viewport width is at least 320"); // Bug 561413
-
-  is(Browser._browserView.getZoomLevel(), 1, "Viewport scale=1");
-
-  // Load device-width page
-  BrowserUI.goToURI(testURL_blank);
-
-  // Check viewport load (need to check the tab "loading", not the document "loading")
-  waitFor(load_third_blank, function() { return working_tab.isLoading() == false; });
     }
 
-function load_third_blank() {
-  // Do sanity tests
-  var uri = working_tab.browser.currentURI.spec;
-  is(uri, testURL_blank, "URL Matches newly created Tab");
+    let scale = data.scale || window.innerWidth / width;
+    let minScale = data.minScale || 0.2;
+    let maxScale = data.maxScale || 4;
+
+    scale = Math.min(scale, maxScale);
+    scale = Math.max(scale, minScale);
+
+    // Width at initial scale can't be less than screen width (Bug 561413).
+    if (width * scale < window.innerWidth)
+      width = window.innerWidth / scale;
 
-  // Check viewport settings
-  ok(working_tab.browser.classList.contains("browser"), "Normal 'browser' class");
     let style = window.getComputedStyle(working_tab.browser, null);
-  is(style.width, "800px", "Normal 'browser' width is 800 pixels");
+    is(style.width, width + "px", "Viewport width="+width);
 
-  // Close down the test
-  test_close();
+    is(Browser._browserView.getZoomLevel(), scale, "Viewport scale="+scale);
+
+    finishTest(n);
+  }
 }
 
-function test_close() {
-  // Close the tab
+function finishTest(n) {
+  if (n+1 < testData.length) {
+    startTest(n+1);
+  } else {
     Browser.closeTab(working_tab);
-
-  // We must finialize the tests
     finish();
   }
+}

mobile/chrome/tests/browser_viewport_00.html

@@ -0,0 +1,10 @@
+<html>
+<head>
+    <title>Browser Viewport Page 00</title>
+    <meta name="viewport" content=""/>
+</head>
+<body>
+    <p>Browser Viewport Page 00</p>
+    <p>default width, default initial-scale</p>
+</body>
+</html>

mobile/chrome/tests/browser_viewport_02.html

@@ -5,6 +5,6 @@
 </head>
 <body>
     <p>Browser Viewport Page 02</p>
-    <p>width=320</p>
+    <p>width=320, initial-scale=1</p>
 </body>
 </html>

mobile/chrome/tests/browser_viewport_03.html

@@ -0,0 +1,10 @@
+<html>
+<head>
+    <title>Browser Viewport Page 03</title>
+    <meta name="viewport" content="initial-scale=1.0"/>
+</head>
+<body>
+    <p>Browser Viewport Page 03</p>
+    <p>default width, initial-scale=1.0</p>
+</body>
+</html>

mobile/chrome/tests/browser_viewport_04.html

@@ -0,0 +1,10 @@
+<html>
+<head>
+    <title>Browser Viewport Page 04</title>
+    <meta name="viewport" content="width=200"/>
+</head>
+<body>
+    <p>Browser Viewport Page 04</p>
+    <p>width=200, default initial-scale</p>
+</body>
+</html>

mobile/chrome/tests/browser_viewport_05.html

@@ -0,0 +1,10 @@
+<html>
+<head>
+    <title>Browser Viewport Page 05</title>
+    <meta name="viewport" content="width=2000, minimum-scale=0.75"/>
+</head>
+<body>
+    <p>Browser Viewport Page 05</p>
+    <p>width=2000, minimum-scale=0.75</p>
+</body>
+</html>

mobile/chrome/tests/browser_viewport_06.html

@@ -0,0 +1,11 @@
+<html>
+<head>
+    <title>Browser Viewport Page 06</title>
+    <meta name="viewport" content="width=100, maximum-scale=2.0"/>
+</head>
+<body>
+    <p>Browser Viewport Page 06</p>
+    <p>width=100, maximum-scale=2.0</p>
+</body>
+</html>
+

mobile/chrome/tests/browser_viewport_07.html

@@ -0,0 +1,11 @@
+<html>
+<head>
+    <title>Browser Viewport Page 07</title>
+    <meta name="viewport" content="width=2000, initial-scale=0.75"/>
+</head>
+<body>
+    <p>Browser Viewport Page 07</p>
+    <p>width=2000, initial-scale=0.75</p>
+</body>
+</html>
+