- Revision
- 286654
- Author
- [email protected]
- Date
- 2021-12-08 07:34:07 -0800 (Wed, 08 Dec 2021)
Log Message
[css-flexbox] `gap` does not work correctly when `flex-direction: column-reverse` is applied
https://bugs.webkit.org/show_bug.cgi?id=225278
Source/WebCore:
rdar://problem/77708991
Patch by Vitaly Dyachkov <[email protected]> on 2021-12-08
Reviewed by Sergio Villar Senin.
Whenever flex-direction: column-reverse is specified flexbox does always compute the flex item sizes and positions
ignoring the -reverse direction until the very end. After completing the computations we just need to swap offsets
to get the reversed positions. The code was properly considering space between items added by content justification
but it was not adding gaps. Fixed it by adding the gap size to the flex items' offsets.
Test: imported/w3c/web-platform-tests/css/css-flexbox/column-reverse-gap.html
* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
(WebCore::RenderFlexibleBox::layoutColumnReverse):
* rendering/RenderFlexibleBox.h:
LayoutTests:
Patch by Vitaly Dyachkov <[email protected]> on 2021-12-08
Reviewed by Sergio Villar Senin.
* imported/w3c/web-platform-tests/css/css-flexbox/column-reverse-gap-expected.txt: Added.
* imported/w3c/web-platform-tests/css/css-flexbox/column-reverse-gap.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (286653 => 286654)
--- trunk/LayoutTests/ChangeLog 2021-12-08 15:31:39 UTC (rev 286653)
+++ trunk/LayoutTests/ChangeLog 2021-12-08 15:34:07 UTC (rev 286654)
@@ -1,3 +1,13 @@
+2021-12-08 Vitaly Dyachkov <[email protected]>
+
+ [css-flexbox] `gap` does not work correctly when `flex-direction: column-reverse` is applied
+ https://bugs.webkit.org/show_bug.cgi?id=225278
+
+ Reviewed by Sergio Villar Senin.
+
+ * imported/w3c/web-platform-tests/css/css-flexbox/column-reverse-gap-expected.txt: Added.
+ * imported/w3c/web-platform-tests/css/css-flexbox/column-reverse-gap.html: Added.
+
2021-12-08 Antoine Quint <[email protected]>
'border-radius shorthand is getting expanded in WebKit
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/column-reverse-gap-expected.txt (0 => 286654)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/column-reverse-gap-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/column-reverse-gap-expected.txt 2021-12-08 15:34:07 UTC (rev 286654)
@@ -0,0 +1,3 @@
+
+PASS .flexbox 1
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/column-reverse-gap.html (0 => 286654)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/column-reverse-gap.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/column-reverse-gap.html 2021-12-08 15:34:07 UTC (rev 286654)
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<link rel="help" href=""
+<link rel="help" href=""
+<style>
+ .flexbox {
+ display: flex;
+ flex-direction: column-reverse;
+ gap: 5px;
+ position: relative;
+ background-color: blue;
+ }
+ .flexbox > * {
+ height: 10px;
+ background-color: green;
+ }
+</style>
+<script src=""
+<script src=""
+<script src=""
+<body _onload_="checkLayout('.flexbox')">
+<div id=log></div>
+<div class="flexbox" data-expected-height="40">
+ <div data-offset-y="30"></div>
+ <div data-offset-y="15"></div>
+ <div data-offset-y="0"></div>
+</div>
+</body>
Modified: trunk/Source/WebCore/ChangeLog (286653 => 286654)
--- trunk/Source/WebCore/ChangeLog 2021-12-08 15:31:39 UTC (rev 286653)
+++ trunk/Source/WebCore/ChangeLog 2021-12-08 15:34:07 UTC (rev 286654)
@@ -1,3 +1,23 @@
+2021-12-08 Vitaly Dyachkov <[email protected]>
+
+ [css-flexbox] `gap` does not work correctly when `flex-direction: column-reverse` is applied
+ https://bugs.webkit.org/show_bug.cgi?id=225278
+ rdar://problem/77708991
+
+ Reviewed by Sergio Villar Senin.
+
+ Whenever flex-direction: column-reverse is specified flexbox does always compute the flex item sizes and positions
+ ignoring the -reverse direction until the very end. After completing the computations we just need to swap offsets
+ to get the reversed positions. The code was properly considering space between items added by content justification
+ but it was not adding gaps. Fixed it by adding the gap size to the flex items' offsets.
+
+ Test: imported/w3c/web-platform-tests/css/css-flexbox/column-reverse-gap.html
+
+ * rendering/RenderFlexibleBox.cpp:
+ (WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
+ (WebCore::RenderFlexibleBox::layoutColumnReverse):
+ * rendering/RenderFlexibleBox.h:
+
2021-12-08 Lauro Moura <[email protected]>
REGRESSION(r286603) [GTK][WPE] WebGL broken after the ANGLE update.
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (286653 => 286654)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2021-12-08 15:31:39 UTC (rev 286653)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2021-12-08 15:34:07 UTC (rev 286654)
@@ -2023,7 +2023,7 @@
// items since the start depends on the height of the flexbox, which we
// only know after we've positioned all the flex items.
updateLogicalHeight();
- layoutColumnReverse(children, crossAxisOffset, availableFreeSpace);
+ layoutColumnReverse(children, crossAxisOffset, availableFreeSpace, gapBetweenItems);
}
if (m_numberOfInFlowChildrenOnFirstLine == -1)
@@ -2032,7 +2032,7 @@
crossAxisOffset += maxChildCrossAxisExtent;
}
-void RenderFlexibleBox::layoutColumnReverse(const Vector<FlexItem>& children, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace)
+void RenderFlexibleBox::layoutColumnReverse(const Vector<FlexItem>& children, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace, LayoutUnit gapBetweenItems)
{
// This is similar to the logic in layoutAndPlaceChildren, except we place
// the children starting from the end of the flexbox. We also don't need to
@@ -2049,7 +2049,11 @@
mainAxisOffset -= mainAxisExtentForChild(child) + flowAwareMarginEndForChild(child);
setFlowAwareLocationForChild(child, LayoutPoint(mainAxisOffset, crossAxisOffset + flowAwareMarginBeforeForChild(child)));
mainAxisOffset -= flowAwareMarginStartForChild(child);
- mainAxisOffset -= justifyContentSpaceBetweenChildren(availableFreeSpace, distribution, children.size());
+
+ if (i != children.size() - 1) {
+ // The last item does not get extra space added.
+ mainAxisOffset -= justifyContentSpaceBetweenChildren(availableFreeSpace, distribution, children.size()) + gapBetweenItems;
+ }
}
}
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.h (286653 => 286654)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2021-12-08 15:31:39 UTC (rev 286653)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2021-12-08 15:34:07 UTC (rev 286654)
@@ -189,7 +189,7 @@
void setOverridingMainSizeForChild(RenderBox&, LayoutUnit);
void prepareChildForPositionedLayout(RenderBox& child);
void layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, Vector<FlexItem>&, LayoutUnit availableFreeSpace, bool relayoutChildren, Vector<LineContext>&, LayoutUnit gapBetweenItems);
- void layoutColumnReverse(const Vector<FlexItem>&, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace);
+ void layoutColumnReverse(const Vector<FlexItem>&, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace, LayoutUnit gapBetweenItems);
void alignFlexLines(Vector<LineContext>&, LayoutUnit gapBetweenLines);
void alignChildren(const Vector<LineContext>&);
void applyStretchAlignmentToChild(RenderBox& child, LayoutUnit lineCrossAxisExtent);
