Skip to content

GitLab

T
tangled
Commit 67aa2c21 authored by rob.buis's avatar rob.buis Committed by Commit bot
Browse files
Options

[CSS Shapes] Properly shrink boxes to avoid shape-outside 

To determine how much an box needs to shink to avoid a float, the code
was only taking into account the first line of the box. This doesn't
work when the float has a shape, as it can make it seem like there is
more space on the line than there actually is. This patch changes the
calculations to take into account the entire height of the box that
needs to be shrunk, and thus computes the correct amount of space
available.

This is a merge of http://trac.webkit.org/changeset/178045 and
http://trac.webkit.org/changeset/178064 by Bem Jones-Bey <bjonesbe@adobe.com>.

BUG=427989

Review-Url: https://codereview.chromium.org/2380813002
Cr-Commit-Position: refs/heads/master@{#422782}
parent 4c156f72
Hide whitespace changes
Inline Side-by-side
Showing with 251 additions and 9 deletions
third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-overflow-hidden-expected.html 0 → 100644
View file @ 67aa2c21
<!doctype html>
<html>
<head>
<style>
.logo {
width: 6em;
height: 6em;
background-color: gray;
float: left;
}
p { overflow: hidden; }
</style>
</head>
<body>
<div class="logo"></div>
<p>This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box.</p>
</body>
</html>
third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-overflow-hidden-left-margin-expected.html 0 → 100644
View file @ 67aa2c21
<!doctype html>
<html>
<head>
<style>
.logo {
width: 6em;
height: 6em;
background-color: gray;
float: left;
}
p { overflow: hidden; margin-left: 3em; }
</style>
</head>
<body>
<div class="logo"></div>
<p>This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box.</p>
</body>
</html>
third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-overflow-hidden-left-margin-vertical-expected.html 0 → 100644
View file @ 67aa2c21
<!doctype html>
<html>
<head>
<style>
body {
-webkit-writing-mode: vertical-rl;
}
.logo {
width: 6em;
height: 6em;
background-color: gray;
float: left;
}
p { overflow: hidden; margin-top: 3em; }
</style>
</head>
<body>
<div class="logo"></div>
<p>This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box.</p>
</body>
</html>
third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-overflow-hidden-left-margin-vertical.html 0 → 100644
View file @ 67aa2c21
<!doctype html>
<html>
<head>
<style>
body {
-webkit-writing-mode: vertical-rl;
}
.logo {
width: 6em;
height: 6em;
background-color: gray;
float: left;
shape-outside: inset(0px 1em 0px 0px);
}
p { overflow: hidden; margin-top: 3em; }
</style>
</head>
<body>
<div class="logo"></div>
<p>This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box.</p>
</body>
</html>
third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-overflow-hidden-left-margin.html 0 → 100644
View file @ 67aa2c21
<!doctype html>
<html>
<head>
<style>
.logo {
width: 6em;
height: 6em;
background-color: gray;
float: left;
shape-outside: inset(1em 0px 0px 0px);
}
p { overflow: hidden; margin-left: 3em; }
</style>
</head>
<body>
<div class="logo"></div>
<p>This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box.</p>
</body>
</html>
third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-overflow-hidden-right-margin-expected.html 0 → 100644
View file @ 67aa2c21
<!doctype html>
<html>
<head>
<style>
.logo {
width: 6em;
height: 6em;
background-color: gray;
float: right;
}
p { overflow: hidden; margin-right: 3em; }
</style>
</head>
<body>
<div class="logo"></div>
<p>This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box.</p>
</body>
</html>
third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-overflow-hidden-right-margin-vertical-expected.html 0 → 100644
View file @ 67aa2c21
<!doctype html>
<html>
<head>
<style>
body {
-webkit-writing-mode: vertical-rl;
}
.logo {
width: 6em;
height: 6em;
background-color: gray;
float: right;
}
p { overflow: hidden; margin-bottom: 3em; }
</style>
</head>
<body>
<div class="logo"></div>
<p>This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box.</p>
</body>
</html>
third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-overflow-hidden-right-margin-vertical.html 0 → 100644
View file @ 67aa2c21
<!doctype html>
<html>
<head>
<style>
body {
-webkit-writing-mode: vertical-rl;
}
.logo {
width: 6em;
height: 6em;
background-color: gray;
float: right;
shape-outside: inset(0px 1em 0px 0px);
}
p { overflow: hidden; margin-bottom: 3em; }
</style>
</head>
<body>
<div class="logo"></div>
<p>This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box.</p>
</body>
</html>
third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-overflow-hidden-right-margin.html 0 → 100644
View file @ 67aa2c21
<!doctype html>
<html>
<head>
<style>
.logo {
width: 6em;
height: 6em;
background-color: gray;
float: right;
shape-outside: inset(1em 0px 0px 0px);
}
p { overflow: hidden; margin-right: 3em; }
</style>
</head>
<body>
<div class="logo"></div>
<p>This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box.</p>
</body>
</html>
third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-overflow-hidden-vertical-expected.html 0 → 100644
View file @ 67aa2c21
<!doctype html>
<html>
<head>
<style>
body {
-webkit-writing-mode: vertical-rl;
}
.logo {
width: 6em;
height: 6em;
background-color: gray;
float: left;
}
p { overflow: hidden; }
</style>
</head>
<body>
<div class="logo"></div>
<p>This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box.</p>
</body>
</html>
third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-overflow-hidden-vertical.html 0 → 100644
View file @ 67aa2c21
<!doctype html>
<html>
<head>
<style>
body {
-webkit-writing-mode: vertical-rl;
}
.logo {
width: 6em;
height: 6em;
background-color: gray;
float: left;
shape-outside: inset(0px 1em 0px 0px);
}
p { overflow: hidden; }
</style>
</head>
<body>
<div class="logo"></div>
<p>This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box.</p>
</body>
</html>
third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-overflow-hidden.html 0 → 100644
View file @ 67aa2c21
<!doctype html>
<html>
<head>
<style>
.logo {
width: 6em;
height: 6em;
background-color: gray;
float: left;
shape-outside: inset(1em 0px 0px 0px);
}
p { overflow: hidden; }
</style>
</head>
<body>
<div class="logo"></div>
<p>This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box. This paragraph should be next to the grey box.</p>
</body>
</html>
third_party/WebKit/Source/core/layout/LayoutBox.cpp
View file @ 67aa2c21
...@@ -1825,22 +1825,23 @@ LayoutUnit LayoutBox::shrinkLogicalWidthToAvoidFloats( ...@@ -1825,22 +1825,23 @@ LayoutUnit LayoutBox::shrinkLogicalWidthToAvoidFloats(
LayoutUnit logicalTopPosition = logicalTop(); LayoutUnit logicalTopPosition = logicalTop();
LayoutUnit startOffsetForContent = cb->startOffsetForContent(); LayoutUnit startOffsetForContent = cb->startOffsetForContent();
LayoutUnit endOffsetForContent = cb->endOffsetForContent(); LayoutUnit endOffsetForContent = cb->endOffsetForContent();
LayoutUnit startOffsetForLine = LayoutUnit logicalHeight = cb->logicalHeightForChild(*this);
cb->startOffsetForLine(logicalTopPosition, DoNotIndentText); LayoutUnit startOffsetForLine = cb->startOffsetForLine(
logicalTopPosition, DoNotIndentText, logicalHeight);
LayoutUnit endOffsetForLine = LayoutUnit endOffsetForLine =
cb->endOffsetForLine(logicalTopPosition, DoNotIndentText); cb->endOffsetForLine(logicalTopPosition, DoNotIndentText, logicalHeight);
// If there aren't any floats constraining us then allow the margins to shrink/expand the width as much as they want. // If there aren't any floats constraining us then allow the margins to shrink/expand the width as much as they want.
if (startOffsetForContent == startOffsetForLine && if (startOffsetForContent == startOffsetForLine &&
endOffsetForContent == endOffsetForLine) endOffsetForContent == endOffsetForLine)
return cb->availableLogicalWidthForLine(logicalTopPosition, return cb->availableLogicalWidthForLine(logicalTopPosition, DoNotIndentText,
DoNotIndentText) - logicalHeight) -
childMarginStart - childMarginEnd; childMarginStart - childMarginEnd;
LayoutUnit width = LayoutUnit width = cb->availableLogicalWidthForLine(
cb->availableLogicalWidthForLine(logicalTopPosition, DoNotIndentText) - logicalTopPosition, DoNotIndentText, logicalHeight) -
std::max(LayoutUnit(), childMarginStart) - std::max(LayoutUnit(), childMarginStart) -
std::max(LayoutUnit(), childMarginEnd); std::max(LayoutUnit(), childMarginEnd);
// We need to see if margins on either the start side or the end side can contain the floats in question. If they can, // We need to see if margins on either the start side or the end side can contain the floats in question. If they can,
// then just using the line width is inaccurate. In the case where a float completely fits, we don't need to use the line // then just using the line width is inaccurate. In the case where a float completely fits, we don't need to use the line
// offset at all, but can instead push all the way to the content edge of the containing block. In the case where the float // offset at all, but can instead push all the way to the content edge of the containing block. In the case where the float
......
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