Text Autosizing: Only take into account block width <= document layou…

…t width. https://bugs.webkit.org/show_bug.cgi?id=93862 Patch by John Mellor <johnme@chromium.org> on 2012-08-20 Reviewed by Kenneth Rohde Christiansen. Source/WebCore: Instead of calculating the textAutosizingMultiplier purely based on the width of each block, we now work out the maximum width of the block that could be displayed onscreen at any one time, and use that value. This avoids excessive text size multiplication (there's no point making text bigger than this, since you wouldn't be able to zoom out far enough to read it!). To determine the maximum onscreen block width, we take the minimum of the block width and the layoutWidth of the narrowest non-flattened ancestor frame. Flattened frames are ignored since they don't impose a hard limit on the maximum width that can be displayed, instead they can stretch to fit their contents. Note that on mobile the layoutWidth of the main frame is the fixed layout width aka viewport width. In practice this caps the maximum multiplier to a value that depends on the metrics of the device. For example on a Nexus S (480 x 800px and 1.5x devicePixelRatio) with a 980px default fixed layout width, this limits the multiplier to: 980 / (480/1.5) = 3.0625 Most pages won't have blocks that actually hit this cap, or they will only slightly exceed it (so their multiplier will only be slightly reduced). For example it's not uncommon for desktop pages to be slightly wider than 980px, but they would have to additionally have text that spans the full width of the page for this to affect them, and even then it would merely slightly decrease their multiplier). This will have more dramatic effects on the rare desktop pages which give a width=device-width (or similar) mobile viewport tag (on ports which support viewports). A follow-up patch will hopefully address this by wrapping the text in such excessively wide blocks to the layoutWidth. Tests: fast/text-autosizing/narrow-iframe-flattened.html fast/text-autosizing/narrow-iframe.html fast/text-autosizing/wide-block.html fast/text-autosizing/wide-iframe.html * page/FrameView.cpp: (WebCore::FrameView::isInChildFrameWithFrameFlattening): Made public and const, so can be used from TextAutosizer. * rendering/TextAutosizer.cpp: (WebCore::TextAutosizer::processSubtree): Computes the minimum layout width of the parent frames, as described above. (WebCore::TextAutosizer::processBlock): Limits used block width to this min layout width. LayoutTests: Added 4 tests: a block wider than the main frame, iframes both narrower than and wider than the main frame, both also containing wide blocks, and a narrow iframe expanded by frame flattening. I verified experimentally that narrow-iframe-flattened.html passes, by enabling frame flattening in Settings.cpp, but unfortunately it won't get run by any bots since the only platform which currently enables Text Autosizing (Chromium), doesn't enable frame flattening (or have the DRT methods required to test it). * fast/text-autosizing/font-scale-factor-expected.html: * fast/text-autosizing/font-scale-factor.html: * fast/text-autosizing/narrow-iframe-expected.html: Added. * fast/text-autosizing/narrow-iframe-flattened-expected.html: Added. * fast/text-autosizing/narrow-iframe-flattened.html: Added. * fast/text-autosizing/narrow-iframe.html: Added. * fast/text-autosizing/wide-block-expected.html: Added. * fast/text-autosizing/wide-block.html: Added. * fast/text-autosizing/wide-iframe-expected.html: Added. * fast/text-autosizing/wide-iframe.html: Added. * platform/chromium/TestExpectations: * platform/win/Skipped: * platform/wincairo/Skipped: git-svn-id: http://svn.webkit.org/repository/webkit/trunk@126058 268f45cc-cd09-0410-ab3c-d52691b4dbfc
mikewest · Aug 20, 2012 · bb4668f · bb4668f
1 parent 341acfe
commit bb4668f
Show file tree

Hide file tree

