width of table in a flexbox incorrect when table cell has width:100%
Reported by
uhyohyo...@gmail.com,
Jun 7 2018
|
||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36 Steps to reproduce the problem: 1. Open https://codepen.io/uhyo/pen/wXzZZr 2. Inspect the gray box saying "hi" What is the expected behavior? The width of the gray box should be almost the same as viewport. What went wrong? The width of the gray box is 999969 px. Did this work before? N/A Does this work in other browsers? Yes Chrome version: 66.0.3359.181 Channel: stable OS Version: 10.0 Flash Version:
,
Jun 7 2018
Edge agrees with FF. Blink also disagrees with them when the table is flexed 0 1 0. https://codepen.io/davidsgrogan/pen/oyYjVa <div flexbox> <table flex:1 0 auto> <td width=100%>stuff </table> </div> ↑ This table is ~10000px wide, which is Blink's artificial limit. <div flexbox> <table flex:0 1 0> <td width=100%>stuff </table> </div> ↑ This table shrink-wraps around stuff's width. In FF/Edge both these tables occupy the viewport width.
,
Jun 7 2018
Bisect instructions: in https://codepen.io/davidsgrogan/pen/oyYjVa, the word hoy should be at the right edge of the window.
,
Jun 8 2018
As per comment two we have tested this issue and able to reproduce issue on reported chrome version 66.0.3359.181, latest Stable 67.0.3396.62 and latest chrome 69.0.3452.0 using Windows 10,Ubuntu 17.10 and Mac 10.13.3. Hence providing bisect information below. Bisect Info: ================ Good build: 65.0.3287.0 Bad build: 65.0.3288.0 CHANGELOG URL: https://chromium.googlesource.com/chromium/src/+log/8448affe3471114a8be3a25198083c6f8ab3f103..eee88582b5300e34aa2ea56bc5da17457e67aa00 suspect: https://chromium.googlesource.com/chromium/src/+/eee88582b5300e34aa2ea56bc5da17457e67aa00 Reviewed-on: https://chromium-review.googlesource.com/781859 mstensho: Please confirm the issue and help in re-assigning if it is not related to your change. Thanks!
,
Jun 8 2018
Per comment #4, this is regressed in M65. Not a blocker for M67.
,
Jun 11 2018
Similar issue for such tables inside grids.
,
Jun 13 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/d9de7648822d3011efa66ca5eae0e2106a344fc7 commit d9de7648822d3011efa66ca5eae0e2106a344fc7 Author: Morten Stenshorne <mstensho@chromium.org> Date: Wed Jun 13 22:51:56 2018 Avoid ~infinite table max logical width inside flex and grid containers. An infinite (or actually kTableMaxWidth, which is 1000000px) max logical width doesn't work well inside flexboxes, because LayoutFlexibleBox::ComputeInnerFlexBaseSizeForChild() will use a child's MaxPreferredLogicalWidth() as main axis extent if it's auto. Grid containers have similar issues with such tables, so avoid it for them as well. Don't apply this to deprecated flexbox, as that would cause two tests failures: * fast/block/block-size-integer-overflow.html * fast/deprecated-flexbox/box-size-integer-overflow.html Bug: 850566 Change-Id: I9984459801ac229575e8177a9d683088e723db6c Reviewed-on: https://chromium-review.googlesource.com/1095220 Commit-Queue: Morten Stenshorne <mstensho@chromium.org> Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Manuel Rego Casasnovas <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#567032} [modify] https://crrev.com/d9de7648822d3011efa66ca5eae0e2106a344fc7/third_party/WebKit/LayoutTests/TestExpectations [add] https://crrev.com/d9de7648822d3011efa66ca5eae0e2106a344fc7/third_party/WebKit/LayoutTests/external/wpt/css/css-flexbox/item-with-table-with-infinite-max-intrinsic-width.html [add] https://crrev.com/d9de7648822d3011efa66ca5eae0e2106a344fc7/third_party/WebKit/LayoutTests/external/wpt/css/css-flexbox/table-with-infinite-max-intrinsic-width.html [add] https://crrev.com/d9de7648822d3011efa66ca5eae0e2106a344fc7/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-items/item-with-table-with-infinite-max-intrinsic-width.html [add] https://crrev.com/d9de7648822d3011efa66ca5eae0e2106a344fc7/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-items/table-with-infinite-max-intrinsic-width.html [modify] https://crrev.com/d9de7648822d3011efa66ca5eae0e2106a344fc7/third_party/blink/renderer/core/layout/table_layout_algorithm_auto.cc
,
Jun 14 2018
|
||||||
►
Sign in to add a comment |
||||||
Comment 1 by e...@chromium.org
, Jun 7 2018Components: -Blink>CSS Blink>Layout>Table
Status: Available (was: Unconfirmed)