Bug 164166 – Rendering flexbox children across columns

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Danny Williams]

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.

[Radar WebKit Bug Importer]

<rdar://problem/29055587>

[Dave Hyatt]

Created attachment 306390 [details]
Patch

[Build Bot]

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

[Build Bot]

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

[Build Bot]

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

[Build Bot]

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

[Build Bot]

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

[Build Bot]

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

[Dave Hyatt]

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).

[Ryan Haddad]

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

[Ryan Haddad]

Reverted r215041 for reason:

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

Committed r215067: <http://trac.webkit.org/changeset/215067>

[Dave Hyatt]

Created attachment 306988 [details]
Patch

[Dave Hyatt]

Relanded in r215320.