- Revision
- 137764
- Author
- [email protected]
- Date
- 2012-12-14 13:07:07 -0800 (Fri, 14 Dec 2012)
Log Message
Source/WebCore: Text Autosizing: Consider inline-block and inline-table elements to be autosizing clusters.
https://bugs.webkit.org/show_bug.cgi?id=104702
Patch by Anton Vayvod <[email protected]> on 2012-12-14
Reviewed by Julien Chaffraix.
A common pattern for creating adjacent columns in CSS is to set each of the columns to
display:inline-block, display:inline-table or alike WebKit-specific styles. Whenever columns
are used, Text Autosizing needs to assign each of the columns to different clusters (since
the user can zoom in such that a column fills the width of the screen, so text within a column
should have a smaller multiplier than it's wider enclosing cluster would have needed).
This patch causes display:inline-block, display:inline-table and alike styles to trigger new clusters.
Test: fast/text-autosizing/cluster-inline-block-or-table.html
Test: fast/text-autosizing/cluster-inline-grid-flex-box.html
* rendering/TextAutosizer.cpp:
(WebCore::TextAutosizer::isAutosizingContainer):
(WebCore::TextAutosizer::isAutosizingCluster):
Consider display:inline-block, inline-table and alike elements to be autosizing containers and clusters.
LayoutTests: Consider inline-block and inline-table elements to be autosizing clusters.
https://bugs.webkit.org/show_bug.cgi?id=104702
Patch by Anton Vayvod <[email protected]> on 2012-12-14
Reviewed by Julien Chaffraix.
Added tests to verify that display:inline-block, display:inline-table and alike elements become clusters.
* fast/text-autosizing/cluster-inline-block-or-table-expected.html: Added.
* fast/text-autosizing/cluster-inline-block-or-table.html: Added.
* fast/text-autosizing/cluster-inline-grid-flex-box-expected.html: Added.
* fast/text-autosizing/cluster-inline-grid-flex-box.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (137763 => 137764)
--- trunk/LayoutTests/ChangeLog 2012-12-14 20:49:09 UTC (rev 137763)
+++ trunk/LayoutTests/ChangeLog 2012-12-14 21:07:07 UTC (rev 137764)
@@ -1,3 +1,17 @@
+2012-12-14 Anton Vayvod <[email protected]>
+
+ Consider inline-block and inline-table elements to be autosizing clusters.
+ https://bugs.webkit.org/show_bug.cgi?id=104702
+
+ Reviewed by Julien Chaffraix.
+
+ Added tests to verify that display:inline-block, display:inline-table and alike elements become clusters.
+
+ * fast/text-autosizing/cluster-inline-block-or-table-expected.html: Added.
+ * fast/text-autosizing/cluster-inline-block-or-table.html: Added.
+ * fast/text-autosizing/cluster-inline-grid-flex-box-expected.html: Added.
+ * fast/text-autosizing/cluster-inline-grid-flex-box.html: Added.
+
2012-12-14 Beth Dakin <[email protected]>
Marking these tests as failure for now.
Added: trunk/LayoutTests/fast/text-autosizing/cluster-inline-block-or-table-expected.html (0 => 137764)
--- trunk/LayoutTests/fast/text-autosizing/cluster-inline-block-or-table-expected.html (rev 0)
+++ trunk/LayoutTests/fast/text-autosizing/cluster-inline-block-or-table-expected.html 2012-12-14 21:07:07 UTC (rev 137764)
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Test for https://bugs.webkit.org/show_bug.cgi?id=104702</title>
+<meta name="viewport" content="width=800">
+<style>
+html { font-size: 16px; }
+body { width: 800px; margin: 0; overflow-y: hidden; }
+</style>
+
+</head>
+<body>
+<div>
+ <div style="font-size: 2.5rem">
+ This element is autosized to 40px computed font size (16 * 800/320), since the width of the root cluster is used for autosizing.<br>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ </div>
+ <div>
+ <div style="display: inline-block; width: 600px; font-size: 1.875rem">
+ This element becomes a separate autosizing cluster since it's an inline-block element. Hence its computed font size is 30px (16 * 600 / 320).<br>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ </div>
+ </div>
+ <div>
+ <div style="display: inline-table; width: 400px; font-size: 1.25rem">
+ This element becomes a separate autosizing cluster since it's an inline-table element. Hence its computed font size is 20px (16 * 400 / 320).<br>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ </div>
+ </div>
+</div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/fast/text-autosizing/cluster-inline-block-or-table.html (0 => 137764)
--- trunk/LayoutTests/fast/text-autosizing/cluster-inline-block-or-table.html (rev 0)
+++ trunk/LayoutTests/fast/text-autosizing/cluster-inline-block-or-table.html 2012-12-14 21:07:07 UTC (rev 137764)
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Test for https://bugs.webkit.org/show_bug.cgi?id=104702</title>
+<meta name="viewport" content="width=800">
+<style>
+html { font-size: 16px; }
+body { width: 800px; margin: 0; overflow-y: hidden; }
+</style>
+
+<script>
+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>
+ <div>
+ This element is autosized to 40px computed font size (16 * 800/320), since the width of the root cluster is used for autosizing.<br>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ </div>
+ <div>
+ <div style="display: inline-block; width: 600px">
+ This element becomes a separate autosizing cluster since it's an inline-block element. Hence its computed font size is 30px (16 * 600 / 320).<br>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ </div></div>
+ <div>
+ <div style="display: inline-table; width: 400px">
+ This element becomes a separate autosizing cluster since it's an inline-table element. Hence its computed font size is 20px (16 * 400 / 320).<br>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ </div></div>
+</div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/fast/text-autosizing/cluster-inline-grid-flex-box-expected.html (0 => 137764)
--- trunk/LayoutTests/fast/text-autosizing/cluster-inline-grid-flex-box-expected.html (rev 0)
+++ trunk/LayoutTests/fast/text-autosizing/cluster-inline-grid-flex-box-expected.html 2012-12-14 21:07:07 UTC (rev 137764)
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Test for https://bugs.webkit.org/show_bug.cgi?id=104702</title>
+<meta name="viewport" content="width=800">
+<style>
+html { font-size: 16px; }
+body { width: 800px; margin: 0; overflow-y: hidden; }
+</style>
+
+</head>
+<body>
+<div>
+ <div>
+ <div style="display: -webkit-inline-grid; width: 600px; font-size: 1.875rem">
+ This element becomes a separate autosizing cluster since it's a -webkit-inline-grid element. Hence its computed font size is 30px (16 * 600 / 320).<br>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ </div>
+ </div>
+ <div>
+ <div style="display: -webkit-inline-flex; width: 400px; font-size: 1.25rem">
+ This element becomes a separate autosizing cluster since it's a -webkit-inline-flex element. Hence its computed font size is 20px (16 * 400 / 320).<br>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ </div>
+ </div>
+ <div>
+ <div style="display: -webkit-inline-box; width: 600px; font-size: 1.875rem">
+ This element becomes a separate autosizing cluster since it's a -webkit-inline-box element. Hence its computed font size is 30px (16 * 600 / 320).<br>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ </div>
+ </div>
+</div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/fast/text-autosizing/cluster-inline-grid-flex-box.html (0 => 137764)
--- trunk/LayoutTests/fast/text-autosizing/cluster-inline-grid-flex-box.html (rev 0)
+++ trunk/LayoutTests/fast/text-autosizing/cluster-inline-grid-flex-box.html 2012-12-14 21:07:07 UTC (rev 137764)
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Test for https://bugs.webkit.org/show_bug.cgi?id=104702</title>
+<meta name="viewport" content="width=800">
+<style>
+html { font-size: 16px; }
+body { width: 800px; margin: 0; overflow-y: hidden; }
+</style>
+
+<script>
+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>
+ <div>
+ <div style="display: -webkit-inline-grid; width: 600px">
+ This element becomes a separate autosizing cluster since it's a -webkit-inline-grid element. Hence its computed font size is 30px (16 * 600 / 320).<br>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ </div></div>
+ <div>
+ <div style="display: -webkit-inline-flex; width: 400px">
+ This element becomes a separate autosizing cluster since it's a -webkit-inline-flex element. Hence its computed font size is 20px (16 * 400 / 320).<br>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ </div></div>
+ <div>
+ <div style="display: -webkit-inline-box; width: 600px">
+ This element becomes a separate autosizing cluster since it's a -webkit-inline-box element. Hence its computed font size is 30px (16 * 600 / 320).<br>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ </div></div>
+</div>
+</body>
+</html>
\ No newline at end of file
Modified: trunk/Source/WebCore/ChangeLog (137763 => 137764)
--- trunk/Source/WebCore/ChangeLog 2012-12-14 20:49:09 UTC (rev 137763)
+++ trunk/Source/WebCore/ChangeLog 2012-12-14 21:07:07 UTC (rev 137764)
@@ -1,3 +1,26 @@
+2012-12-14 Anton Vayvod <[email protected]>
+
+ Text Autosizing: Consider inline-block and inline-table elements to be autosizing clusters.
+ https://bugs.webkit.org/show_bug.cgi?id=104702
+
+ Reviewed by Julien Chaffraix.
+
+ A common pattern for creating adjacent columns in CSS is to set each of the columns to
+ display:inline-block, display:inline-table or alike WebKit-specific styles. Whenever columns
+ are used, Text Autosizing needs to assign each of the columns to different clusters (since
+ the user can zoom in such that a column fills the width of the screen, so text within a column
+ should have a smaller multiplier than it's wider enclosing cluster would have needed).
+
+ This patch causes display:inline-block, display:inline-table and alike styles to trigger new clusters.
+
+ Test: fast/text-autosizing/cluster-inline-block-or-table.html
+ Test: fast/text-autosizing/cluster-inline-grid-flex-box.html
+
+ * rendering/TextAutosizer.cpp:
+ (WebCore::TextAutosizer::isAutosizingContainer):
+ (WebCore::TextAutosizer::isAutosizingCluster):
+ Consider display:inline-block, inline-table and alike elements to be autosizing containers and clusters.
+
2012-12-14 Anders Carlsson <[email protected]>
REGRESSION (r137607): Cannot download files, stuck in "Preparing to download"
Modified: trunk/Source/WebCore/rendering/TextAutosizer.cpp (137763 => 137764)
--- trunk/Source/WebCore/rendering/TextAutosizer.cpp 2012-12-14 20:49:09 UTC (rev 137763)
+++ trunk/Source/WebCore/rendering/TextAutosizer.cpp 2012-12-14 21:07:07 UTC (rev 137764)
@@ -184,10 +184,12 @@
// "Autosizing containers" are the smallest unit for which we can
// enable/disable Text Autosizing.
// - Must not be inline, as different multipliers on one line looks terrible.
+ // Exceptions are inline-block and alike elements (inline-table, -webkit-inline-*),
+ // as they often contain entire multi-line columns of text.
// - Must not be list items, as items in the same list should look consistent (*).
// - Must not be normal list items, as items in the same list should look
// consistent, unless they are floating or position:absolute/fixed.
- if (!renderer->isRenderBlock() || renderer->isInline())
+ if (!renderer->isRenderBlock() || (renderer->isInline() && !renderer->style()->isDisplayReplacedType()))
return false;
if (renderer->isListItem())
return renderer->isFloating() || renderer->isOutOfFlowPositioned();
@@ -224,10 +226,11 @@
|| renderer->isTableCaption()
|| renderer->isFlexibleBoxIncludingDeprecated()
|| renderer->hasColumns()
- || renderer->containingBlock()->isHorizontalWritingMode() != renderer->isHorizontalWritingMode();
+ || renderer->containingBlock()->isHorizontalWritingMode() != renderer->isHorizontalWritingMode()
+ || renderer->style()->isDisplayReplacedType();
// FIXME: Tables need special handling to multiply all their columns by
// the same amount even if they're different widths; so do hasColumns()
- // renderers, and probably flexboxes...
+ // containers, and probably flexboxes...
}
static bool contentHeightIsConstrained(const RenderBlock* container)