Showing 19 changed files with 305 additions and 8 deletions.
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
@@ -1,3 +1,34 @@
+2012-08-20  John Mellor  <johnme@chromium.org>
+
+        Text Autosizing: Only take into account block width <= document layout width.
+        https://bugs.webkit.org/show_bug.cgi?id=93862
+
+        Reviewed by Kenneth Rohde Christiansen.
+
+        Added 4 tests: a block wider than the main frame, iframes both narrower
+        than and wider than the main frame, both also containing wide blocks,
+        and a narrow iframe expanded by frame flattening.
+
+        I verified experimentally that narrow-iframe-flattened.html passes, by
+        enabling frame flattening in Settings.cpp, but unfortunately it won't
+        get run by any bots since the only platform which currently enables
+        Text Autosizing (Chromium), doesn't enable frame flattening (or have
+        the DRT methods required to test it).
+
+        * fast/text-autosizing/font-scale-factor-expected.html:
+        * fast/text-autosizing/font-scale-factor.html:
+        * fast/text-autosizing/narrow-iframe-expected.html: Added.
+        * fast/text-autosizing/narrow-iframe-flattened-expected.html: Added.
+        * fast/text-autosizing/narrow-iframe-flattened.html: Added.
+        * fast/text-autosizing/narrow-iframe.html: Added.
+        * fast/text-autosizing/wide-block-expected.html: Added.
+        * fast/text-autosizing/wide-block.html: Added.
+        * fast/text-autosizing/wide-iframe-expected.html: Added.
+        * fast/text-autosizing/wide-iframe.html: Added.
+        * platform/chromium/TestExpectations:
+        * platform/win/Skipped:
+        * platform/wincairo/Skipped:
+
 2012-08-20  Bruno de Oliveira Abinader  <bruno.abinader@basyskom.com>
 
         [css3-text] Add parsing support for -webkit-text-decoration-style

diff --git a/LayoutTests/fast/text-autosizing/font-scale-factor-expected.html b/LayoutTests/fast/text-autosizing/font-scale-factor-expected.html
@@ -6,6 +6,7 @@
       body {
         width: 800px;
         margin: 0px;
+        overflow: hidden;
       }
     </style>
   </head>

diff --git a/LayoutTests/fast/text-autosizing/font-scale-factor.html b/LayoutTests/fast/text-autosizing/font-scale-factor.html
@@ -6,6 +6,7 @@
       body {
         width: 800px;
         margin: 0px;
+        overflow: hidden; /* Vertical scrollbar makes it harder to write expected.html */
       }
     </style>
     <script>

