Title: [135728] trunk
Revision
135728
Author
commit-qu...@webkit.org
Date
2012-11-26 08:22:31 -0800 (Mon, 26 Nov 2012)

Log Message

Viewport CSS rules should not clamp values like Viewport META
https://bugs.webkit.org/show_bug.cgi?id=103068

Patch by Thiago Marcos P. Santos <thiago.san...@intel.com> on 2012-11-26
Reviewed by Kenneth Rohde Christiansen.

Source/WebCore:

CSS Device Adaption does not clamp the length and zoom values the
same way as the Viewport META. In fact, they are not clamped at all,
but instead, we just make sure that length values are at least 1px.

Tests: css3/device-adapt/opera/constrain-018.xhtml
       css3/device-adapt/opera/constrain-019.xhtml
       css3/device-adapt/opera/constrain-023.xhtml
       css3/device-adapt/opera/constrain-024.xhtml

* dom/ViewportArguments.cpp:
(WebCore::ViewportArguments::resolve):

LayoutTests:

Imported Opera tests that makes sure we are doing the clamping right.

* css3/device-adapt/opera/constrain-018-expected.txt: Added.
* css3/device-adapt/opera/constrain-018.xhtml: Added.
* css3/device-adapt/opera/constrain-019-expected.txt: Added.
* css3/device-adapt/opera/constrain-019.xhtml: Added.
* css3/device-adapt/opera/constrain-023-expected.txt: Added.
* css3/device-adapt/opera/constrain-023.xhtml: Added.
* css3/device-adapt/opera/constrain-024-expected.txt: Added.
* css3/device-adapt/opera/constrain-024.xhtml: Added.

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (135727 => 135728)


--- trunk/LayoutTests/ChangeLog	2012-11-26 16:12:47 UTC (rev 135727)
+++ trunk/LayoutTests/ChangeLog	2012-11-26 16:22:31 UTC (rev 135728)
@@ -1,3 +1,21 @@
+2012-11-26  Thiago Marcos P. Santos  <thiago.san...@intel.com>
+
+        Viewport CSS rules should not clamp values like Viewport META
+        https://bugs.webkit.org/show_bug.cgi?id=103068
+
+        Reviewed by Kenneth Rohde Christiansen.
+
+        Imported Opera tests that makes sure we are doing the clamping right.
+
+        * css3/device-adapt/opera/constrain-018-expected.txt: Added.
+        * css3/device-adapt/opera/constrain-018.xhtml: Added.
+        * css3/device-adapt/opera/constrain-019-expected.txt: Added.
+        * css3/device-adapt/opera/constrain-019.xhtml: Added.
+        * css3/device-adapt/opera/constrain-023-expected.txt: Added.
+        * css3/device-adapt/opera/constrain-023.xhtml: Added.
+        * css3/device-adapt/opera/constrain-024-expected.txt: Added.
+        * css3/device-adapt/opera/constrain-024.xhtml: Added.
+
 2012-11-26  Robert Kroeger  <rjkro...@chromium.org>
 
         Unreviewed gardening: added TestExpecations failures for 

Added: trunk/LayoutTests/css3/device-adapt/opera/constrain-018-expected.txt (0 => 135728)


--- trunk/LayoutTests/css3/device-adapt/opera/constrain-018-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/css3/device-adapt/opera/constrain-018-expected.txt	2012-11-26 16:22:31 UTC (rev 135728)
@@ -0,0 +1,3 @@
+
+PASS CSS Test: @viewport constrained - Small non-auto height not affecting width. 
+

Added: trunk/LayoutTests/css3/device-adapt/opera/constrain-018.xhtml (0 => 135728)


