Skip to content

Commit

Permalink
[css-flexbox] Resolve min-width:auto on table item to min preferred s…
Browse files Browse the repository at this point in the history
…ize.

Edge and Firefox seem to let table flex items use the sizing algorithm
of the table extensively, and are therefore generally broken when it
comes to flexing tables. We, on the other hand, let the flex sizing
algorithm be in charge of sizing tables, so that flexing actually works.
However, this causes tables with a specified main size of less than the
minimum intrinsic logical width of the table to shrink below their
minimum intrinsic logical width, a situation that's generally unwanted
for tables.

Amend by ignoring the specified main size when resolving min-width:auto
on table items. Also ignore max-width/max-height. Just use the
preferred minimum logical width.

Bug: 821832
Change-Id: I78ca0c8e0041ea69bb606ff72d340bb3f5f9bb96
Reviewed-on: https://chromium-review.googlesource.com/964203
Reviewed-by: David Grogan <dgrogan@chromium.org>
Commit-Queue: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/master@{#545777}
  • Loading branch information
mstensho authored and chromium-wpt-export-bot committed Mar 26, 2018
1 parent ff4fae1 commit fe09e1e
Showing 1 changed file with 11 additions and 0 deletions.
11 changes: 11 additions & 0 deletions css/css-flexbox/table-as-item-auto-min-width.html
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<title>CSS Flexbox Test: Flex item as table, specified width less than minimum intrinsic width</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">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="display:flex; width:100px; background:red;">
<div style="display:table; width:10px; max-width:10px; height:100px; background:green;">
<div style="width:100px; height:10px; background:green;"></div>
</div>
</div>

0 comments on commit fe09e1e

Please sign in to comment.