169203 – REGRESSION: Block no longer shrinks to preferred width in this flex box layout

RESOLVED FIXED 169203

REGRESSION: Block no longer shrinks to preferred width in this flex box layout

https://bugs.webkit.org/show_bug.cgi?id=169203

Summary REGRESSION: Block no longer shrinks to preferred width in this flex box layout

mitz

Reported 2017-03-06 09:03:05 PST

In this example, the word “test” used to be centered horizontally on the page. Now it isn’t: <html style="display: flex; flex-direction: column; justify-content: center; align-items: center;"><body>test</body></html>

Attachments
Patch (30.79 KB, patch) 2017-03-06 12:56 PST, Dave Hyatt	no flags	Details Formatted Diff Diff
Archive of layout-test-results from ews105 for mac-elcapitan-wk2 (1.68 MB, application/zip) 2017-03-06 14:07 PST, Build Bot	no flags	Details
Archive of layout-test-results from ews117 for mac-elcapitan (2.53 MB, application/zip) 2017-03-06 14:11 PST, Build Bot	no flags	Details
Archive of layout-test-results from ews126 for ios-simulator-wk2 (1.00 MB, application/zip) 2017-03-06 14:19 PST, Build Bot	no flags	Details
Patch (36.34 KB, patch) 2017-03-06 14:36 PST, Dave Hyatt	simon.fraser: review+	Details Formatted Diff Diff
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.

mitz

Comment 1 2017-03-06 09:08:50 PST

Here’s an example with divs (showing this isn’t something special about html or body): <div style="display: flex; flex-direction: column; justify-content: center; align-items: center;"><div style="border:solid">test</div></div>

mitz

Comment 2 2017-03-06 09:09:42 PST

Simpler: <div style="display: flex; flex-direction: column; align-items: center;"><div style="border:solid">test</div></div>

Radar WebKit Bug Importer

Comment 3 2017-03-06 11:15:30 PST

<rdar://problem/30873895>

Radar WebKit Bug Importer

Comment 4 2017-03-06 11:16:07 PST

<rdar://problem/30873913>

Dave Hyatt

Comment 5 2017-03-06 12:56:09 PST

Created attachment 303543 [details] Patch

Jon Lee

Comment 6 2017-03-06 12:57:06 PST

rdar://problem/30791206

Simon Fraser (smfr)

Comment 7 2017-03-06 13:03:06 PST

Comment on attachment 303543 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=303543&action=review > Source/WebCore/ChangeLog:9 > + Reviewed by NOBODY (OOPS!). > + > + Added new test in css3/flexbox. Would be nice to reference the blink commit(s) that this came from.

Build Bot

Comment 8 2017-03-06 14:07:08 PST

Comment on attachment 303543 [details] Patch Attachment 303543 [details] did not pass mac-wk2-ews (mac-wk2): Output: http://webkit-queues.webkit.org/results/3254240 New failing tests: fast/forms/searchfield-heights.html fast/forms/search/search-padding-cancel-results-buttons.html fast/forms/placeholder-pseudo-style.html fast/forms/search-vertical-alignment.html fast/repaint/justify-items-overflow-change.html fast/forms/search-cancel-button-style-sharing.html fast/repaint/align-items-overflow-change.html fast/replaced/width100percent-searchfield.html fast/forms/control-restrict-line-height.html fast/forms/search-display-none-cancel-button.html fast/repaint/justify-items-legacy-change.html fast/css/text-input-with-webkit-border-radius.html fast/forms/placeholder-position.html fast/forms/box-shadow-override.html fast/repaint/align-items-change.html fast/css/focus-ring-exists-for-search-field.html fast/forms/search-rtl.html fast/forms/search-input-rtl.html fast/repaint/justify-items-change.html fast/forms/search-styled.html fast/css/text-overflow-input.html fast/repaint/search-field-cancel.html fast/forms/input-appearance-height.html fast/forms/search/search-size-with-decorations.html

Build Bot

Comment 9 2017-03-06 14:07:12 PST

Created attachment 303552 [details] Archive of layout-test-results from ews105 for mac-elcapitan-wk2 The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews. Bot: ews105 Port: mac-elcapitan-wk2 Platform: Mac OS X 10.11.6