--- trunk/LayoutTests/css3/device-adapt/opera/constrain-018.xhtml	                        (rev 0)
+++ trunk/LayoutTests/css3/device-adapt/opera/constrain-018.xhtml	2012-11-26 16:22:31 UTC (rev 135728)
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: @viewport constrained - Small non-auto height not affecting width.</title>
+  <link rel="author" title="Rune Lillesveen" href=""
+  <link rel="help" href=""
+  <meta name="flags" content="visual scroll dom" />
+  <meta name="assert" content="Non-auto height does not affect width if zoom is auto."/>
+  <script src="" type="text/_javascript_" />
+  <script src="" type="text/_javascript_" />
+  <style type="text/css"><![CDATA[
+   body { margin: 0; }
+   html, body, #test { width: 100%; height: 100%; }
+   #log { padding: 1em; display: none; }
+   /* Reset viewport values to initial values to ignore UA stylesheet. */
+   @-webkit-viewport {
+    width: auto;
+    height: auto;
+    zoom: auto;
+    min-zoom: auto;
+    max-zoom: auto;
+    user-zoom: zoom;
+    orientation: auto;
+    resolution: auto;
+   }
+  ]]></style>
+  <style type="text/css"><![CDATA[
+   /* CSS for the test below. */
+   @-webkit-viewport { height: 1px }
+   /* Set root element font-size to something different from the initial
+      font-size to make sure 'rem' and 'em' for @viewport is based on the
+      initial font-size, not the root element font-size. */
+   html { font-size: 2rem; }
+   body { font-size: 0.5rem; }
+  ]]></style>
+  <script type="text/_javascript_"><![CDATA[
+   var test = async_test("CSS Test: @viewport constrained - Small non-auto height not affecting width.");
+   window._onload_ = function(){
+
+    var testStyleSheet = document.styleSheets.item(1);
+
+    /* Disable the stylesheet that contains the @viewport to test. */
+    testStyleSheet.disabled = true;
+
+    /* Initialize an object to store viewport values to be used by the test
+       asserts. */
+    var viewport = new Object();
+
+    /* An element with the same size as the initial containing block. */
+    var testElm = document.getElementById("test");
+
+    /* Retrieve the initial viewport values before applying the @viewport to
+       test. */
+    viewport.initialWidth = testElm.offsetWidth;
+    viewport.initialHeight = testElm.offsetHeight;
+    viewport.fontSize = parseInt(getComputedStyle(testElm, "").fontSize);
+
+    /* Enable the stylesheet that contains the @viewport to test. */
+    testStyleSheet.disabled = false;
+
+    /* Retrieve the actual viewport values for the test. */
+    viewport.actualWidth = testElm.offsetWidth;
+    viewport.actualHeight = testElm.offsetHeight;
+    viewport.zoom = viewport.initialWidth / window.innerWidth;
+
+    /* Check viewport values. */
+    test.step(function(){
+        assert_equals(viewport.actualHeight, 1); assert_equals(viewport.actualWidth, viewport.initialWidth);
+    });
+
+    /* Finished. Show the results. */
+    test.done();
+    testStyleSheet.disabled = true;
+    document.getElementById("log").style.display = "block";
+   }
+  ]]></script>
+ </head>
+ <body>
+  <div id="test">
+   <div id="log"></div>
+  </div>
+ </body>
+</html>

Added: trunk/LayoutTests/css3/device-adapt/opera/constrain-019-expected.txt (0 => 135728)


--- trunk/LayoutTests/css3/device-adapt/opera/constrain-019-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/css3/device-adapt/opera/constrain-019-expected.txt	2012-11-26 16:22:31 UTC (rev 135728)
@@ -0,0 +1,3 @@
+
+PASS CSS Test: @viewport constrained - Auto width from height and non-auto zoom. 
+

Added: trunk/LayoutTests/css3/device-adapt/opera/constrain-019.xhtml (0 => 135728)


