Skip to content

GitLab

T
tangled
Commit 5e30cead authored by robhogan@gmail.com's avatar robhogan@gmail.com
Browse files
Options

Floats following inlines break to next line unncessarily 

Don't include trailing space in linewidth calculations when deciding
if a float can fit on a line.

Merge http://trac.webkit.org/changeset/148622

Review URL: https://codereview.chromium.org/343663004

git-svn-id: svn://svn.chromium.org/blink/trunk@177135 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent bd95cb96
Hide whitespace changes
Inline Side-by-side
Showing with 359 additions and 15 deletions
third_party/WebKit/LayoutTests/css2.1/20110323/floats-001-expected.html 0 → 100644
View file @ 5e30cead
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style type="text/css">
div
{
border: black solid 5px;
height: 1in;
width: 2in;
}
img {vertical-align: top;}
</style>
</head>
<body>
<p>Test passes if the blue square is on the left inner edge of the hollow black rectangle.</p>
<div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled"></div>
</body>
</html>
\ No newline at end of file
third_party/WebKit/LayoutTests/css2.1/20110323/floats-001.html 0 → 100644
View file @ 5e30cead
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Floats, shifting left until it touches container edge</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-07-02 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats">
<link rel="match" href="reference/floats-001-ref.htm">
<meta name="flags" content="">
<meta name="assert" content="A left floated box shifts left until its outer edge touches the containing block edge.">
<style type="text/css">
#div1
{
border: solid 5px black;
height: 1in;
width: 2in;
}
div div
{
display: inline-block;
height: 1in;
width: 1in;
}
#div3
{
background-color: blue;
float: left;
}
</style>
</head>
<body>
<p>Test passes if the blue square is on the left inner edge of the hollow black rectangle.</p>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>
\ No newline at end of file
third_party/WebKit/LayoutTests/css2.1/20110323/floats-102-expected.html 0 → 100644
View file @ 5e30cead
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
div { border: 1px solid teal; padding: 4px; margin: 4px; }
.left { float: left; }
.right { float: right; }
.size { width: 150px; height: 150px; }
</style>
</head>
<body>
<p>The content before should be to the right of the inner square,
and both it and the inner square should be surrounded by an outer box.</p>
<div class="left"><div class="size left"></div>content before</div>
</body>
</html>
third_party/WebKit/LayoutTests/css2.1/20110323/floats-102.html 0 → 100644
View file @ 5e30cead
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: CSS Floats: Nested floats (some inline content before nested float)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/002-demo.html" type="text/html">
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats">
<style type="text/css">
div { border: 1px solid teal; padding: 4px; margin: 4px; }
.left { float: left; }
.right { float: right; }
.size { width: 150px; height: 150px; }
</style>
</head>
<body>
<p>The content before should be to the right of the inner square,
and both it and the inner square should be surrounded by an outer box.</p>
<div class="left">content before <div class="size left"></div></div>
</body>
</html>
\ No newline at end of file
third_party/WebKit/LayoutTests/fast/inline-block/float-both-whitespace-expected.html 0 → 100644
View file @ 5e30cead
<!DOCTYPE html>
<html>
<head>
<title>Test With Both Leading and Trailing Whitespace</title>
<style>
div { height:150px; margin:0; padding:0; border:none; }
.container { width:400px; }
.middle { display:inline-block; width:400px; background-color:green; }
</style>
</head>
<body>
<p>There should be a single green rectangle below.</p>
<!-- Mixture of Leading and Trailing Whitespace -->
<div class="container"><div class="middle"></div></div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/inline-block/float-both-whitespace.html 0 → 100644
View file @ 5e30cead
<!DOCTYPE html>
<html>
<head>
<title>Test With Both Leading and Trailing Whitespace</title>
<style>
div { height:30px; margin:0; padding:0; border:none; }
.container { width:400px; }
.floater { float:right; width:100px; background-color:green; }
.middle { display:inline-block; width:300px; background-color:green; }
</style>
</head>
<body>
<p>There should be a single green rectangle below.</p>
<!-- Single Leading and Trailing Space -->
<div class="container"><div class="middle"></div> <div class="floater"></div> </div>
<!-- Single Leading and Multiple Trailing Spaces -->
<div class="container"><div class="middle"></div> <div class="floater"></div> </div>
<!-- Multiple Leading and Single Trailing Spaces -->
<div class="container"><div class="middle"></div> <div class="floater"></div> </div>
<!-- Multiple Leading and Trailing Spaces -->
<div class="container"><div class="middle"></div> <div class="floater"></div> </div>
<!-- Mixture of Leading and Trailing Whitespace -->
<div class="container">
<div class="middle"></div>
<div class="floater"></div>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/inline-block/float-leading-whitespace-expected.html 0 → 100644
View file @ 5e30cead
<!DOCTYPE html>
<html>
<head>
<title>Test With Leading Whitespace</title>
<style>
div { height:90px; margin:0; padding:0; border:none; }
.container { width:400px; }
.middle { display:inline-block; width:400px; background-color:green; }
</style>
</head>
<body>
<p> There should be a single green rectangle below. </p>
<div class="container"><div class="middle"></div></div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/inline-block/float-leading-whitespace.html 0 → 100644
View file @ 5e30cead
<!DOCTYPE html>
<html>
<head>
<title>Test With Leading Whitespace</title>
<style>
div { height:30px; margin:0; padding:0; border:none; }
.container { width:400px; }
.floater { float:right; width:100px; background-color:green; }
.middle { display:inline-block; width:300px; background-color:green; }
</style>
</head>
<body>
<p> There should be a single green rectangle below. </p>
<!-- Single Leading Space -->
<div class="container"><div class="middle"></div> <div class="floater"></div></div>
<!-- Single Leading Newline -->
<div class="container"><div class="middle"></div>
<div class="floater"></div></div>
<!-- Mixture of Leading Whitespace -->
<div class="container"><div class="middle"></div>
<div class="floater"></div></div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/inline-block/float-no-whitespace-expected.html 0 → 100644
View file @ 5e30cead
<!DOCTYPE html>
<html>
<head>
<title>Test Without Whitespace</title>
<style>
div { height:60px; margin:0; padding:0; border:none; }
.container { width:400px; }
.middle { display:inline-block; width:400px; background-color:green; }
</style>
</head>
<body>
<p> There should be a single green rectangle below. </p>
<div class="container"><div class="middle"></div></div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/inline-block/float-no-whitespace.html 0 → 100644
View file @ 5e30cead
<!DOCTYPE html>
<html>
<head>
<title>Test Without Whitespace</title>
<style>
div { height:30px; margin:0; padding:0; border:none; }
.container { width:400px; }
.floater { float:right; width:100px; background-color:green; }
.middle { display:inline-block; width:300px; background-color:green; }
</style>
</head>
<body>
<p> There should be a single green rectangle below. </p>
<div class="container"><div class="middle"></div><div class="floater"></div></div>
<div class="container"><div class="middle"></div><div class="floater"></div></div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/inline-block/float-trailing-whitespace-expected.html 0 → 100644
View file @ 5e30cead
<!DOCTYPE html>
<html>
<head>
<title>Test With Leading Whitespace</title>
<style>
div { height:90px; margin:0; padding:0; border:none; }
.container { width:400px; }
.middle { display:inline-block; width:400px; background-color:green; }
</style>
</head>
<body>
<p> There should be a single green rectangle below. </p>
<div class="container"><div class="middle"></div></div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/inline-block/float-trailing-whitespace.html 0 → 100644
View file @ 5e30cead
<!DOCTYPE html>
<html>
<head>
<title>Test With Trailing Whitespace</title>
<style>
div { height:30px; margin:0; padding:0; border:none; }
.container { width:400px; }
.floater { float:right; width:100px; background-color:green; }
.middle { display:inline-block; width:300px; background-color:green; }
</style>
</head>
<body>
<p> There should be a single green rectangle below. </p>
<!-- Single Trailing Space -->
<div class="container"><div class="middle"></div><div class="floater"></div> </div>
<!-- Single Trailing Newline -->
<div class="container"><div class="middle"></div><div class="floater"></div>
</div>
<!-- Mixture of Trailing Whitespace -->
<div class="container"><div class="middle"></div><div class="floater"></div>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/inline-block/multiple-floats-with-whitespace-expected.html 0 → 100644
View file @ 5e30cead
<!DOCTYPE html>
<html>
<head>
<style>
div { height:90px; margin:0; padding:0; border:none; }
.container { width:400px; }
.middle { display:inline-block; width:400px; background-color:green; }
</style>
</head>
<body>
<p> There should be a single green rectangle below. </p>
<div class="container"><div class="middle"></div></div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/inline-block/multiple-floats-with-whitespace.html 0 → 100644
View file @ 5e30cead
<!DOCTYPE html>
<html>
<head>
<title>Test Multiple Floats for a Single Line</title>
<style>
div { width: 100px; height:30px; margin:0; padding:0; border:none; background-color: green;}
.container { width:400px; }
.left { float:left; }
.a { float:right; }
.b { float:right; }
.middle { display:inline-block; }
</style>
</head>
<body>
<p> There should be a single green rectangle below. </p>
<!-- No whitespace -->
<div class="container"><div class="left"></div><div class="middle"></div><div class="floater a"></div><div class="floater b"></div></div>
<!-- Some whitespace -->
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="floater a"></div>
<div class="floater b"></div>
</div>
<!-- Order should not matter -->
<div class="container">
<div class="floater a"></div>
<div class="left"></div>
<div class="middle"></div>
<div class="floater b"></div>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/multicol/float-truncation.html
View file @ 5e30cead
......@@ -17,7 +17,7 @@
div.float {
float: left;
width: 50px;
width: 51px;
margin-top: 5px;
color: silver;
}
......
third_party/WebKit/LayoutTests/fast/multicol/vertical-lr/float-truncation.html
View file @ 5e30cead
......@@ -16,7 +16,7 @@
div.float {
float: left;
height: 50px;
height: 51px;
-webkit-margin-before: 5px;
color: silver;
}
......
third_party/WebKit/LayoutTests/fast/multicol/vertical-rl/float-truncation.html
View file @ 5e30cead
......@@ -17,7 +17,7 @@
div.float {
float: left;
height: 50px;
height: 51px;
-webkit-margin-before: 5px;
color: silver;
}
......
third_party/WebKit/Source/core/rendering/line/BreakingContextInlineHeaders.h
View file @ 5e30cead
......@@ -364,7 +364,7 @@ inline void BreakingContext::handleFloat()
// If it does, position it now, otherwise, position
// it after moving to next line (in newLine() func)
// FIXME: Bug 110372: Properly position multiple stacked floats with non-rectangular shape outside.
if (m_floatsFitOnLine && m_width.fitsOnLine(m_block->logicalWidthForFloat(floatingObject).toFloat())) {
if (m_floatsFitOnLine && m_width.fitsOnLine(m_block->logicalWidthForFloat(floatingObject).toFloat(), ExcludeWhitespace)) {
m_block->positionNewFloatOnLine(floatingObject, m_lastFloatFromPreviousLine, m_lineInfo, m_width);
if (m_lineBreak.object() == m_current.object()) {
ASSERT(!m_lineBreak.offset());
......@@ -644,15 +644,19 @@ inline bool BreakingContext::handleText(WordMeasurements& wordMeasurements, bool
wordMeasurement.endOffset = m_current.offset();
wordMeasurement.startOffset = lastSpace;
float additionalTmpW;
float additionalTempWidth;
if (wordTrailingSpaceWidth && c == ' ')
additionalTmpW = textWidth(renderText, lastSpace, m_current.offset() + 1 - lastSpace, font, m_width.currentWidth(), isFixedPitch, m_collapseWhiteSpace, &wordMeasurement.fallbackFonts) - wordTrailingSpaceWidth;
additionalTempWidth = textWidth(renderText, lastSpace, m_current.offset() + 1 - lastSpace, font, m_width.currentWidth(), isFixedPitch, m_collapseWhiteSpace, &wordMeasurement.fallbackFonts) - wordTrailingSpaceWidth;
else
additionalTmpW = textWidth(renderText, lastSpace, m_current.offset() - lastSpace, font, m_width.currentWidth(), isFixedPitch, m_collapseWhiteSpace, &wordMeasurement.fallbackFonts);
additionalTempWidth = textWidth(renderText, lastSpace, m_current.offset() - lastSpace, font, m_width.currentWidth(), isFixedPitch, m_collapseWhiteSpace, &wordMeasurement.fallbackFonts);
wordMeasurement.width = additionalTempWidth + wordSpacingForWordMeasurement;
additionalTempWidth += lastSpaceWordSpacing;
m_width.addUncommittedWidth(additionalTempWidth);
if (m_collapseWhiteSpace && previousCharacterIsSpace && m_currentCharacterIsSpace && additionalTempWidth)
m_width.setTrailingWhitespaceWidth(additionalTempWidth);
wordMeasurement.width = additionalTmpW + wordSpacingForWordMeasurement;
additionalTmpW += lastSpaceWordSpacing;
m_width.addUncommittedWidth(additionalTmpW);
if (!m_appliedStartWidth) {
m_width.addUncommittedWidth(inlineLogicalWidth(m_current.object(), true, false).toFloat());
m_appliedStartWidth = true;
......@@ -703,7 +707,7 @@ inline bool BreakingContext::handleText(WordMeasurements& wordMeasurements, bool
}
} else {
if (!betweenWords || (midWordBreak && !m_autoWrap))
m_width.addUncommittedWidth(-additionalTmpW);
m_width.addUncommittedWidth(-additionalTempWidth);
if (hyphenWidth) {
// Subtract the width of the soft hyphen out since we fit on a line.
m_width.addUncommittedWidth(-hyphenWidth);
......@@ -799,12 +803,18 @@ inline bool BreakingContext::handleText(WordMeasurements& wordMeasurements, bool
wordMeasurement.renderer = renderText;
// IMPORTANT: current.m_pos is > length here!
float additionalTmpW = m_ignoringSpaces ? 0 : textWidth(renderText, lastSpace, m_current.offset() - lastSpace, font, m_width.currentWidth(), isFixedPitch, m_collapseWhiteSpace, &wordMeasurement.fallbackFonts);
float additionalTempWidth = m_ignoringSpaces ? 0 : textWidth(renderText, lastSpace, m_current.offset() - lastSpace, font, m_width.currentWidth(), isFixedPitch, m_collapseWhiteSpace, &wordMeasurement.fallbackFonts);
wordMeasurement.startOffset = lastSpace;
wordMeasurement.endOffset = m_current.offset();
wordMeasurement.width = m_ignoringSpaces ? 0 : additionalTmpW + wordSpacingForWordMeasurement;
additionalTmpW += lastSpaceWordSpacing;
m_width.addUncommittedWidth(additionalTmpW + inlineLogicalWidth(m_current.object(), !m_appliedStartWidth, m_includeEndWidth));
wordMeasurement.width = m_ignoringSpaces ? 0 : additionalTempWidth + wordSpacingForWordMeasurement;
additionalTempWidth += lastSpaceWordSpacing;
LayoutUnit inlineLogicalTempWidth = inlineLogicalWidth(m_current.object(), !m_appliedStartWidth, m_includeEndWidth);
m_width.addUncommittedWidth(additionalTempWidth + inlineLogicalTempWidth);
if (m_collapseWhiteSpace && m_currentCharacterIsSpace && additionalTempWidth)
m_width.setTrailingWhitespaceWidth(additionalTempWidth + inlineLogicalTempWidth);
m_includeEndWidth = false;
if (!m_width.fitsOnLine()) {
......
third_party/WebKit/Source/core/rendering/line/LineWidth.cpp
View file @ 5e30cead
......@@ -40,6 +40,7 @@ LineWidth::LineWidth(RenderBlockFlow& block, bool isFirstLine, IndentTextOrNot s
, m_uncommittedWidth(0)
, m_committedWidth(0)
, m_overhangWidth(0)
, m_trailingWhitespaceWidth(0)
, m_left(0)
, m_right(0)
, m_availableWidth(0)
......
third_party/WebKit/Source/core/rendering/line/LineWidth.h
View file @ 5e30cead
......@@ -40,6 +40,7 @@ class RenderRubyRun;
class RenderBlockFlow;
enum IndentTextOrNot { DoNotIndentText, IndentText };
enum WhitespaceTreatment { ExcludeWhitespace, IncludeWhitespace };
class LineWidth {
public:
......@@ -47,12 +48,17 @@ public:
bool fitsOnLine() const { return currentWidth() <= (m_availableWidth + LayoutUnit::epsilon()); }
bool fitsOnLine(float extra) const { return currentWidth() + extra <= (m_availableWidth + LayoutUnit::epsilon()); }
bool fitsOnLine(float extra, WhitespaceTreatment whitespaceTreatment) const
{
return currentWidth() - (whitespaceTreatment == ExcludeWhitespace ? trailingWhitespaceWidth() : 0) + extra <= (m_availableWidth + LayoutUnit::epsilon());
}
float currentWidth() const { return m_committedWidth + m_uncommittedWidth; }
// FIXME: We should eventually replace these three functions by ones that work on a higher abstraction.
float uncommittedWidth() const { return m_uncommittedWidth; }
float committedWidth() const { return m_committedWidth; }
float availableWidth() const { return m_availableWidth; }
float trailingWhitespaceWidth() const { return m_trailingWhitespaceWidth; }
void updateAvailableWidth(LayoutUnit minimumHeight = 0);
void shrinkAvailableWidthForNewFloatIfNeeded(FloatingObject*);
......@@ -60,6 +66,7 @@ public:
void commit();
void applyOverhang(RenderRubyRun*, RenderObject* startRenderer, RenderObject* endRenderer);
void fitBelowFloats(bool isFirstLine = false);
void setTrailingWhitespaceWidth(float width) { m_trailingWhitespaceWidth = width; }
bool shouldIndentText() const { return m_shouldIndentText == IndentText; }
......@@ -72,6 +79,7 @@ private:
float m_uncommittedWidth;
float m_committedWidth;
float m_overhangWidth; // The amount by which |m_availableWidth| has been inflated to account for possible contraction due to ruby overhang.
float m_trailingWhitespaceWidth;
float m_left;
float m_right;
float m_availableWidth;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment