Bug 40020
| Summary: | Inline elements with white-space:nowrap seem to behave incorrectly inside the container with display:table | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Ilya (SelenIT) <selenit> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | ahmad.saleem792, ap, bfulgham, rniwa, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | 528+ (Nightly build) | ||
| Hardware: | PC | ||
| OS: | All | ||
| URL: | http://silverflame.at.tut.by/ff_table_nowrap.html | ||
Ilya (SelenIT)
When two inline-level elements with white-space:nowrap are separated just with a white-space character(s) and appear inside the element with display:table (this is often used to gain new formatting context for floats etc.), these white-space characters are ignored and the elements are displayed in one line without spaces (as if they turned into table cells).
Reproducible: Always
Steps to Reproduce:
1. Open the testcase page with Webkit browser (e.g. Chrome 5)
2. Look at the rendering of the rainbow-colored inline elements and red-bordered fixed width container.
Actual Results:
The rainbow-colored elements are rendered in one line without any spaces, and the container exceeds the given width value.
Expected Results:
I expect that the elements should be space-separated (like regular words) and wrap to the next line (as a whole) to fit the given container width.
MSIE8, Opera 9.63-10.53, and FF3.6 display the testcase page in three lines. There was the same bug in FF till 3.5, but it has been fixed (https://bugzilla.mozilla.org/show_bug.cgi?id=509477).
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Ahmad Saleem
I am able to reproduce this issue in Safari 15.6 on macOS 12.5 and able to obtain test case from Mozilla Bugzilla (mentioned in Comment 0) [NOTE - It matches with copy of 2014 Wayback Archive of test case URL].
Link - https://bug509477.bmoattachments.org/attachment.cgi?id=393551
In above test case - Safari 15.6 and Chrome Canary 106 - both show the output in single line <div> while Firefox Nightly 104 show the <div> as square and not expanded like single line.
I am not sure on Web-spec and what is desired behavior but wanted to share updated results here. Thanks!
Radar WebKit Bug Importer
<rdar://problem/97489479>