--- trunk/LayoutTests/css3/device-adapt/opera/constrain-019.xhtml	                        (rev 0)
+++ trunk/LayoutTests/css3/device-adapt/opera/constrain-019.xhtml	2012-11-26 16:22:31 UTC (rev 135728)
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: @viewport constrained - Auto width from height and non-auto zoom.</title>
+  <link rel="author" title="Rune Lillesveen" href=""
+  <link rel="help" href=""
+  <meta name="flags" content="visual scroll dom" />
+  <meta name="assert" content="Non-auto height affects width if zoom is not auto."/>
+  <script src="" type="text/_javascript_" />
+  <script src="" type="text/_javascript_" />
+  <style type="text/css"><![CDATA[
+   body { margin: 0; }
+   html, body, #test { width: 100%; height: 100%; }
+   #log { padding: 1em; display: none; }
+   /* Reset viewport values to initial values to ignore UA stylesheet. */
+   @-webkit-viewport {
+    width: auto;
+    height: auto;
+    zoom: auto;
+    min-zoom: auto;
+    max-zoom: auto;
+    user-zoom: zoom;
+    orientation: auto;
+    resolution: auto;
+   }
+  ]]></style>
+  <style type="text/css"><![CDATA[
+   /* CSS for the test below. */
+   @-webkit-viewport { height: 10000px; zoom: 100% }
+   /* Set root element font-size to something different from the initial
+      font-size to make sure 'rem' and 'em' for @viewport is based on the
+      initial font-size, not the root element font-size. */
+   html { font-size: 2rem; }
+   body { font-size: 0.5rem; }
+  ]]></style>
+  <script type="text/_javascript_"><![CDATA[
+   var test = async_test("CSS Test: @viewport constrained - Auto width from height and non-auto zoom.");
+   window._onload_ = function(){
+
+    var testStyleSheet = document.styleSheets.item(1);
+
+    /* Disable the stylesheet that contains the @viewport to test. */
+    testStyleSheet.disabled = true;
+
+    /* Initialize an object to store viewport values to be used by the test
+       asserts. */
+    var viewport = new Object();
+
+    /* An element with the same size as the initial containing block. */
+    var testElm = document.getElementById("test");
+
+    /* Retrieve the initial viewport values before applying the @viewport to
+       test. */
+    viewport.initialWidth = testElm.offsetWidth;
+    viewport.initialHeight = testElm.offsetHeight;
+    viewport.fontSize = parseInt(getComputedStyle(testElm, "").fontSize);
+
+    /* Enable the stylesheet that contains the @viewport to test. */
+    testStyleSheet.disabled = false;
+
+    /* Retrieve the actual viewport values for the test. */
+    viewport.actualWidth = testElm.offsetWidth;
+    viewport.actualHeight = testElm.offsetHeight;
+    viewport.zoom = viewport.initialWidth / window.innerWidth;
+
+    /* Check viewport values. */
+    test.step(function(){
+        assert_equals(viewport.actualHeight, 10000); assert_equals(viewport.actualWidth, Math.floor(10000*viewport.initialWidth/viewport.initialHeight));
+    });
+
+    /* Finished. Show the results. */
+    test.done();
+    testStyleSheet.disabled = true;
+    document.getElementById("log").style.display = "block";
+   }
+  ]]></script>
+ </head>
+ <body>
+  <div id="test">
+   <div id="log"></div>
+  </div>
+ </body>
+</html>

Added: trunk/LayoutTests/css3/device-adapt/opera/constrain-023-expected.txt (0 => 135728)


--- trunk/LayoutTests/css3/device-adapt/opera/constrain-023-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/css3/device-adapt/opera/constrain-023-expected.txt	2012-11-26 16:22:31 UTC (rev 135728)
@@ -0,0 +1,3 @@
+
+PASS CSS Test: @viewport constrained - used width is positive. 
+

Added: trunk/LayoutTests/css3/device-adapt/opera/constrain-023.xhtml (0 => 135728)


--- trunk/LayoutTests/css3/device-adapt/opera/constrain-023.xhtml	                        (rev 0)
+++ trunk/LayoutTests/css3/device-adapt/opera/constrain-023.xhtml	2012-11-26 16:22:31 UTC (rev 135728)
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: @viewport constrained - used width is positive.</title>
+  <link rel="author" title="Rune Lillesveen" href=""
+  <link rel="help" href=""
+  <meta name="flags" content="visual scroll dom" />
+  <meta name="assert" content="When constrained width is lower than 0.5px, rounding would make it 0px. Make sure the used width is then set to 1px."/>
+  <script src="" type="text/_javascript_" />
+  <script src="" type="text/_javascript_" />
+  <style type="text/css"><![CDATA[
+   body { margin: 0; }
+   html, body, #test { width: 100%; height: 100%; }
+   #log { padding: 1em; display: none; }
+   /* Reset viewport values to initial values to ignore UA stylesheet. */
+   @-webkit-viewport {
+    width: auto;
+    height: auto;
+    zoom: auto;
+    min-zoom: auto;
+    max-zoom: auto;
+    user-zoom: zoom;
+    orientation: auto;
+    resolution: auto;
+   }
+  ]]></style>
+  <style type="text/css"><![CDATA[
+   /* CSS for the test below. */
+   @-webkit-viewport { width: 0.01em }
+   /* Set root element font-size to something different from the initial
+      font-size to make sure 'rem' and 'em' for @viewport is based on the
+      initial font-size, not the root element font-size. */
+   html { font-size: 2rem; }
+   body { font-size: 0.5rem; }
+  ]]></style>
+  <script type="text/_javascript_"><![CDATA[
+   var test = async_test("CSS Test: @viewport constrained - used width is positive.");
+   window._onload_ = function(){
+
+    var testStyleSheet = document.styleSheets.item(1);
+
+    /* Disable the stylesheet that contains the @viewport to test. */
+    testStyleSheet.disabled = true;
+
+    /* Initialize an object to store viewport values to be used by the test
+       asserts. */
+    var viewport = new Object();
+
+    /* An element with the same size as the initial containing block. */
+    var testElm = document.getElementById("test");
+
+    /* Retrieve the initial viewport values before applying the @viewport to
+       test. */
+    viewport.initialWidth = testElm.offsetWidth;
+    viewport.initialHeight = testElm.offsetHeight;
+    viewport.fontSize = parseInt(getComputedStyle(testElm, "").fontSize);
+
+    /* Enable the stylesheet that contains the @viewport to test. */
+    testStyleSheet.disabled = false;
+
+    /* Retrieve the actual viewport values for the test. */
+    viewport.actualWidth = testElm.offsetWidth;
+    viewport.actualHeight = testElm.offsetHeight;
+    viewport.zoom = viewport.initialWidth / window.innerWidth;
+
+    /* Check viewport values. */
+    test.step(function(){
+        assert_equals(viewport.actualWidth, 1);
+    });
+
+    /* Finished. Show the results. */
+    test.done();
+    testStyleSheet.disabled = true;
+    document.getElementById("log").style.display = "block";
+   }
+  ]]></script>
+ </head>
+ <body>
+  <div id="test">
+   <div id="log"></div>
+  </div>
+ </body>
+</html>

