Bug 164166 - Rendering flexbox children across columns
Summary: Rendering flexbox children across columns
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Major
Assignee: Dave Hyatt
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2016-10-28 17:07 PDT by Danny Williams
Modified: 2017-04-13 09:37 PDT (History)
7 users (show)

See Also:


Attachments
Screen capture of rendering (13.26 KB, image/png)
2016-10-28 17:07 PDT, Danny Williams
no flags Details
Patch (6.99 KB, patch)
2017-04-06 08:26 PDT, Dave Hyatt
zalan: review+
buildbot: commit-queue-
Details | Formatted Diff | Diff
Archive of layout-test-results from ews101 for mac-elcapitan (1003.68 KB, application/zip)
2017-04-06 09:33 PDT, Build Bot
no flags Details
Archive of layout-test-results from ews105 for mac-elcapitan-wk2 (1.01 MB, application/zip)
2017-04-06 09:42 PDT, Build Bot
no flags Details
Archive of layout-test-results from ews116 for mac-elcapitan (1.79 MB, application/zip)
2017-04-06 09:45 PDT, Build Bot
no flags Details
Patch (8.03 KB, patch)
2017-04-13 08:07 PDT, Dave Hyatt
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Danny Williams 2016-10-28 17:07:05 PDT
Created attachment 293248 [details]
Screen capture of rendering

I've encountered an issue where Webkit is rendering text across columns (meaning the top portions of characters render at the bottom of the 1st column and the bottom portion of the characters render in the top of the 2nd column).

http://codepen.io/dsongman/pen/ORYeEa

The DOM structure looks like
<div class="wrapper">
  <div class="row">
    <label>Label</label><input type="text">
  </div>
  ... (more rows with same structure) ...
</div>

And CSS is:
.wrapper {
  column-count: 2
}
.row {
  display: flex;
}

The demo has 5 rows. The third row will render partially in both columns.
Comment 1 Radar WebKit Bug Importer 2016-11-01 17:03:44 PDT
<rdar://problem/29055587>
Comment 2 Dave Hyatt 2017-04-06 08:26:13 PDT
Created attachment 306390 [details]
Patch
Comment 3 Build Bot 2017-04-06 09:33:41 PDT
Comment on attachment 306390 [details]
Patch

Attachment 306390 [details] did not pass mac-ews (mac):
Output: http://webkit-queues.webkit.org/results/3485143

New failing tests:
imported/blink/fast/multicol/span/button-with-spanner-crash.html
imported/blink/fast/multicol/flexbox.html
Comment 4 Build Bot 2017-04-06 09:33:44 PDT
Created attachment 306393 [details]
Archive of layout-test-results from ews101 for mac-elcapitan

The attached test failures were seen while running run-webkit-tests on the mac-ews.
Bot: ews101  Port: mac-elcapitan  Platform: Mac OS X 10.11.6
Comment 5 Build Bot 2017-04-06 09:42:57 PDT
Comment on attachment 306390 [details]
Patch

Attachment 306390 [details] did not pass mac-wk2-ews (mac-wk2):
Output: http://webkit-queues.webkit.org/results/3485155

New failing tests:
imported/blink/fast/multicol/span/button-with-spanner-crash.html
imported/blink/fast/multicol/flexbox.html
Comment 6 Build Bot 2017-04-06 09:42:58 PDT
Created attachment 306394 [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
Comment 7 Build Bot 2017-04-06 09:45:10 PDT
Comment on attachment 306390 [details]
Patch

Attachment 306390 [details] did not pass mac-debug-ews (mac):
Output: http://webkit-queues.webkit.org/results/3485151

New failing tests:
imported/blink/fast/multicol/span/button-with-spanner-crash.html
imported/blink/fast/multicol/flexbox.html
Comment 8 Build Bot 2017-04-06 09:45:11 PDT
Created attachment 306395 [details]
Archive of layout-test-results from ews116 for mac-elcapitan

The attached test failures were seen while running run-webkit-tests on the mac-debug-ews.
Bot: ews116  Port: mac-elcapitan  Platform: Mac OS X 10.11.6
Comment 9 Dave Hyatt 2017-04-06 09:45:38 PDT
Landed in r215041 with two minor tweaks to fix the two failing tests:
(1) Don't run updateMinimumPageHeight for splittable objects.
(2) Don't run this code for flexboximpls (buttons, text controls).
Comment 10 Ryan Haddad 2017-04-06 15:45:40 PDT
The LayoutTest for this change is failing on ios-simulator. Is this expected? https://build.webkit.org/results/Apple%20iOS%2010%20Simulator%20Release%20WK2%20(Tests)/r215060%20(476)/results.html
Comment 11 Ryan Haddad 2017-04-06 16:24:49 PDT
Reverted r215041 for reason:

The LayoutTest for this change is failing on ios-simulator.

Committed r215067: <http://trac.webkit.org/changeset/215067>
Comment 12 Dave Hyatt 2017-04-13 08:07:50 PDT
Created attachment 306988 [details]
Patch
Comment 13 Dave Hyatt 2017-04-13 09:37:15 PDT
Relanded in r215320.