Bug 144696 – `width: 1%` on nested table cell causes its table to hog horizontal space

• Status: RESOLVED
• Resolution: FIXED
• Component: Tables

[Chris Rebert]

Created attachment 252491 [details]
Screenshot of example demonstrating bug

Platform: OS X Yosemite
Safari Version: 8.0.5 (10600.5.17)

Summary:
Adding a `width: 1%;` style to a nested table cell causes its sibling cell to hog horizontal space.
Firefox and IE11/Edge don't suffer from this problem.

To reproduce:
1. Open http://jsfiddle.net/eejzdf4a/ in Safari.
2. Look at the Result pane in the lower-right of the window.

Expected results:
In the portion of the example titled "Wonky", the green and yellow cells
should each take up a somewhat equal amount of horizontal space.
The green and yellow cells should have the same boundaries that they do
in the portion of the example titled '"Fixed" by removing the one-percent class'.
(See the Firefox screenshot. IE11/Edge gives the same result as Firefox.)

Actual results:
In the portion of the example titled "Wonky", the green cell takes up a
very small amount of horizontal space, whereas the yellow cell
takes up almost all of the horizontal space.
The green and yellow cells have different boundaries than they do
in the portion of the example titled '"Fixed" by removing the one-percent class'.
(See the Safari screenshot.)

Bootstrap bug report:
    https://github.com/twbs/bootstrap/issues/16372
Original corresponding Chrome bug report:
    https://code.google.com/p/chromium/issues/detail?id=427994
Other, more complex example of the bug, that uses Bootstrap:
    http://jsfiddle.net/rq3shh3t/2/

[Chris Rebert]

Created attachment 252493 [details]
Copy of the JS Fiddle example

[Chris Rebert]

Also filed this in Radar:

<rdar://problem/20839572>

[Myles C. Maxfield]

<rdar://problem/20839572>

[Chris Rebert]

Fixed in Chrome: https://codereview.chromium.org/1921973005

[zalan]

(In reply to comment #4)
> Fixed in Chrome: https://codereview.chromium.org/1921973005
Awesome! I'll take a look at it.
Thanks for the headsup.

[zalan]

Created attachment 279505 [details]
Patch

[Tim Horton]

Comment on attachment 279505 [details]
Patch

rs=me on the merge, hyatt said it was ok too

[Build Bot]

Comment on attachment 279505 [details]
Patch

Attachment 279505 [details] did not pass ios-sim-ews (ios-simulator-wk2):
Output: http://webkit-queues.webkit.org/results/1355742

New failing tests:
fast/table/max-width-integer-overflow.html
fast/table/border-collapsing/cached-change-tbody-border-width.html
fast/table/border-collapsing/cached-change-row-border-width.html

[Build Bot]

Created attachment 279510 [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.4

[zalan]

Created attachment 279511 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 279511 [details]
Patch

Clearing flags on attachment: 279511

Committed r201234: <http://trac.webkit.org/changeset/201234>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Chris Rebert]

Wonderful! Thanks zalan!

Updated the Wall accordingly: https://github.com/twbs/bootstrap/pull/19958