Skip to content

GitLab

T
tangled
Commit eee88582 authored by Morten Stenshorne's avatar Morten Stenshorne Committed by Commit Bot
Browse files
Options

Avoid table sizing peculiarities for flex and grid items. 

Let the flex/grid layout algorithm determine the size of tables that
are flex/grid items. Don't let the intrinsic width of table columns
affect the width of the item.

Bug: 782948, 667785
Change-Id: Ifcea6af51ce5bf74377f93b5cd0437272a5c7ef0
Reviewed-on: https://chromium-review.googlesource.com/781859Reviewed-by: default avatarDavid Grogan <dgrogan@chromium.org>
Commit-Queue: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/master@{#522408}
parent 8448affe
Hide whitespace changes
Inline Side-by-side
Showing with 49 additions and 61 deletions
third_party/WebKit/LayoutTests/css3/flexbox/bug782948.html deleted 100644 → 0
View file @ 8448affe
<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
<style>
.flexbox {
position: relative;
display: flex;
width: 150px;
}
table, tr, td {
padding: 0;
border-spacing: 0;
}
table {
flex: 1;
min-width: 0;
}
</style>
<body onload="checkLayout('.flexbox')">
<p>Note that this behavior is all incorrect, but we had a regression that was
even more incorrect, so this tests that we match our historical behavior.</p>
<p>You should not see overlapping text.</p>
<div class="flexbox">
<table data-expected-width="200" data-offset-x="0">
<tr><td><div style="width: 200px;">Some textual content</div></tr></td>
</table>
<table data-expected-width="200" data-offset-x="200">
<tr><td><div style="width: 200px;">Some textual content</div></tr></td>
</table>
</div>
third_party/WebKit/LayoutTests/css3/flexbox/flexitem-expected.txt deleted 100644 → 0
View file @ 8448affe
This is a testharness.js-based test.
PASS .flexbox 1
PASS .flexbox 2
PASS .flexbox 3
PASS .flexbox 4
PASS .flexbox 5
PASS .flexbox 6
PASS .flexbox 7
PASS .flexbox 8
PASS .flexbox 9
PASS .flexbox 10
PASS .flexbox 11
FAIL .flexbox 12 assert_equals:
<div class="flexbox">
<!-- FIXME: This table should flex. -->
<div data-expected-display="table" data-expected-width="600" style="display: inline-table"></div>
</div>
width expected 600 but got 0
PASS .flexbox 13
PASS .flexbox 14
PASS .flexbox 15
PASS .flexbox 16
PASS .flexbox 17
PASS .flexbox 18
Harness: the test ran to completion.
third_party/WebKit/LayoutTests/css3/flexbox/flexitem.html
View file @ eee88582
...@@ -79,7 +79,6 @@ ...@@ -79,7 +79,6 @@
</div> </div>
<div class="flexbox"> <div class="flexbox">
<!-- FIXME: This table should flex. -->
<div data-expected-display="table" data-expected-width="600" style="display: inline-table"></div> <div data-expected-display="table" data-expected-width="600" style="display: inline-table"></div>
</div> </div>
......
third_party/WebKit/LayoutTests/external/wpt/css/css-flexbox/table-as-item-narrow-content.html 0 → 100644
View file @ eee88582
<!DOCTYPE html>
<title>CSS Flexbox Test: Flex item as table with narrow content</title>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm">
<meta name="assert" content="A flex item as a table uses the sizing algorithm of the flexbox">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<p>Test passes if there is a filled green square.</p>
<div style="display:flex; width:200px;">
<div style="display:table; flex:1 0; background:green;">
<div style="width:10px; height:100px;"></div>
</div>
<div style="flex:1 0;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-flexbox/table-as-item-wide-content.html 0 → 100644
View file @ eee88582
<!DOCTYPE html>
<title>CSS Flexbox Test: Flex item as table with wide content</title>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm">
<meta name="assert" content="A flex item as a table uses the sizing algorithm of the flexbox">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<p>Test passes if there is a filled green square.</p>
<div style="display:flex; width:100px;">
<div style="min-width:0; flex:1 1; display:table; background:green;">
<div style="width:500px; height:100px;"></div>
</div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-items/explicitly-sized-grid-item-as-table.html 0 → 100644
View file @ eee88582
<!DOCTYPE html>
<title>CSS Grid Layout Test: Explicitly sized grid item as table with narrow contents</title>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#grid-track-concept" title="3.2. Grid Tracks and Cells">
<meta name="assert" content="A grid item as a table uses the sizing algorithm of the grid">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<p>Test passes if there is a filled green square.</p>
<div style="display:grid; grid-template-columns:50% 50%; width:200px;">
<div style="display:table; background:green;">
<div style="width:10px; height:100px;"></div>
</div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/reference/ref-filled-green-100px-square-only.html 0 → 100644
View file @ eee88582
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
<p>Test passes if there is a filled green square.</p>
<div style="width:100px; height:100px; background:green;"></div>
third_party/WebKit/Source/core/layout/LayoutTable.cpp
View file @ eee88582
...@@ -273,6 +273,14 @@ bool LayoutTable::IsLogicalWidthAuto() const { ...@@ -273,6 +273,14 @@ bool LayoutTable::IsLogicalWidthAuto() const {
void LayoutTable::UpdateLogicalWidth() { void LayoutTable::UpdateLogicalWidth() {
RecalcSectionsIfNeeded(); RecalcSectionsIfNeeded();
if (IsFlexItemIncludingDeprecated() || IsGridItem()) {
// TODO(jfernandez): Investigate whether the grid layout algorithm provides
// all the logic needed and that we're not skipping anything essential due
// to the early return here.
LayoutBlock::UpdateLogicalWidth();
return;
}
if (IsOutOfFlowPositioned()) { if (IsOutOfFlowPositioned()) {
LogicalExtentComputedValues computed_values; LogicalExtentComputedValues computed_values;
ComputePositionedLogicalWidth(computed_values); ComputePositionedLogicalWidth(computed_values);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment