Bug 230152 – Web Inspector: console.log breaks test into separate elements when a line-break is present / line-height truncates text but does not shrink actual element below original height

• Status: NEW
• Component: Web Inspector

[Brandon McConnell]

Created attachment 437870 [details]
screenshot of space between multi-line console log renders

Steps to reproduce:

When using console.log() to log multiple lines of text to the console, using `\n` or `\x0a` to break text onto new lines, there is an undesirable space between the lines of text that occurs when decreasing the font-size of the console log output (using `%c`). This space does not occur, however, at the default font-size or when increasing the font-size using the same method.

This can be seen most clearly by styling multiple lines of text to include a background-color, as I demonstrate in the example scripts below. Run these three scripts to see the effects of each (pictured in the attached screenshot):

(1) `console.log('%ctest\n%ctest', 'background-color: #f00', 'background-color: #00f')`
(2) `console.log('%ctest\n%ctest', 'background-color: #f00; font-size: 200%', 'background-color: #00f; font-size: 200%')`
(3) `console.log('%ctest\n%ctest', 'background-color: #f00; font-size: 50%', 'background-color: #00f; font-size: 50%')`

==========================

Actual results:

Currently, adding a line break `\n` or `\x0a` causes the logged output to split into separate lines with a gap in-between.

==========================

Expected results:

There should be no gap between multiple lines of text logged to the console by default, at any font-size, unless a specific and greater line-height is specified.

[Radar WebKit Bug Importer]

<rdar://problem/83240417>