Bug 1090031: Apply CSS 'align-content' in flex containers if they *could* wrap (rather than if they *have* wrapped). r=mats
The spec says that single-line flex containers should stretch their one flex
line to the flex container's cross size, and should ignore 'align-content'.
Initially, the spec defined 'single-line' to include any flex container that
happens to have only 1 line (even if it's got 'flex-wrap:wrap' or
'wrap-reverse'). But later, the term 'single-line' was intentionally redefined
to *only* include flex containers that have 'flex-wrap: nowrap'. So, instead
of checking the line-count, we should instead check 'flex-wrap', when deciding
whether to stretch our one line & ignore 'align-content'.
MozReview-Commit-ID: D2ZMIBS16ui
--- a/layout/generic/nsFlexContainerFrame.cpp
+++ b/layout/generic/nsFlexContainerFrame.cpp
@@ -2776,21 +2776,25 @@ CrossAxisPositionTracker::
// 'normal' behaves as 'stretch'
if (mAlignContent == NS_STYLE_ALIGN_NORMAL) {
mAlignContent = NS_STYLE_ALIGN_STRETCH;
}
// XXX strip of the <overflow-position> bit until we implement that
mAlignContent &= ~NS_STYLE_ALIGN_FLAG_BITS;
- if (!aFirstLine->getNext()) {
+ const bool isSingleLine =
+ NS_STYLE_FLEX_WRAP_NOWRAP == aReflowInput.mStylePosition->mFlexWrap;
+ if (isSingleLine) {
+ MOZ_ASSERT(!aFirstLine->getNext(),
+ "If we're styled as single-line, we should only have 1 line");
// "If the flex container is single-line and has a definite cross size, the
// cross size of the flex line is the flex container's inner cross size."
//
- // SOURCE: http://dev.w3.org/csswg/css-flexbox/#algo-line-break
+ // SOURCE: https://drafts.csswg.org/css-flexbox/#algo-cross-line
// NOTE: This means (by definition) that there's no packing space, which
// means we don't need to be concerned with "align-conent" at all and we
// can return early. This is handy, because this is the usual case (for
// single-line flexbox).
if (aIsCrossSizeDefinite) {
aFirstLine->SetLineCrossSize(aContentBoxCrossSize);
return;
}
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001-ref.xhtml
@@ -66,31 +66,31 @@
<div class="flexbox">
<div class="a"/>
<div class="b"><div class="fixedSizeChild"/></div>
<div class="c"/>
</div>
<!-- flex-end -->
<div class="flexbox">
- <div class="a"/>
+ <div class="a" style="margin-top: 190px"/>
</div>
<div class="flexbox">
<div class="a" style="margin-top: 160px"/>
<div class="b"><div class="fixedSizeChild"/></div>
</div>
<div class="flexbox">
<div class="a" style="margin-top: 120px"/>
<div class="b"><div class="fixedSizeChild"/></div>
<div class="c"/>
</div>
<!-- center -->
<div class="flexbox">
- <div class="a"/>
+ <div class="a" style="margin-top: 95px"/>
</div>
<div class="flexbox">
<div class="a" style="margin-top: 80px"/>
<div class="b"><div class="fixedSizeChild"/></div>
</div>
<div class="flexbox">
<div class="a" style="margin-top: 60px"/>
<div class="b"><div class="fixedSizeChild"/></div>
@@ -108,17 +108,17 @@
<div class="flexbox">
<div class="a"/>
<div class="b" style="margin-top: 60px"><div class="fixedSizeChild"/></div>
<div class="c" style="margin-top: 60px"/>
</div>
<!-- space-around -->
<div class="flexbox">
- <div class="a"/>
+ <div class="a" style="margin-top: 95px"/>
</div>
<div class="flexbox">
<div class="a" style="margin-top: 40px"/>
<div class="b" style="margin-top: 80px"><div class="fixedSizeChild"/></div>
</div>
<div class="flexbox">
<div class="a" style="margin-top: 20px"/>
<div class="b" style="margin-top: 40px"><div class="fixedSizeChild"/></div>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001-ref.xhtml
@@ -69,31 +69,31 @@
<div class="flexbox">
<div class="a"/>
<div class="b"><div class="fixedSizeChild"/></div>
<div class="c"/>
</div>
<!-- flex-end -->
<div class="flexbox">
- <div class="a"/>
+ <div class="a" style="margin-left: 190px"/>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 160px"/>
<div class="b"><div class="fixedSizeChild"/></div>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 120px"/>
<div class="b"><div class="fixedSizeChild"/></div>
<div class="c"/>
</div>
<!-- center -->
<div class="flexbox">
- <div class="a"/>
+ <div class="a" style="margin-left: 95px"/>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 80px"/>
<div class="b"><div class="fixedSizeChild"/></div>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 60px"/>
<div class="b"><div class="fixedSizeChild"/></div>
@@ -111,17 +111,17 @@
<div class="flexbox">
<div class="a"/>
<div class="b" style="margin-left: 60px"><div class="fixedSizeChild"/></div>
<div class="c" style="margin-left: 60px"/>
</div>
<!-- space-around -->
<div class="flexbox">
- <div class="a"/>
+ <div class="a" style="margin-left: 95px"/>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 40px"/>
<div class="b" style="margin-left: 80px"><div class="fixedSizeChild"/></div>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 20px"/>
<div class="b" style="margin-left: 40px"><div class="fixedSizeChild"/></div>
@@ -139,17 +139,17 @@
<div class="flexbox">
<div class="a"/>
<div class="b"><div class="fixedSizeChild"/></div>
<div class="c"/>
</div>
<!-- right -->
<div class="flexbox">
- <div class="a"/>
+ <div class="a" style="margin-left: 190px"/>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 160px"/>
<div class="b"><div class="fixedSizeChild"/></div>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 120px"/>
<div class="b"><div class="fixedSizeChild"/></div>