Bug 40020 – Inline elements with white-space:nowrap seem to behave incorrectly inside the container with display:table

• Status: NEW
• Component: CSS

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

[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>