@mpalmgren: Thanks for reporting.

Just one question, shouldn't it have the same behavior if we use "display: flex"?

It seems that in flexbox the table is not stretching either.

I'll take a look.

Yes, I believe it should stretch in all containers that supports stretching
in the relevant axis.  I don't see that css-align makes any exceptions.

We have a bug open on Flexbox about it:
https://bugzilla.mozilla.org/show_bug.cgi?id=799725

CC: dholbert

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/a90dba1f2dd094e51229dd2e5e059c6b53cee93a

commit a90dba1f2dd094e51229dd2e5e059c6b53cee93a
Author: jfernandez <jfernandez@igalia.com>
Date: Sat Mar 04 01:36:34 2017

[table] Stretching tables when needed due to self-alignment properties

The Self-Alignment properties, align-self and justify-self, apply to
tables when they are flex or grid items.

This patch addresses only the issue of applying the stretch value, which
effectively affects the size of the table in those cases.

The justify-self applies also to tables when they are block-level
boxes, but the alignment feature is still not implemented for that
case, so for now the related test cases expect no stretching.

Other values of alignment aren't implemented yet for tables, but those
will be part of future CLs, once somebody files the appropriated bug.

BUG=667785

Review-Url: https://codereview.chromium.org/2528253003
Cr-Commit-Position: refs/heads/master@{#454743}

[delete] https://crrev.com/a9d4fa4f3133c0fbd0a48d01846ec8968cfe2926/third_party/WebKit/LayoutTests/css3/flexbox/flexitem-expected.txt
[add] https://crrev.com/a90dba1f2dd094e51229dd2e5e059c6b53cee93a/third_party/WebKit/LayoutTests/fast/table/table-size-must-consider-stretch-alignment.html
[modify] https://crrev.com/a90dba1f2dd094e51229dd2e5e059c6b53cee93a/third_party/WebKit/Source/core/layout/LayoutBox.h
[modify] https://crrev.com/a90dba1f2dd094e51229dd2e5e059c6b53cee93a/third_party/WebKit/Source/core/layout/LayoutFlexibleBox.h
[modify] https://crrev.com/a90dba1f2dd094e51229dd2e5e059c6b53cee93a/third_party/WebKit/Source/core/layout/LayoutFullScreen.h
[modify] https://crrev.com/a90dba1f2dd094e51229dd2e5e059c6b53cee93a/third_party/WebKit/Source/core/layout/LayoutTable.cpp

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/772559ed7f79de8395dfb24eae582172a1840655

commit 772559ed7f79de8395dfb24eae582172a1840655
Author: jfernandez <jfernandez@igalia.com>
Date: Thu Mar 09 11:27:09 2017

Revert of [table] Stretching tables when needed due to self-alignment properties (patchset #6 id:120001 of https://codereview.chromium.org/2528253003/ )

Reason for revert:
This patch is causing several important regressions.

Original issue's description:
> [table] Stretching tables when needed due to self-alignment properties
>
> The Self-Alignment properties, align-self and justify-self, apply to
> tables when they are flex or grid items.
>
> This patch addresses only the issue of applying the stretch value, which
> effectively affects the size of the table in those cases.
>
> The justify-self applies also to tables when they are block-level
> boxes, but the alignment feature is still not implemented for that
> case, so for now the related test cases expect no stretching.
>
> Other values of alignment aren't implemented yet for tables, but those
> will be part of future CLs, once somebody files the appropriated bug.
>
> BUG=667785
>
> Review-Url: https://codereview.chromium.org/2528253003
> Cr-Commit-Position: refs/heads/master@{#454743}
> Committed: https://chromium.googlesource.com/chromium/src/+/a90dba1f2dd094e51229dd2e5e059c6b53cee93a

TBR=svillar@igalia.com,rego@igalia.com,cbiesinger@chromium.org,dgrogan@chromium.org,mstensho@opera.com
# Not skipping CQ checks because original CL landed more than 1 days ago.
BUG=667785

Review-Url: https://codereview.chromium.org/2740063003
Cr-Commit-Position: refs/heads/master@{#455719}

[add] https://crrev.com/772559ed7f79de8395dfb24eae582172a1840655/third_party/WebKit/LayoutTests/css3/flexbox/flexitem-expected.txt
[delete] https://crrev.com/b348620b14101e7861728a3876f66ef8d964a846/third_party/WebKit/LayoutTests/fast/table/table-size-must-consider-stretch-alignment.html
[modify] https://crrev.com/772559ed7f79de8395dfb24eae582172a1840655/third_party/WebKit/Source/core/layout/LayoutBox.h
[modify] https://crrev.com/772559ed7f79de8395dfb24eae582172a1840655/third_party/WebKit/Source/core/layout/LayoutFlexibleBox.h
[modify] https://crrev.com/772559ed7f79de8395dfb24eae582172a1840655/third_party/WebKit/Source/core/layout/LayoutFullScreen.h
[modify] https://crrev.com/772559ed7f79de8395dfb24eae582172a1840655/third_party/WebKit/Source/core/layout/LayoutTable.cpp

It seems that the proposed solution created many regression, so I'll need more time to evaluate them and modify it, or perhaps looking for an alternative solution.

Do you have any more details than "many regressions" so that we know what to check when trying this again?

See issues  #699615  and #699476 (and all the ones blocked by this)

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/eee88582b5300e34aa2ea56bc5da17457e67aa00

commit eee88582b5300e34aa2ea56bc5da17457e67aa00
Author: Morten Stenshorne <mstensho@chromium.org>
Date: Thu Dec 07 12:45:27 2017

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/781859
Reviewed-by: David Grogan <dgrogan@chromium.org>
Commit-Queue: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/master@{#522408}
[delete] https://crrev.com/8448affe3471114a8be3a25198083c6f8ab3f103/third_party/WebKit/LayoutTests/css3/flexbox/bug782948.html
[delete] https://crrev.com/8448affe3471114a8be3a25198083c6f8ab3f103/third_party/WebKit/LayoutTests/css3/flexbox/flexitem-expected.txt
[modify] https://crrev.com/eee88582b5300e34aa2ea56bc5da17457e67aa00/third_party/WebKit/LayoutTests/css3/flexbox/flexitem.html
[add] https://crrev.com/eee88582b5300e34aa2ea56bc5da17457e67aa00/third_party/WebKit/LayoutTests/external/wpt/css/css-flexbox/table-as-item-narrow-content.html
[add] https://crrev.com/eee88582b5300e34aa2ea56bc5da17457e67aa00/third_party/WebKit/LayoutTests/external/wpt/css/css-flexbox/table-as-item-wide-content.html
[add] https://crrev.com/eee88582b5300e34aa2ea56bc5da17457e67aa00/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-items/explicitly-sized-grid-item-as-table.html
[add] https://crrev.com/eee88582b5300e34aa2ea56bc5da17457e67aa00/third_party/WebKit/LayoutTests/external/wpt/css/reference/ref-filled-green-100px-square-only.html
[modify] https://crrev.com/eee88582b5300e34aa2ea56bc5da17457e67aa00/third_party/WebKit/Source/core/layout/LayoutTable.cpp

Just to be clear (because the commit comment really wasn't), that CL only dealt with widths. We still allow table flex items to do weirdness with their heights. Grabbing and attaching a test case from https://bug799725.bmoattachments.org/attachment.cgi?id=8936202

That test case only renders correctly in Presto.

Deleted: tc-table-flex-item.html 545 bytes

tc-table-flex-item.html 545 bytes View Download