diff --git a/LayoutTests/fast/text-autosizing/narrow-iframe-expected.html b/LayoutTests/fast/text-autosizing/narrow-iframe-expected.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+<meta name="viewport" content="width=800">
+<style type="text/css">
+body { width: 800px; margin: 0; overflow-y: hidden; }
+</style>
+
+</head>
+<body>
+
+<iframe style="width: 50%; height: 50%; border: 0" src='data:text/html,
+<html><body style="margin: 0; overflow-y: hidden"><div style="width: 1600px; font-size: 1.25rem">
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</div></body></html>'>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/text-autosizing/narrow-iframe-flattened-expected.html b/LayoutTests/fast/text-autosizing/narrow-iframe-flattened-expected.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+<meta name="viewport" content="width=800">
+<style type="text/css">
+body { width: 800px; margin: 0; overflow-y: hidden; }
+</style>
+
+</head>
+<body>
+
+<iframe style="width: 100%; height: 50%; border: 0" src='data:text/html,
+<html><body style="margin: 0; overflow-y: hidden"><div style="width: 1600px; font-size: 2.5rem">
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</div></body></html>'>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/text-autosizing/narrow-iframe-flattened.html b/LayoutTests/fast/text-autosizing/narrow-iframe-flattened.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+<meta name="viewport" content="width=800">
+<style type="text/css">
+body { width: 800px; margin: 0; overflow-y: hidden; }
+</style>
+
+<script type="text/javascript">
+if (window.internals) {
+    window.internals.settings.setTextAutosizingEnabled(true);
+    window.internals.settings.setTextAutosizingWindowSizeOverride(320, 480);
+} else if (window.console && console.warn) {
+    console.warn("This test depends on the Text Autosizing setting being true, so run it in DumpRenderTree, or manually enable Text Autosizing, and either use a mobile device with 320px device-width (like Nexus S or iPhone), or define HACK_FORCE_TEXT_AUTOSIZING_ON_DESKTOP.");
+}
+if (window.testRunner)
+    testRunner.setFrameFlatteningEnabled(true);
+</script>
+
+</head>
+<body>
+
+<iframe style="width: 50%; height: 50%; border: 0" src='data:text/html,
+<html><body style="margin: 0; overflow-y: hidden"><div style="width: 1600px">
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</div></body></html>'>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/text-autosizing/narrow-iframe.html b/LayoutTests/fast/text-autosizing/narrow-iframe.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+<meta name="viewport" content="width=800">
+<style type="text/css">
+body { width: 800px; margin: 0; overflow-y: hidden; }
+</style>
+
+<script type="text/javascript">
+if (window.internals) {
+    window.internals.settings.setTextAutosizingEnabled(true);
+    window.internals.settings.setTextAutosizingWindowSizeOverride(320, 480);
+} else if (window.console && console.warn) {
+    console.warn("This test depends on the Text Autosizing setting being true, so run it in DumpRenderTree, or manually enable Text Autosizing, and either use a mobile device with 320px device-width (like Nexus S or iPhone), or define HACK_FORCE_TEXT_AUTOSIZING_ON_DESKTOP.");
+}
+</script>
+
+</head>
+<body>
+
+<iframe style="width: 50%; height: 50%; border: 0" src='data:text/html,
+<html><body style="margin: 0; overflow-y: hidden"><div style="width: 1600px">
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</div></body></html>'>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/text-autosizing/wide-block-expected.html b/LayoutTests/fast/text-autosizing/wide-block-expected.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+<meta name="viewport" content="width=800">
+<style type="text/css">
+body { width: 800px; margin: 0; overflow-y: hidden; }
+</style>
+
+</head>
+<body>
+
+<div style="width: 1600px; font-size: 2.5rem">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/text-autosizing/wide-block.html b/LayoutTests/fast/text-autosizing/wide-block.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+<meta name="viewport" content="width=800">
+<style type="text/css">
+body { width: 800px; margin: 0; overflow-y: hidden; }
+</style>
+
+<script type="text/javascript">
+if (window.internals) {
+    window.internals.settings.setTextAutosizingEnabled(true);
+    window.internals.settings.setTextAutosizingWindowSizeOverride(320, 480);
+} else if (window.console && console.warn) {
+    console.warn("This test depends on the Text Autosizing setting being true, so run it in DumpRenderTree, or manually enable Text Autosizing, and either use a mobile device with 320px device-width (like Nexus S or iPhone), or define HACK_FORCE_TEXT_AUTOSIZING_ON_DESKTOP.");
+}
+</script>
+
+</head>
+<body>
+
+<div style="width: 1600px">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/text-autosizing/wide-iframe-expected.html b/LayoutTests/fast/text-autosizing/wide-iframe-expected.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+<meta name="viewport" content="width=800">
+<style type="text/css">
+body { width: 800px; margin: 0; overflow-y: hidden; }
+</style>
+
+</head>
+<body>
+
+<iframe style="width: 3200px; height: 50%; border: 0" src='data:text/html,
+<html><body style="margin: 0; overflow-y: hidden"><div style="width: 1600px; font-size: 2.5rem">
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</div></body></html>'>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/text-autosizing/wide-iframe.html b/LayoutTests/fast/text-autosizing/wide-iframe.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+<meta name="viewport" content="width=800">
+<style type="text/css">
+body { width: 800px; margin: 0; overflow-y: hidden; }
+</style>
+
+<script type="text/javascript">
+if (window.internals) {
+    window.internals.settings.setTextAutosizingEnabled(true);
+    window.internals.settings.setTextAutosizingWindowSizeOverride(320, 480);
+} else if (window.console && console.warn) {
+    console.warn("This test depends on the Text Autosizing setting being true, so run it in DumpRenderTree, or manually enable Text Autosizing, and either use a mobile device with 320px device-width (like Nexus S or iPhone), or define HACK_FORCE_TEXT_AUTOSIZING_ON_DESKTOP.");
+}
+</script>
+
+</head>
+<body>
+
+<iframe style="width: 3200px; height: 50%; border: 0" src='data:text/html,
+<html><body style="margin: 0; overflow-y: hidden"><div style="width: 1600px">
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</div></body></html>'>
+
+</body>
+</html>
diff --git a/LayoutTests/platform/chromium/TestExpectations b/LayoutTests/platform/chromium/TestExpectations
@@ -764,6 +764,7 @@ WONTFIX SKIP : fast/fast-mobile-scrolling/no-fixed-position-elements.html = IMAG
 
 // Tests for frameset flattening. Relevant only on mobile browsers.
 WONTFIX SKIP : fast/frames/flattening = TIMEOUT
+WONTFIX SKIP : fast/text-autosizing/narrow-iframe-flattened.html = IMAGE
 WONTFIX SKIP : http/tests/misc/iframe-flattening-3level-nesting-with-blocking-resource.html = TIMEOUT
 
 // This should be tested differently (see discussion on https://bugs.webkit.org/show_bug.cgi?id=35063).

diff --git a/LayoutTests/platform/win/Skipped b/LayoutTests/platform/win/Skipped
@@ -959,6 +959,7 @@ http/tests/security/xss-DENIED-window-open-javascript-url.html
 # Skip frame flattening tests until it can be tested by this DRT
 # https://bugs.webkit.org/show_bug.cgi?id=32717
 fast/frames/flattening/
+fast/text-autosizing/narrow-iframe-flattened.html
 
 # https://bugs.webkit.org/show_bug.cgi?id=34933
 media/video-display-aspect-ratio.html

