- Revision
- 276572
- Author
- [email protected]
- Date
- 2021-04-25 14:00:07 -0700 (Sun, 25 Apr 2021)
Log Message
[css-flexbox] Table layout disregards overriding width
https://bugs.webkit.org/show_bug.cgi?id=224934
Patch by Felipe Erias <[email protected]> on 2021-04-25
Reviewed by Darin Adler.
LayoutTests/imported/w3c:
Update expectations.
* web-platform-tests/css/css-flexbox/table-with-percent-intrinsic-width-expected.txt: This test now passes.
Source/WebCore:
If a table's parent has set an overriding width on it, that value will get preference over the one from
the table's "width" property. This fixes several tests where the width assigned by the flexbox algorithm
did not match the width of the table after layout.
* rendering/AutoTableLayout.cpp:
(WebCore::AutoTableLayout::applyPreferredLogicalWidthQuirks const): Give precedence to the element's
overriding width if it has been set.
* rendering/RenderTable.cpp:
(WebCore::RenderTable::updateLogicalWidth): Give precedence to the element's overriding width if it
has been set, instead of discarding it if it is smaller than the style width.
(WebCore::RenderTable::computePreferredLogicalWidths): Take the overriding width into account when
computing the preferred min/max values for the element.
LayoutTests:
* TestExpectations: Remove three WPT tests that now pass.
* platform/glib/TestExpectations: Remove one WPT test that now passes.
* platform/gtk/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-contains-strict-expected.txt: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (276571 => 276572)
--- trunk/LayoutTests/ChangeLog 2021-04-25 20:38:23 UTC (rev 276571)
+++ trunk/LayoutTests/ChangeLog 2021-04-25 21:00:07 UTC (rev 276572)
@@ -1,3 +1,14 @@
+2021-04-25 Felipe Erias <[email protected]>
+
+ [css-flexbox] Table layout disregards overriding width
+ https://bugs.webkit.org/show_bug.cgi?id=224934
+
+ Reviewed by Darin Adler.
+
+ * TestExpectations: Remove three WPT tests that now pass.
+ * platform/glib/TestExpectations: Remove one WPT test that now passes.
+ * platform/gtk/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-contains-strict-expected.txt: Added.
+
2021-04-24 Tim Horton <[email protected]>
Changing the source of a model element with clipping applied does not update the model
Modified: trunk/LayoutTests/TestExpectations (276571 => 276572)
--- trunk/LayoutTests/TestExpectations 2021-04-25 20:38:23 UTC (rev 276571)
+++ trunk/LayoutTests/TestExpectations 2021-04-25 21:00:07 UTC (rev 276572)
@@ -3964,13 +3964,10 @@
# Tables as flex items.
webkit.org/b/221473 imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-3.html [ ImageOnlyFailure ]
-webkit.org/b/221473 imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-percent-width-cell-001.html [ ImageOnlyFailure ]
-webkit.org/b/221473 imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-specified-width.html [ ImageOnlyFailure ]
webkit.org/b/221473 imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-inflexible-in-column-1.html [ ImageOnlyFailure ]
webkit.org/b/221473 imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-inflexible-in-column-2.html [ ImageOnlyFailure ]
webkit.org/b/221473 imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-inflexible-in-row-2.html [ ImageOnlyFailure ]
webkit.org/b/221473 imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-specified-height.html [ ImageOnlyFailure ]
-webkit.org/b/221473 imported/w3c/web-platform-tests/css/css-flexbox/table-item-flex-percentage-width.html [ ImageOnlyFailure ]
# SVGs as flex items.
webkit.org/b/221474 imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-002.html [ ImageOnlyFailure ]
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (276571 => 276572)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2021-04-25 20:38:23 UTC (rev 276571)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2021-04-25 21:00:07 UTC (rev 276572)
@@ -1,3 +1,14 @@
+2021-04-25 Felipe Erias <[email protected]>
+
+ [css-flexbox] Table layout disregards overriding width
+ https://bugs.webkit.org/show_bug.cgi?id=224934
+
+ Reviewed by Darin Adler.
+
+ Update expectations.
+
+ * web-platform-tests/css/css-flexbox/table-with-percent-intrinsic-width-expected.txt: This test now passes.
+
2021-04-24 Antoine Quint <[email protected]>
Improve parsing and computed style of the rotate CSS property
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-with-percent-intrinsic-width-expected.txt (276571 => 276572)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-with-percent-intrinsic-width-expected.txt 2021-04-25 20:38:23 UTC (rev 276571)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-with-percent-intrinsic-width-expected.txt 2021-04-25 21:00:07 UTC (rev 276572)
@@ -1,28 +1,4 @@
-FAIL table 1 assert_equals:
-<div class="container">
- <div class="left">
- </div>
- <table style="width:100%" data-expected-width="100">
- <tbody><tr><td data-expected-width="20"><div class="spacer"></div><div class="spacer"></div></td>
- <td data-expected-width="20"><div class="spacer"></div><div class="spacer"></div></td>
- <td data-expected-width="20"><div class="spacer"></div><div class="spacer"></div></td>
- <td data-expected-width="20"><div class="spacer"></div><div class="spacer"></div></td>
- <td data-expected-width="20"><div class="spacer"></div><div class="spacer"></div></td>
- </tr></tbody></table>
-</div>
-width expected 100 but got 200
-FAIL table 2 assert_equals:
-<div class="container">
- <div class="left">
- </div>
- <table style="width:70%; flex-basis: 200px" data-expected-width="100">
- <tbody><tr><td data-expected-width="20"><div class="spacer"></div><div class="spacer"></div></td>
- <td data-expected-width="20"><div class="spacer"></div><div class="spacer"></div></td>
- <td data-expected-width="20"><div class="spacer"></div><div class="spacer"></div></td>
- <td data-expected-width="20"><div class="spacer"></div><div class="spacer"></div></td>
- <td data-expected-width="20"><div class="spacer"></div><div class="spacer"></div></td>
- </tr></tbody></table>
-</div>
-width expected 100 but got 140
+PASS table 1
+PASS table 2
Modified: trunk/LayoutTests/platform/glib/TestExpectations (276571 => 276572)
--- trunk/LayoutTests/platform/glib/TestExpectations 2021-04-25 20:38:23 UTC (rev 276571)
+++ trunk/LayoutTests/platform/glib/TestExpectations 2021-04-25 21:00:07 UTC (rev 276572)
@@ -435,8 +435,6 @@
webkit.org/b/214682 imported/w3c/web-platform-tests/css/cssom/stylesheet-same-origin.sub.html [ Pass Failure ]
-webkit.org/b/169007 imported/w3c/web-platform-tests/css/css-flexbox/flex-item-contains-strict.html [ Failure ]
-
webkit.org/b/216767 css3/font-feature-settings-stylistic-set.html [ ImageOnlyFailure ]
webkit.org/b/216853 css3/font-synthesis-small-caps.html [ ImageOnlyFailure ]
Added: trunk/LayoutTests/platform/gtk/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-contains-strict-expected.txt (0 => 276572)
--- trunk/LayoutTests/platform/gtk/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-contains-strict-expected.txt (rev 0)
+++ trunk/LayoutTests/platform/gtk/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-contains-strict-expected.txt 2021-04-25 21:00:07 UTC (rev 276572)
@@ -0,0 +1,44 @@
+Stretched:
+
+Column
+
+Row
+
+Column
+
+Row
+Flex-start:
+
+Column
+
+Row
+
+Column
+
+Row
+
+FAIL .inline-flex 1 assert_equals:
+<div class="inline-flex" style="display: inline-flex; flex-direction: column;" data-expected-width="0" data-expected-height="0">
+ <div style="contain: strict;" data-expected-width="0" data-expected-height="0">Column</div>
+</div>
+width expected 0 but got 51
+FAIL .inline-flex 2 assert_equals:
+<div class="inline-flex" data-expected-width="0" data-expected-height="0">
+ <div style="contain: strict;" data-expected-width="0" data-expected-height="0">Row</div>
+</div>
+width expected 0 but got 31
+PASS .inline-flex 3
+PASS .inline-flex 4
+FAIL .inline-flex 5 assert_equals:
+<div class="inline-flex" style="flex-direction: column; align-items: flex-start;" data-expected-width="0" data-expected-height="0">
+ <div style="contain: strict;" data-expected-width="0" data-expected-height="0">Column</div>
+</div>
+width expected 0 but got 51
+FAIL .inline-flex 6 assert_equals:
+<div class="inline-flex" style="align-items: flex-start;" data-expected-width="0" data-expected-height="0">
+ <div style="contain: strict;" data-expected-width="0" data-expected-height="0">Row</div>
+</div>
+width expected 0 but got 31
+PASS .inline-flex 7
+PASS .inline-flex 8
+
Modified: trunk/Source/WebCore/ChangeLog (276571 => 276572)
--- trunk/Source/WebCore/ChangeLog 2021-04-25 20:38:23 UTC (rev 276571)
+++ trunk/Source/WebCore/ChangeLog 2021-04-25 21:00:07 UTC (rev 276572)
@@ -1,3 +1,24 @@
+2021-04-25 Felipe Erias <[email protected]>
+
+ [css-flexbox] Table layout disregards overriding width
+ https://bugs.webkit.org/show_bug.cgi?id=224934
+
+ Reviewed by Darin Adler.
+
+ If a table's parent has set an overriding width on it, that value will get preference over the one from
+ the table's "width" property. This fixes several tests where the width assigned by the flexbox algorithm
+ did not match the width of the table after layout.
+
+ * rendering/AutoTableLayout.cpp:
+ (WebCore::AutoTableLayout::applyPreferredLogicalWidthQuirks const): Give precedence to the element's
+ overriding width if it has been set.
+
+ * rendering/RenderTable.cpp:
+ (WebCore::RenderTable::updateLogicalWidth): Give precedence to the element's overriding width if it
+ has been set, instead of discarding it if it is smaller than the style width.
+ (WebCore::RenderTable::computePreferredLogicalWidths): Take the overriding width into account when
+ computing the preferred min/max values for the element.
+
2021-04-25 Tyler Wilcock <[email protected]>
css-contain category missing from CSSProperties.json
Modified: trunk/Source/WebCore/rendering/AutoTableLayout.cpp (276571 => 276572)
--- trunk/Source/WebCore/rendering/AutoTableLayout.cpp 2021-04-25 20:38:23 UTC (rev 276571)
+++ trunk/Source/WebCore/rendering/AutoTableLayout.cpp 2021-04-25 21:00:07 UTC (rev 276572)
@@ -280,8 +280,9 @@
void AutoTableLayout::applyPreferredLogicalWidthQuirks(LayoutUnit& minWidth, LayoutUnit& maxWidth) const
{
- Length tableLogicalWidth = m_table->style().logicalWidth();
- if (tableLogicalWidth.isFixed() && tableLogicalWidth.isPositive())
+ if (m_table->hasOverridingLogicalWidth())
+ minWidth = maxWidth = std::max(minWidth, m_table->overridingLogicalWidth());
+ else if (auto tableLogicalWidth = m_table->style().logicalWidth(); tableLogicalWidth.isFixed() && tableLogicalWidth.isPositive())
minWidth = maxWidth = std::max(minWidth, LayoutUnit(tableLogicalWidth.value()));
}
Modified: trunk/Source/WebCore/rendering/RenderTable.cpp (276571 => 276572)
--- trunk/Source/WebCore/rendering/RenderTable.cpp 2021-04-25 20:38:23 UTC (rev 276571)
+++ trunk/Source/WebCore/rendering/RenderTable.cpp 2021-04-25 21:00:07 UTC (rev 276572)
@@ -261,7 +261,9 @@
LayoutUnit containerWidthInInlineDirection = hasPerpendicularContainingBlock ? perpendicularContainingBlockLogicalHeight() : availableLogicalWidth;
Length styleLogicalWidth = style().logicalWidth();
- if ((styleLogicalWidth.isSpecified() && styleLogicalWidth.isPositive()) || styleLogicalWidth.isIntrinsic())
+ if (hasOverridingLogicalWidth())
+ setLogicalWidth(overridingLogicalWidth());
+ else if ((styleLogicalWidth.isSpecified() && styleLogicalWidth.isPositive()) || styleLogicalWidth.isIntrinsic())
setLogicalWidth(convertStyleLogicalWidthToComputedWidth(styleLogicalWidth, containerWidthInInlineDirection));
else {
// Subtract out any fixed margins from our available width for auto width tables.
@@ -287,11 +289,6 @@
setLogicalWidth(std::min(availableContentLogicalWidth, maxWidth));
}
- // Our parent might have set an override content logical width on us, so we must respect it. This
- // is how flexbox containers flex or stretch us.
- if (hasOverridingLogicalWidth())
- setLogicalWidth(std::max(logicalWidth(), overridingLogicalWidth()));
-
// Ensure we aren't bigger than our max-width style.
Length styleMaxLogicalWidth = style().logicalMaxWidth();
if ((styleMaxLogicalWidth.isSpecified() && !styleMaxLogicalWidth.isNegative()) || styleMaxLogicalWidth.isIntrinsic()) {
@@ -845,6 +842,11 @@
for (unsigned i = 0; i < m_captions.size(); i++)
m_minPreferredLogicalWidth = std::max(m_minPreferredLogicalWidth, m_captions[i]->minPreferredLogicalWidth());
+ if (hasOverridingLogicalWidth()) {
+ m_minPreferredLogicalWidth = std::max(m_minPreferredLogicalWidth, overridingLogicalWidth());
+ m_maxPreferredLogicalWidth = std::max(m_maxPreferredLogicalWidth, overridingLogicalWidth());
+ }
+
auto& styleToUse = style();
// FIXME: This should probably be checking for isSpecified since you should be able to use percentage or calc values for min-width.
if (styleToUse.logicalMinWidth().isFixed() && styleToUse.logicalMinWidth().value() > 0) {
