RESOLVED FIXED 196312
WebKit uses wrong baseline for empty inline-flex containers, when doing `vertical-align:baseline` alignment
https://bugs.webkit.org/show_bug.cgi?id=196312
Summary WebKit uses wrong baseline for empty inline-flex containers, when doing `vert...
Daniel Holbert
Reported 2019-03-27 13:11:07 PDT
(Note: there's a Blink version of this bug at https://bugs.chromium.org/p/chromium/issues/detail?id=946669 ) STR: (1) View this fiddle: https://jsfiddle.net/dholbert/y6xef59s/ EXPECTED RESULTS: The four boxes should all look the same, with "abc" aligned consistently at the margin-bottom of the black-bordered area (it should be aligned 10px below the black border). ACTUAL RESULTS: "abc" is aligned further up, in the second case (for inline-flex). It looks like the bottom of the black-bordered-area's content-box is being used for baseline-alignment, rather than the bottom of its margin-box. BROWSER COMPARISON: Firefox 66 and Edge 18 both give "expected results" Safari Safari 12 gives "actual results" Chrome gives a more-severe version of "actual results" -- they have "abc" misaligned in the 3rd box as well (the inline-grid). SPEC NOTES/JUSTIFICATION: The alignment in play here is `vertical-align:baseline`, which is specced as follows (emphasis added) # [...] If the box does not have a baseline, # align the **bottom margin edge** # with the parent's baseline. https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align That should apply here, because an empty flex container does not have a baseline, as noted here: # [...] if the flex container has at least one item [...] # Otherwise, the flex container **has no first/last main-axis baseline set** # and one is synthesized if needed according to the rules of its alignment context. https://drafts.csswg.org/css-flexbox-1/#flex-baselines
Attachments
Patch (145.25 KB, patch)
2019-04-05 04:09 PDT, Manuel Rego Casasnovas
no flags
Archive of layout-test-results from ews100 for mac-highsierra (2.80 MB, application/zip)
2019-04-05 05:13 PDT, EWS Watchlist
no flags
Archive of layout-test-results from ews107 for mac-highsierra-wk2 (3.02 MB, application/zip)
2019-04-05 05:27 PDT, EWS Watchlist
no flags
Archive of layout-test-results from ews117 for mac-highsierra (2.61 MB, application/zip)
2019-04-05 05:55 PDT, EWS Watchlist
no flags
Archive of layout-test-results from ews125 for ios-simulator-wk2 (3.01 MB, application/zip)
2019-04-05 06:03 PDT, EWS Watchlist
no flags
Archive of layout-test-results from ews201 for win-future (13.41 MB, application/zip)
2019-04-05 10:07 PDT, EWS Watchlist
no flags
Patch (884.26 KB, patch)
2019-04-10 05:56 PDT, Manuel Rego Casasnovas
no flags
Archive of layout-test-results from ews102 for mac-highsierra (2.62 MB, application/zip)
2019-04-10 07:01 PDT, EWS Watchlist
no flags
Archive of layout-test-results from ews104 for mac-highsierra-wk2 (2.86 MB, application/zip)
2019-04-10 07:15 PDT, EWS Watchlist
no flags
Archive of layout-test-results from ews117 for mac-highsierra (2.47 MB, application/zip)
2019-04-10 07:46 PDT, EWS Watchlist
no flags
Archive of layout-test-results from ews126 for ios-simulator-wk2 (2.72 MB, application/zip)
2019-04-10 07:52 PDT, EWS Watchlist
no flags
Archive of layout-test-results from ews204 for win-future (12.85 MB, application/zip)
2019-04-10 08:32 PDT, EWS Watchlist
no flags
Patch (273.85 KB, patch)
2019-04-12 02:09 PDT, Manuel Rego Casasnovas
no flags
Manuel Rego Casasnovas
Comment 1 2019-03-27 14:38:44 PDT
This has been recently fixed in Blink: https://chromium-review.googlesource.com/c/chromium/src/+/1533952 So maybe we could just port that change into WebKit.
Radar WebKit Bug Importer
Comment 2 2019-03-27 16:20:36 PDT
Manuel Rego Casasnovas
Comment 3 2019-04-05 04:09:43 PDT
Javier Fernandez
Comment 4 2019-04-05 04:52:52 PDT
Please, fix the layout tests failures before landing. I guess you'd need to extract the new baseline from the specific bots for the ref tests using images.
Manuel Rego Casasnovas
Comment 5 2019-04-05 04:54:47 PDT
(In reply to Javier Fernandez from comment #4) > Please, fix the layout tests failures before landing. I guess you'd need to > extract the new baseline from the specific bots for the ref tests using > images. Yes sure, that's why it was not marked with "r?" yet, as I uploaded to get the new baselines from EWSs. Thanks for the review anyway.
EWS Watchlist
Comment 6 2019-04-05 05:13:21 PDT
Comment on attachment 366807 [details] Patch Attachment 366807 [details] did not pass mac-ews (mac): Output: https://webkit-queues.webkit.org/results/11777553 New failing tests: svg/custom/foreign-object-skew.svg fast/forms/select-baseline.html fast/forms/button-generated-content.html css3/flexbox/flexbox-baseline-margins.html imported/blink/fast/forms/button-baseline-and-collapsing.html css3/flexbox/button.html
EWS Watchlist
Comment 7 2019-04-05 05:13:23 PDT
Created attachment 366809 [details] Archive of layout-test-results from ews100 for mac-highsierra The attached test failures were seen while running run-webkit-tests on the mac-ews. Bot: ews100 Port: mac-highsierra Platform: Mac OS X 10.13.6
EWS Watchlist
Comment 8 2019-04-05 05:27:08 PDT
Comment on attachment 366807 [details] Patch Attachment 366807 [details] did not pass mac-wk2-ews (mac-wk2): Output: https://webkit-queues.webkit.org/results/11777584 New failing tests: svg/custom/foreign-object-skew.svg fast/forms/select-baseline.html fast/forms/button-generated-content.html css3/flexbox/flexbox-baseline-margins.html imported/blink/fast/forms/button-baseline-and-collapsing.html css3/flexbox/button.html
EWS Watchlist
Comment 9 2019-04-05 05:27:10 PDT
Created attachment 366810 [details] Archive of layout-test-results from ews107 for mac-highsierra-wk2 The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews. Bot: ews107 Port: mac-highsierra-wk2 Platform: Mac OS X 10.13.6
EWS Watchlist
Comment 10 2019-04-05 05:55:51 PDT
Comment on attachment 366807 [details] Patch Attachment 366807 [details] did not pass mac-debug-ews (mac): Output: https://webkit-queues.webkit.org/results/11777639 New failing tests: svg/custom/foreign-object-skew.svg fast/forms/select-baseline.html fast/forms/button-generated-content.html css3/flexbox/flexbox-baseline-margins.html imported/blink/fast/forms/button-baseline-and-collapsing.html css3/flexbox/button.html
EWS Watchlist
Comment 11 2019-04-05 05:55:52 PDT
Created attachment 366811 [details] Archive of layout-test-results from ews117 for mac-highsierra The attached test failures were seen while running run-webkit-tests on the mac-debug-ews. Bot: ews117 Port: mac-highsierra Platform: Mac OS X 10.13.6
EWS Watchlist
Comment 12 2019-04-05 06:03:48 PDT
Comment on attachment 366807 [details] Patch Attachment 366807 [details] did not pass ios-sim-ews (ios-simulator-wk2): Output: https://webkit-queues.webkit.org/results/11777674 New failing tests: svg/custom/foreign-object-skew.svg fast/forms/select-baseline.html fast/forms/button-generated-content.html css3/flexbox/flexbox-baseline-margins.html imported/blink/fast/forms/button-baseline-and-collapsing.html css3/flexbox/button.html
EWS Watchlist
Comment 13 2019-04-05 06:03:50 PDT
Created attachment 366812 [details] Archive of layout-test-results from ews125 for ios-simulator-wk2 The attached test failures were seen while running run-webkit-tests on the ios-sim-ews. Bot: ews125 Port: ios-simulator-wk2 Platform: Mac OS X 10.13.6
EWS Watchlist
Comment 14 2019-04-05 10:07:35 PDT
Comment on attachment 366807 [details] Patch Attachment 366807 [details] did not pass win-ews (win): Output: https://webkit-queues.webkit.org/results/11779967 New failing tests: fast/loader/charset-parse.html fast/loader/create-frame-in-DOMContentLoaded.html fast/forms/select-baseline.html fast/loader/crash-copying-backforwardlist.html fast/forms/button-generated-content.html fast/loader/comment-only-javascript-url.html css3/flexbox/flexbox-baseline-margins.html security/contentSecurityPolicy/video-with-file-url-allowed-by-media-src-star.html imported/blink/fast/forms/button-baseline-and-collapsing.html fast/loader/crash-replacing-location-before-load.html
EWS Watchlist
Comment 15 2019-04-05 10:07:47 PDT
Created attachment 366822 [details] Archive of layout-test-results from ews201 for win-future The attached test failures were seen while running run-webkit-tests on the win-ews. Bot: ews201 Port: win-future Platform: CYGWIN_NT-10.0-2.11.1-0.329-5-3-x86_64-64bit
Manuel Rego Casasnovas
Comment 16 2019-04-10 05:56:15 PDT
EWS Watchlist
Comment 17 2019-04-10 07:01:00 PDT
Comment on attachment 367116 [details] Patch Attachment 367116 [details] did not pass mac-ews (mac): Output: https://webkit-queues.webkit.org/results/11829026 New failing tests: svg/custom/foreign-object-skew.svg imported/blink/fast/forms/button-baseline-and-collapsing.html fast/forms/select-baseline.html css3/flexbox/button.html fast/forms/button-generated-content.html
EWS Watchlist
Comment 18 2019-04-10 07:01:01 PDT
Created attachment 367117 [details] Archive of layout-test-results from ews102 for mac-highsierra The attached test failures were seen while running run-webkit-tests on the mac-ews. Bot: ews102 Port: mac-highsierra Platform: Mac OS X 10.13.6
EWS Watchlist
Comment 19 2019-04-10 07:15:17 PDT
Comment on attachment 367116 [details] Patch Attachment 367116 [details] did not pass mac-wk2-ews (mac-wk2): Output: https://webkit-queues.webkit.org/results/11829049 New failing tests: svg/custom/foreign-object-skew.svg imported/blink/fast/forms/button-baseline-and-collapsing.html fast/forms/select-baseline.html css3/flexbox/button.html fast/forms/button-generated-content.html
EWS Watchlist
Comment 20 2019-04-10 07:15:18 PDT
Created attachment 367118 [details] Archive of layout-test-results from ews104 for mac-highsierra-wk2 The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews. Bot: ews104 Port: mac-highsierra-wk2 Platform: Mac OS X 10.13.6
EWS Watchlist
Comment 21 2019-04-10 07:46:24 PDT
Comment on attachment 367116 [details] Patch Attachment 367116 [details] did not pass mac-debug-ews (mac): Output: https://webkit-queues.webkit.org/results/11829087 New failing tests: svg/custom/foreign-object-skew.svg imported/blink/fast/forms/button-baseline-and-collapsing.html fast/forms/select-baseline.html css3/flexbox/button.html fast/forms/button-generated-content.html
EWS Watchlist
Comment 22 2019-04-10 07:46:26 PDT
Created attachment 367119 [details] Archive of layout-test-results from ews117 for mac-highsierra The attached test failures were seen while running run-webkit-tests on the mac-debug-ews. Bot: ews117 Port: mac-highsierra Platform: Mac OS X 10.13.6
EWS Watchlist
Comment 23 2019-04-10 07:52:10 PDT
Comment on attachment 367116 [details] Patch Attachment 367116 [details] did not pass ios-sim-ews (ios-simulator-wk2): Output: https://webkit-queues.webkit.org/results/11829092 New failing tests: svg/custom/foreign-object-skew.svg imported/blink/fast/forms/button-baseline-and-collapsing.html
EWS Watchlist
Comment 24 2019-04-10 07:52:12 PDT
Created attachment 367120 [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.13.6
EWS Watchlist
Comment 25 2019-04-10 08:31:59 PDT
Comment on attachment 367116 [details] Patch Attachment 367116 [details] did not pass win-ews (win): Output: https://webkit-queues.webkit.org/results/11829275 New failing tests: imported/blink/fast/forms/button-baseline-and-collapsing.html
EWS Watchlist
Comment 26 2019-04-10 08:32:11 PDT
Created attachment 367125 [details] Archive of layout-test-results from ews204 for win-future The attached test failures were seen while running run-webkit-tests on the win-ews. Bot: ews204 Port: win-future Platform: CYGWIN_NT-6.1-2.10.0-0.325-5-3-x86_64-64bit
Manuel Rego Casasnovas
Comment 27 2019-04-12 02:09:25 PDT
Manuel Rego Casasnovas
Comment 28 2019-04-12 03:30:14 PDT
Comment on attachment 367304 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=367304&action=review > Source/WebCore/rendering/RenderButton.h:64 > + int baselinePosition(FontBaseline, bool firstLine, LineDirectionMode, LinePositionMode = PositionOnContainingLine) const override; Javi could you please take a new look? I needed to do this in order to keep baseline behavior for RenderButton. The fact that a <button> is a flexbox is an implementation detail, but the special conditions of flexbox baseline shouldn't apply to buttons. Actually in Blink this is also overridden, but that was there before the patch I'm porting, that's why I didn't realized before.
WebKit Commit Bot
Comment 29 2019-04-12 05:04:27 PDT
Comment on attachment 367304 [details] Patch Clearing flags on attachment: 367304 Committed r244213: <https://trac.webkit.org/changeset/244213>
WebKit Commit Bot
Comment 30 2019-04-12 05:04:29 PDT
All reviewed patches have been landed. Closing bug.
Note You need to log in before you can comment on or make changes to this bug.