Diff
Modified: trunk/LayoutTests/ChangeLog (287127 => 287128)
--- trunk/LayoutTests/ChangeLog 2021-12-16 10:52:35 UTC (rev 287127)
+++ trunk/LayoutTests/ChangeLog 2021-12-16 11:03:48 UTC (rev 287128)
@@ -1,3 +1,12 @@
+2021-12-16 Vitaly Dyachkov <obyknoven...@me.com>
+
+ Flexbox ignores margins of absolute positioned children when `align-items: flex-end` or `justify-content: flex-end`
+ https://bugs.webkit.org/show_bug.cgi?id=234143
+
+ Reviewed by Sergio Villar Senin.
+
+ * TestExpectations: Unksipped a flexbox test that is now passing.
+
2021-12-15 Alex Christensen <achristen...@webkit.org>
Remove unreachable code in Plugin and PluginController
Modified: trunk/LayoutTests/TestExpectations (287127 => 287128)
--- trunk/LayoutTests/TestExpectations 2021-12-16 10:52:35 UTC (rev 287127)
+++ trunk/LayoutTests/TestExpectations 2021-12-16 11:03:48 UTC (rev 287128)
@@ -4239,7 +4239,6 @@
# Static position alignment in Flexbox.
webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001.html [ ImageOnlyFailure ]
webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-content-001.html [ ImageOnlyFailure ]
-webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-002.html [ ImageOnlyFailure ]
# Tables as flex items.
webkit.org/b/221473 imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-min-height-1.html [ ImageOnlyFailure ]
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (287127 => 287128)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2021-12-16 10:52:35 UTC (rev 287127)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2021-12-16 11:03:48 UTC (rev 287128)
@@ -1,3 +1,15 @@
+2021-12-16 Vitaly Dyachkov <obyknoven...@me.com>
+
+ Flexbox ignores margins of absolute positioned children when `align-items: flex-end` or `justify-content: flex-end`
+ https://bugs.webkit.org/show_bug.cgi?id=234143
+
+ Reviewed by Sergio Villar Senin.
+
+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003-expected.html: Added.
+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003.html: Added.
+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-015-expected.txt: Replaced FAIL
+ by PASS expectations.
+
2021-12-16 Joonghun Park <jh718.p...@samsung.com>
Unreviewed. Import updated table-child-percentage-height-with-border-box-expected.html
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003-expected.html (0 => 287128)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003-expected.html 2021-12-16 11:03:48 UTC (rev 287128)
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Static position of abspos children in a row flex container, with various margins applied, and "align-items: flex-end" reference</title>
+<style>
+ .container {
+ display: block;
+ padding: 1px 2px;
+ border: 1px solid black;
+ background: yellow;
+ margin-bottom: 5px;
+ margin-right: 10px;
+ float: left; /* For testing in "rows" of containers */
+ }
+ br { clear: both }
+
+ .big > .container {
+ height: 14px;
+ width: 20px;
+ }
+ .small > .container {
+ height: 2px;
+ width: 4px;
+ }
+
+ .container > * {
+ background: teal;
+ height: 6px;
+ width: 8px;
+ }
+</style>
+<div class="big">
+ <!-- Margin just on one side: -->
+ <div class="container"><div style="margin: 8px 0 0 0"></div></div>
+ <div class="container"><div style="margin: 8px 0 0 0"></div></div>
+ <div class="container"><div style="margin: 5px 0 0 0"></div></div>
+ <div class="container"><div style="margin: 8px 0 0 3px"></div></div>
+ <!-- Margin on all sides: -->
+ <div class="container"><div style="margin: 5px 0 0 4px"></div></div>
+ <br>
+
+ <!-- "auto" margin on just one side (should be treated as 0): -->
+ <div class="container"><div style="margin: 8px 0 0 0"></div></div>
+ <div class="container"><div style="margin: 8px 0 0 0"></div></div>
+ <div class="container"><div style="margin: 8px 0 0 0"></div></div>
+ <div class="container"><div style="margin: 8px 0 0 0"></div></div>
+ <!-- "auto" margin on all sides (should be treated as 0): -->
+ <div class="container"><div style="margin: 8px 0 0 0"></div></div>
+ <br>
+</div>
+<div class="small">
+ <!-- Margin just on one side: -->
+ <div class="container"><div style="margin: -4px 0 0 0"></div></div>
+ <div class="container"><div style="margin: -4px 0 0 0"></div></div>
+ <div class="container"><div style="margin: -7px 0 0 0"></div></div>
+ <div class="container"><div style="margin: -4px 0 0 3px"></div></div>
+ <!-- Margin on all sides: -->
+ <div class="container"><div style="margin: -7px 0 0 4px"></div></div>
+ <br>
+
+ <!-- "auto" margin on just one side (should be treated as 0): -->
+ <div class="container"><div style="margin: -4px 0 0 0"></div></div>
+ <div class="container"><div style="margin: -4px 0 0 0"></div></div>
+ <div class="container"><div style="margin: -4px 0 0 0"></div></div>
+ <div class="container"><div style="margin: -4px 0 0 0"></div></div>
+ <!-- "auto" margin on all sides (should be treated as 0): -->
+ <div class="container"><div style="margin: -4px 0 0 0"></div></div>
+ <br>
+</div>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003.html (0 => 287128)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003.html 2021-12-16 11:03:48 UTC (rev 287128)
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Static position of abspos children in a row flex container, with various margins applied, and "align-items: flex-end"</title>
+<link rel="author" title="Vitaly Dyachkov" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<style>
+ .container {
+ display: flex;
+ flex-flow: row;
+ align-items: flex-end;
+ padding: 1px 2px;
+ border: 1px solid black;
+ background: yellow;
+ margin-bottom: 5px;
+ margin-right: 10px;
+ float: left; /* For testing in "rows" of containers */
+ }
+ br { clear: both }
+
+ .big > .container {
+ height: 14px;
+ width: 20px;
+ }
+ .small > .container {
+ height: 2px;
+ width: 4px;
+ }
+
+ .container > * {
+ position: absolute;
+ background: teal;
+ height: 6px;
+ width: 8px;
+ }
+</style>
+<div class="big">
+ <!-- Margin just on one side: -->
+ <div class="container"><div style="margin-top: 3px"></div></div>
+ <div class="container"><div style="margin-right: 3px"></div></div>
+ <div class="container"><div style="margin-bottom: 3px"></div></div>
+ <div class="container"><div style="margin-left: 3px"></div></div>
+ <!-- Margin on all sides: -->
+ <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div>
+ <br>
+
+ <!-- "auto" margin on just one side (should be treated as 0): -->
+ <div class="container"><div style="margin-top: auto"></div></div>
+ <div class="container"><div style="margin-right: auto"></div></div>
+ <div class="container"><div style="margin-bottom: auto"></div></div>
+ <div class="container"><div style="margin-left: auto"></div></div>
+ <!-- "auto" margin on all sides (should be treated as 0): -->
+ <div class="container"><div style="margin: auto"></div></div>
+ <br>
+</div>
+<div class="small">
+ <!-- Margin just on one side: -->
+ <div class="container"><div style="margin-top: 3px"></div></div>
+ <div class="container"><div style="margin-right: 3px"></div></div>
+ <div class="container"><div style="margin-bottom: 3px"></div></div>
+ <div class="container"><div style="margin-left: 3px"></div></div>
+ <!-- Margin on all sides: -->
+ <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div>
+ <br>
+
+ <!-- "auto" margin on just one side (should be treated as 0): -->
+ <div class="container"><div style="margin-top: auto"></div></div>
+ <div class="container"><div style="margin-right: auto"></div></div>
+ <div class="container"><div style="margin-bottom: auto"></div></div>
+ <div class="container"><div style="margin-left: auto"></div></div>
+ <!-- "auto" margin on all sides (should be treated as 0): -->
+ <div class="container"><div style="margin: auto"></div></div>
+ <br>
+</div>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-015-expected.txt (287127 => 287128)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-015-expected.txt 2021-12-16 10:52:35 UTC (rev 287127)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-015-expected.txt 2021-12-16 11:03:48 UTC (rev 287128)
@@ -1,5 +1,3 @@
-FAIL #abspos 1 assert_equals:
-<div style="background: cyan; margin: 20px; position: absolute; width: 30px; height: 40px;" data-offset-x="150" id="abspos"></div>
-offsetLeft expected 150 but got 190
+PASS #abspos 1
Modified: trunk/Source/WebCore/ChangeLog (287127 => 287128)
--- trunk/Source/WebCore/ChangeLog 2021-12-16 10:52:35 UTC (rev 287127)
+++ trunk/Source/WebCore/ChangeLog 2021-12-16 11:03:48 UTC (rev 287128)
@@ -1,3 +1,21 @@
+2021-12-16 Vitaly Dyachkov <obyknoven...@me.com>
+
+ Flexbox ignores margins of absolute positioned children when `align-items: flex-end` or `justify-content: flex-end`
+ https://bugs.webkit.org/show_bug.cgi?id=234143
+
+ Reviewed by Sergio Villar Senin.
+
+ When flexbox layouts its children every absolutely-positioned child is processed separately from regular flex items as it were the sole flex item.
+ Absolutely-positioned can be both main- and cross-axis aligned. To correctly align it we first must calculate available space for it.
+ To do that the code was correctly subtracting the size of the item from the size of the container but was not subtracting the margins.
+ Fixed by including the margins into available size calculation.
+
+ Test: imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003.html
+
+ * rendering/RenderFlexibleBox.cpp:
+ (WebCore::RenderFlexibleBox::mainAxisMarginExtentForChild const):
+ (WebCore::RenderFlexibleBox::staticMainAxisPositionForPositionedChild):
+
2021-12-15 Andres Gonzalez <andresg...@apple.com>
Fix for crash in AXIsolatedObject::textMarkerRangeForNSRange.
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (287127 => 287128)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2021-12-16 10:52:35 UTC (rev 287127)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2021-12-16 11:03:48 UTC (rev 287128)
@@ -823,6 +823,20 @@
return marginTop();
}
+LayoutUnit RenderFlexibleBox::mainAxisMarginExtentForChild(const RenderBox& child) const
+{
+ if (!child.needsLayout())
+ return isHorizontalFlow() ? child.horizontalMarginExtent() : child.verticalMarginExtent();
+
+ LayoutUnit marginStart;
+ LayoutUnit marginEnd;
+ if (isHorizontalFlow())
+ child.computeInlineDirectionMargins(*this, child.containingBlockLogicalWidthForContentInFragment(nullptr), child.logicalWidth(), marginStart, marginEnd);
+ else
+ child.computeBlockDirectionMargins(*this, marginStart, marginEnd);
+ return marginStart + marginEnd;
+}
+
LayoutUnit RenderFlexibleBox::crossAxisMarginExtentForChild(const RenderBox& child) const
{
if (!child.needsLayout())
@@ -1673,7 +1687,8 @@
LayoutUnit RenderFlexibleBox::staticMainAxisPositionForPositionedChild(const RenderBox& child)
{
- const LayoutUnit availableSpace = mainAxisContentExtent(contentLogicalHeight()) - mainAxisExtentForChild(child);
+ auto childMainExtent = mainAxisMarginExtentForChild(child) + mainAxisExtentForChild(child);
+ auto availableSpace = mainAxisContentExtent(contentLogicalHeight()) - childMainExtent;
auto isReverse = isColumnOrRowReverse();
LayoutUnit offset = initialJustifyContentOffset(style(), availableSpace, 1, isReverse);
if (isReverse)
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.h (287127 => 287128)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2021-12-16 10:52:35 UTC (rev 287127)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2021-12-16 11:03:48 UTC (rev 287128)
@@ -140,6 +140,7 @@
LayoutUnit flowAwareMarginEndForChild(const RenderBox& child) const;
LayoutUnit flowAwareMarginBeforeForChild(const RenderBox& child) const;
LayoutUnit crossAxisMarginExtentForChild(const RenderBox& child) const;
+ LayoutUnit mainAxisMarginExtentForChild(const RenderBox& child) const;
LayoutUnit crossAxisScrollbarExtent() const;
LayoutUnit crossAxisScrollbarExtentForChild(const RenderBox& child) const;
LayoutPoint flowAwareLocationForChild(const RenderBox& child) const;
