Bug 1579565 Part 2 - Skip block-end side if the frame has a column-span sibling. r=dbaron

Also, clean up the wording and variable names when aReflowInput is used.

Differential Revision: https://phabricator.services.mozilla.com/D47676

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Ting-Yu Lin 2019-10-03 17:26:06 +00:00
parent f0e7225497
commit 3aa390f805
4 changed files with 111 additions and 9 deletions

View File

@ -227,16 +227,15 @@ nsIFrame::LogicalSides nsSplittableFrame::GetLogicalSkipSides(
if (aReflowInput) {
// We're in the midst of reflow right now, so it's possible that we haven't
// created a nif yet. If our content height is going to exceed our available
// height, though, then we're going to need a next-in-flow, it just hasn't
// been created yet.
// created a next-in-flow yet. If our content block-size is going to exceed
// our available block-size, though, then we're going to need a
// next-in-flow, it just hasn't been created yet.
if (NS_UNCONSTRAINEDSIZE != aReflowInput->AvailableBSize()) {
nscoord effectiveCH = this->GetEffectiveComputedBSize(*aReflowInput);
if (effectiveCH != NS_UNCONSTRAINEDSIZE &&
effectiveCH > aReflowInput->AvailableBSize()) {
// Our content height is going to exceed our available height, so we're
// going to need a next-in-flow.
nscoord effectiveBSize = GetEffectiveComputedBSize(*aReflowInput);
if (effectiveBSize != NS_UNCONSTRAINEDSIZE &&
effectiveBSize > aReflowInput->AvailableBSize()) {
// Our computed block-size is going to exceed our available block-size,
// so we're going to need a next-in-flow.
skip |= eLogicalSideBitsBEnd;
}
}
@ -247,6 +246,12 @@ nsIFrame::LogicalSides nsSplittableFrame::GetLogicalSkipSides(
}
}
// Always skip block-end side if we have a *later* sibling across column-span
// split.
if (HasColumnSpanSiblings()) {
skip |= eLogicalSideBitsBEnd;
}
return skip;
}

View File

@ -0,0 +1,2 @@
[multicol-span-all-children-height-008.html]
prefs: [layout.css.column-span.enabled:true]

View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Test the borders drawing for a block split by column-span</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<style>
article {
column-count: 1;
column-fill: auto;
width: 200px;
background-color: lightgreen;
}
div.container {
height: auto;
background-color: pink;
border: 20px solid purple;
}
div.block {
width: 100px;
height: 100px;
background-color: yellow;
}
div.column-span {
width: 200px;
height: 50px;
background-color: lightblue;
}
</style>
<article>
<div class="container" style="border-bottom: 0;">
<div class="block">block1</div>
</div>
</article>
<div class="column-span">column-span1</div>
<article>
<div class="container" style="border-top: 0; border-bottom: 0;">
<div class="block">block2</div>
</div>
</article>
<div class="column-span">column-span2</div>
<article>
<div class="container" style="border-top: 0;">
<div class="block">block3</div>
</div>
</article>
</html>

View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test the borders drawing for a block split by column-span</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
<link rel="match" href="multicol-span-all-children-height-008-ref.html">
<meta name="assert" content="This test verifies that the borders of block container with an auto block-size, split by column-span, are skipped on the sides adjacent to column-span.">
<!-- This test is adapted from multicol-span-all-children-height-005. -->
<style>
article {
column-count: 1;
column-fill: auto;
width: 200px;
background-color: lightgreen;
}
div.container {
height: auto;
border: 20px solid purple;
background-color: pink;
}
div.block {
width: 100px;
height: 100px;
background-color: yellow;
}
div.column-span {
column-span: all;
height: 50px;
background-color: lightblue;
}
</style>
<article>
<div class="container">
<div class="block">block1</div>
<div class="column-span">column-span1</div>
<div class="block">block2</div>
<div class="column-span">column-span2</div>
<div class="block">block3</div>
</div>
</article>
</html>