Bug 1473044 - Make flexbox cross size take row/column gap into account.
MozReview-Commit-ID: 47BNLZOA79W
--- a/layout/generic/nsFlexContainerFrame.cpp
+++ b/layout/generic/nsFlexContainerFrame.cpp
@@ -4723,16 +4723,18 @@ nsFlexContainerFrame::DoFlexLayout(nsPre
&containerInfo->mLines[lineIndex] :
nullptr;
line->ResolveFlexibleLengths(aContentBoxMainSize, lineInfo);
}
// Cross Size Determination - Flexbox spec section 9.4
// ===================================================
// Calculate the hypothetical cross size of each item:
+
+ // 'sumLineCrossSizes' includes the size of all gaps between lines
nscoord sumLineCrossSizes = 0;
for (FlexLine* line = lines.getFirst(); line; line = line->getNext()) {
for (FlexItem* item = line->GetFirstItem(); item; item = item->getNext()) {
// The item may already have the correct cross-size; only recalculate
// if the item's main size resolution (flexing) could have influenced it:
if (item->CanMainSizeInfluenceCrossSize(aAxisTracker)) {
Maybe<AutoFlexItemMainSizeOverride> sizeOverride;
if (item->HasIntrinsicRatio()) {
@@ -4762,16 +4764,21 @@ nsFlexContainerFrame::DoFlexLayout(nsPre
SizeItemInCrossAxis(aPresContext, aAxisTracker,
childReflowInput, *item);
}
}
// Now that we've finished with this line's items, size the line itself:
line->ComputeCrossSizeAndBaseline(aAxisTracker);
sumLineCrossSizes += line->GetLineCrossSize();
+
+ // Add the cross axis gap space if this is not the last line
+ if (line->getNext()) {
+ sumLineCrossSizes += aCrossGapSize;
+ }
}
bool isCrossSizeDefinite;
const nscoord contentBoxCrossSize =
ComputeCrossSize(aReflowInput, aAxisTracker, sumLineCrossSizes,
aAvailableBSizeForContent, &isCrossSizeDefinite, aStatus);
// Set up state for cross-axis alignment, at a high level (outside the
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-003-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0
+-->
+<html>
+<head>
+ <title>Reference: Testing cross size computation with row and column gaps in horizontal multi-line flex containers</title>
+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com">
+ <meta charset="utf-8">
+</html>
+ <style>
+ .flexContainer {
+ display: flex;
+ border: 1px solid black;
+ column-gap: 20px;
+ row-gap: 40px;
+ align-content: space-around;
+ justify-content: space-around;
+ }
+ .rowWrap {
+ flex-flow: row wrap;
+ }
+ .item {
+ border: 1px solid blue;
+ background: lightblue;
+ width: 28px;
+ height: 28px;
+ }
+ .autoLBMargins {
+ margin-left: auto;
+ margin-bottom: auto;
+ }
+ .w200 {
+ width: 200px;
+ }
+ .h100 {
+ height: 100px;
+ }
+ .h90 {
+ height: 90px;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexContainer rowWrap w200 h100">
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item autoLBMargins"></div>
+ <div class="item"></div>
+ </div>
+ <div class="flexContainer rowWrap w200 h90">
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item autoLBMargins"></div>
+ <div class="item"></div>
+ </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-003.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0
+-->
+<html>
+<head>
+ <title>CSS Test: Testing cross size computation with row and column gaps in horizontal multi-line flex containers</title>
+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com">
+ <link rel="help" href="https://drafts.csswg.org/css-align/#gap-flex">
+ <link rel="match" href="flexbox-column-row-gap-003-ref.html">
+ <meta charset="utf-8">
+ <style>
+ .flexContainer {
+ display: flex;
+ border: 1px solid black;
+ column-gap: 20px;
+ row-gap: 40px;
+ align-content: space-around;
+ justify-content: space-around;
+ }
+ .rowWrap {
+ flex-flow: row wrap;
+ }
+ .item {
+ border: 1px solid blue;
+ background: lightblue;
+ width: 28px;
+ height: 28px;
+ }
+ .autoLBMargins {
+ margin-left: auto;
+ margin-bottom: auto;
+ }
+ .w200 {
+ width: 200px;
+ }
+ .hclamp {
+ max-height: 90px;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexContainer rowWrap w200">
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item autoLBMargins"></div>
+ <div class="item"></div>
+ </div>
+ <div class="flexContainer rowWrap w200 hclamp">
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item autoLBMargins"></div>
+ <div class="item"></div>
+ </div>
+</body>
+</html>
--- a/layout/reftests/w3c-css/submitted/flexbox/reftest.list
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
@@ -96,16 +96,17 @@ fuzzy-if(Android,158,32) == flexbox-alig
== flexbox-collapsed-item-baseline-001.html flexbox-collapsed-item-baseline-001-ref.html
== flexbox-collapsed-item-horiz-001.html flexbox-collapsed-item-horiz-001-ref.html
== flexbox-collapsed-item-horiz-002.html flexbox-collapsed-item-horiz-002-ref.html
== flexbox-collapsed-item-horiz-003.html flexbox-collapsed-item-horiz-003-ref.html
# Tests for "row gap" and "column gap"
== flexbox-column-row-gap-001.html flexbox-column-row-gap-001-ref.html
== flexbox-column-row-gap-002.html flexbox-column-row-gap-002-ref.html
+== flexbox-column-row-gap-003.html flexbox-column-row-gap-003-ref.html
# Tests for "flex-basis: content"
== flexbox-flex-basis-content-001a.html flexbox-flex-basis-content-001-ref.html
== flexbox-flex-basis-content-001b.html flexbox-flex-basis-content-001-ref.html
== flexbox-flex-basis-content-002a.html flexbox-flex-basis-content-002-ref.html
== flexbox-flex-basis-content-002b.html flexbox-flex-basis-content-002-ref.html
== flexbox-flex-basis-content-003a.html flexbox-flex-basis-content-003-ref.html
== flexbox-flex-basis-content-003b.html flexbox-flex-basis-content-003-ref.html