Added: trunk/LayoutTests/css3/device-adapt/opera/constrain-024-expected.txt (0 => 135728)


--- trunk/LayoutTests/css3/device-adapt/opera/constrain-024-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/css3/device-adapt/opera/constrain-024-expected.txt	2012-11-26 16:22:31 UTC (rev 135728)
@@ -0,0 +1,3 @@
+
+PASS CSS Test: @viewport constrained - used height is positive. 
+

Added: trunk/LayoutTests/css3/device-adapt/opera/constrain-024.xhtml (0 => 135728)


--- trunk/LayoutTests/css3/device-adapt/opera/constrain-024.xhtml	                        (rev 0)
+++ trunk/LayoutTests/css3/device-adapt/opera/constrain-024.xhtml	2012-11-26 16:22:31 UTC (rev 135728)
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: @viewport constrained - used height is positive.</title>
+  <link rel="author" title="Rune Lillesveen" href=""
+  <link rel="help" href=""
+  <meta name="flags" content="visual scroll dom" />
+  <meta name="assert" content="When constrained height is lower than 0.5px, rounding would make it 0px. Make sure the used height is then set to 1px."/>
+  <script src="" type="text/_javascript_" />
+  <script src="" type="text/_javascript_" />
+  <style type="text/css"><![CDATA[
+   body { margin: 0; }
+   html, body, #test { width: 100%; height: 100%; }
+   #log { padding: 1em; display: none; }
+   /* Reset viewport values to initial values to ignore UA stylesheet. */
+   @-webkit-viewport {
+    width: auto;
+    height: auto;
+    zoom: auto;
+    min-zoom: auto;
+    max-zoom: auto;
+    user-zoom: zoom;
+    orientation: auto;
+    resolution: auto;
+   }
+  ]]></style>
+  <style type="text/css"><![CDATA[
+   /* CSS for the test below. */
+   @-webkit-viewport { height: 0.01em }
+   /* Set root element font-size to something different from the initial
+      font-size to make sure 'rem' and 'em' for @viewport is based on the
+      initial font-size, not the root element font-size. */
+   html { font-size: 2rem; }
+   body { font-size: 0.5rem; }
+  ]]></style>
+  <script type="text/_javascript_"><![CDATA[
+   var test = async_test("CSS Test: @viewport constrained - used height is positive.");
+   window._onload_ = function(){
+
+    var testStyleSheet = document.styleSheets.item(1);
+
+    /* Disable the stylesheet that contains the @viewport to test. */
+    testStyleSheet.disabled = true;
+
+    /* Initialize an object to store viewport values to be used by the test
+       asserts. */
+    var viewport = new Object();
+
+    /* An element with the same size as the initial containing block. */
+    var testElm = document.getElementById("test");
+
+    /* Retrieve the initial viewport values before applying the @viewport to
+       test. */
+    viewport.initialWidth = testElm.offsetWidth;
+    viewport.initialHeight = testElm.offsetHeight;
+    viewport.fontSize = parseInt(getComputedStyle(testElm, "").fontSize);
+
+    /* Enable the stylesheet that contains the @viewport to test. */
+    testStyleSheet.disabled = false;
+
+    /* Retrieve the actual viewport values for the test. */
+    viewport.actualWidth = testElm.offsetWidth;
+    viewport.actualHeight = testElm.offsetHeight;
+    viewport.zoom = viewport.initialWidth / window.innerWidth;
+
+    /* Check viewport values. */
+    test.step(function(){
+        assert_equals(viewport.actualHeight, 1);
+    });
+
+    /* Finished. Show the results. */
+    test.done();
+    testStyleSheet.disabled = true;
+    document.getElementById("log").style.display = "block";
+   }
+  ]]></script>
+ </head>
+ <body>
+  <div id="test">
+   <div id="log"></div>
+  </div>
+ </body>
+</html>