Build Bot

Comment 10 2017-03-06 14:11:50 PST

Comment on attachment 303543 [details] Patch Attachment 303543 [details] did not pass mac-debug-ews (mac): Output: http://webkit-queues.webkit.org/results/3254227 New failing tests: fast/forms/searchfield-heights.html fast/forms/search/search-padding-cancel-results-buttons.html fast/forms/placeholder-pseudo-style.html fast/forms/search-vertical-alignment.html fast/repaint/justify-items-overflow-change.html fast/forms/search-cancel-button-style-sharing.html fast/repaint/align-items-overflow-change.html fast/replaced/width100percent-searchfield.html fast/forms/control-restrict-line-height.html fast/forms/search-display-none-cancel-button.html fast/repaint/justify-items-legacy-change.html fast/css/text-input-with-webkit-border-radius.html fast/forms/placeholder-position.html fast/forms/box-shadow-override.html fast/repaint/align-items-change.html fast/css/focus-ring-exists-for-search-field.html fast/forms/search-rtl.html fast/forms/search-input-rtl.html fast/repaint/justify-items-change.html fast/forms/search-styled.html fast/css/text-overflow-input.html fast/repaint/search-field-cancel.html fast/forms/input-appearance-height.html fast/forms/search/search-size-with-decorations.html

Build Bot

Comment 11 2017-03-06 14:11:54 PST

Created attachment 303553 [details] Archive of layout-test-results from ews117 for mac-elcapitan The attached test failures were seen while running run-webkit-tests on the mac-debug-ews. Bot: ews117 Port: mac-elcapitan Platform: Mac OS X 10.11.6

Build Bot

Comment 12 2017-03-06 14:19:26 PST

Comment on attachment 303543 [details] Patch Attachment 303543 [details] did not pass ios-sim-ews (ios-simulator-wk2): Output: http://webkit-queues.webkit.org/results/3254247 New failing tests: fast/forms/search-vertical-alignment.html fast/forms/searchfield-heights.html

Build Bot

Comment 13 2017-03-06 14:19:30 PST

Created attachment 303556 [details] Archive of layout-test-results from ews126 for ios-simulator-wk2 The attached test failures were seen while running run-webkit-tests on the ios-sim-ews. Bot: ews126 Port: ios-simulator-wk2 Platform: Mac OS X 10.11.6

Dave Hyatt

Comment 14 2017-03-06 14:36:11 PST

Created attachment 303561 [details] Patch

Dave Hyatt

Comment 15 2017-03-06 17:29:34 PST

Landed in r213480.

Manuel Rego Casasnovas

Comment 16 2017-03-07 05:07:54 PST

Apart from other stuff this was porting two CSS Grid Layout patches from Blink: * "normal" is "start" for replaced grid items (bug #169198): https://chromium.googlesource.com/chromium/src/+/fad39c71033eea490d8437ca186529c8e87125c2 * Use transferred size to calculate the minimum size of grid items (bug #169197): https://chromium.googlesource.com/chromium/src/+/ab779b340b6d4170920e1cf2ce50e67f64d67fac The first thing is mentioned on the ChangeLog but, sadly, the 2nd one is not. Also as part of these changes some Grid Layout tests are passing, I'm removing them from TestExpectations file in bug #169270. I'm not sure if these Grid Layout changes were actually needed to fix this bug, in any case I believe they could be done in separated patches. PS: Again the Grid Layout watchlist seems to be failing, I don't know why.

Note You need to log in before you can comment on or make changes to this bug.

Status RESOLVED

Resolution FIXED

Priority P1

Severity Normal

Classification Unclassified

Version Other

Hardware Unspecified

OS Unspecified

Product WebKit

Component Layout and Rendering

Assignee

Dave Hyatt

Reported

2017-03-06 09:03 PST

Modified

2017-03-07 05:07 PST History

CC List

10 users Show

URL

data:text/html,<div%20style="display:%20flex;%20flex-direction:%20column;%20align-items:%20center;"><div%20style="border:solid">test</div></div>

Keywords InRadar, Regression

Depends on

Blocks