diff --git a/LayoutTests/platform/wincairo/Skipped b/LayoutTests/platform/wincairo/Skipped
@@ -1476,6 +1476,7 @@ http/tests/security/xss-DENIED-window-open-javascript-url.html
 # Skip frame flattening tests until it can be tested by this DRT
 # https://bugs.webkit.org/show_bug.cgi?id=32717
 fast/frames/flattening/
+fast/text-autosizing/narrow-iframe-flattened.html
 
 # https://bugs.webkit.org/show_bug.cgi?id=34933
 media/video-display-aspect-ratio.html

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
@@ -1,3 +1,61 @@
+2012-08-20  John Mellor  <johnme@chromium.org>
+
+        Text Autosizing: Only take into account block width <= document layout width.
+        https://bugs.webkit.org/show_bug.cgi?id=93862
+
+        Reviewed by Kenneth Rohde Christiansen.
+
+        Instead of calculating the textAutosizingMultiplier purely based on the
+        width of each block, we now work out the maximum width of the block
+        that could be displayed onscreen at any one time, and use that value.
+        This avoids excessive text size multiplication (there's no point making
+        text bigger than this, since you wouldn't be able to zoom out far
+        enough to read it!).
+
+        To determine the maximum onscreen block width, we take the minimum of
+        the block width and the layoutWidth of the narrowest non-flattened
+        ancestor frame. Flattened frames are ignored since they don't impose a
+        hard limit on the maximum width that can be displayed, instead they can
+        stretch to fit their contents. Note that on mobile the layoutWidth of
+        the main frame is the fixed layout width aka viewport width.
+
+        In practice this caps the maximum multiplier to a value that depends
+        on the metrics of the device. For example on a Nexus S (480 x 800px
+        and 1.5x devicePixelRatio) with a 980px default fixed layout width,
+        this limits the multiplier to: 980 / (480/1.5) = 3.0625
+
+        Most pages won't have blocks that actually hit this cap, or they will
+        only slightly exceed it (so their multiplier will only be slightly
+        reduced). For example it's not uncommon for desktop pages to be
+        slightly wider than 980px, but they would have to additionally have
+        text that spans the full width of the page for this to affect them, and
+        even then it would merely slightly decrease their multiplier).
+
+        This will have more dramatic effects on the rare desktop pages which
+        give a width=device-width (or similar) mobile viewport tag (on ports
+        which support viewports). A follow-up patch will hopefully address this
+        by wrapping the text in such excessively wide blocks to the layoutWidth.
+
+        Tests: fast/text-autosizing/narrow-iframe-flattened.html
+               fast/text-autosizing/narrow-iframe.html
+               fast/text-autosizing/wide-block.html
+               fast/text-autosizing/wide-iframe.html
+
+        * page/FrameView.cpp:
+        (WebCore::FrameView::isInChildFrameWithFrameFlattening):
+
+            Made public and const, so can be used from TextAutosizer.
+
+        * rendering/TextAutosizer.cpp:
+        (WebCore::TextAutosizer::processSubtree):
+
+            Computes the minimum layout width of the parent frames, as described
+            above.
+
+        (WebCore::TextAutosizer::processBlock):
+
+            Limits used block width to this min layout width.
+
 2012-08-20  Hans Wennborg  <hans@chromium.org>
 
         Respect runtime flags for Device Orientation and Device Motion

diff --git a/Source/WebCore/page/FrameView.cpp b/Source/WebCore/page/FrameView.cpp
@@ -2932,7 +2932,7 @@ FrameView* FrameView::parentFrameView() const
     return 0;
 }
 
-bool FrameView::isInChildFrameWithFrameFlattening()
+bool FrameView::isInChildFrameWithFrameFlattening() const
 {
     if (!parent() || !m_frame->ownerElement())
         return false;

diff --git a/Source/WebCore/page/FrameView.h b/Source/WebCore/page/FrameView.h
@@ -256,6 +256,8 @@ class FrameView : public ScrollView {
 
     Color documentBackgroundColor() const;
 
+    bool isInChildFrameWithFrameFlattening() const;
+
     static double currentPaintTimeStamp() { return sCurrentPaintTimeStamp; } // returns 0 if not painting
 
     void updateLayoutAndStyleIfNeededRecursive();
@@ -430,7 +432,6 @@ class FrameView : public ScrollView {
 
     FrameView* parentFrameView() const;
 
-    bool isInChildFrameWithFrameFlattening();
     bool doLayoutWithFrameFlattening(bool allowSubtree);
 
     virtual AXObjectCache* axObjectCache() const;