Modified: trunk/Source/WebCore/ChangeLog (135727 => 135728)


--- trunk/Source/WebCore/ChangeLog	2012-11-26 16:12:47 UTC (rev 135727)
+++ trunk/Source/WebCore/ChangeLog	2012-11-26 16:22:31 UTC (rev 135728)
@@ -1,3 +1,22 @@
+2012-11-26  Thiago Marcos P. Santos  <thiago.san...@intel.com>
+
+        Viewport CSS rules should not clamp values like Viewport META
+        https://bugs.webkit.org/show_bug.cgi?id=103068
+
+        Reviewed by Kenneth Rohde Christiansen.
+
+        CSS Device Adaption does not clamp the length and zoom values the
+        same way as the Viewport META. In fact, they are not clamped at all,
+        but instead, we just make sure that length values are at least 1px.
+
+        Tests: css3/device-adapt/opera/constrain-018.xhtml
+               css3/device-adapt/opera/constrain-019.xhtml
+               css3/device-adapt/opera/constrain-023.xhtml
+               css3/device-adapt/opera/constrain-024.xhtml
+
+        * dom/ViewportArguments.cpp:
+        (WebCore::ViewportArguments::resolve):
+
 2012-11-26  Mike West  <mk...@chromium.org>
 
         Web Inspector: URLs containing '^' are improperly linked in console messages.

Modified: trunk/Source/WebCore/dom/ViewportArguments.cpp (135727 => 135728)


--- trunk/Source/WebCore/dom/ViewportArguments.cpp	2012-11-26 16:12:47 UTC (rev 135727)
+++ trunk/Source/WebCore/dom/ViewportArguments.cpp	2012-11-26 16:22:31 UTC (rev 135728)
@@ -175,14 +175,20 @@
             resultWidth = compareIgnoringAuto(resultWidth, deviceSize.width() / compareIgnoringAuto(resultZoom, resultMaxZoom, min), max);
             resultHeight = compareIgnoringAuto(resultHeight, deviceSize.height() / compareIgnoringAuto(resultZoom, resultMaxZoom, min), max);
         }
+
+        resultWidth = max<float>(1, resultWidth);
+        resultHeight = max<float>(1, resultHeight);
     }
 
-    // Clamp values to valid range.
-    resultWidth = clampLengthValue(resultWidth);
-    resultHeight = clampLengthValue(resultHeight);
-    resultZoom = clampScaleValue(resultZoom);
-    resultMinZoom = clampScaleValue(resultMinZoom);
-    resultMaxZoom = clampScaleValue(resultMaxZoom);
+    if (type != ViewportArguments::CSSDeviceAdaptation && type != ViewportArguments::Implicit) {
+        // Clamp values to a valid range, but not for @viewport since is
+        // not mandated by the specification.
+        resultWidth = clampLengthValue(resultWidth);
+        resultHeight = clampLengthValue(resultHeight);
+        resultZoom = clampScaleValue(resultZoom);
+        resultMinZoom = clampScaleValue(resultMinZoom);
+        resultMaxZoom = clampScaleValue(resultMaxZoom);
+    }
 
     ViewportAttributes result;
     result.orientation = orientation;
@@ -229,9 +235,12 @@
     if (resultHeight == ViewportArguments::ValueAuto)
         resultHeight = resultWidth * (initialViewportSize.height() / initialViewportSize.width());
 
-    // Extend width and height to fill the visual viewport for the resolved initial-scale.
-    resultWidth = max<float>(resultWidth, initialViewportSize.width() / result.initialScale);
-    resultHeight = max<float>(resultHeight, initialViewportSize.height() / result.initialScale);
+    if (type == ViewportArguments::ViewportMeta) {
+        // Extend width and height to fill the visual viewport for the resolved initial-scale.
+        resultWidth = max<float>(resultWidth, initialViewportSize.width() / result.initialScale);
+        resultHeight = max<float>(resultHeight, initialViewportSize.height() / result.initialScale);
+    }
+
     result.layoutSize.setWidth(resultWidth);
     result.layoutSize.setHeight(resultHeight);
 
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
http://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to