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
Summary: Web Inspector: console.log breaks test into separate elements when a line-bre...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-09-10 07:36 PDT by Brandon McConnell
Modified: 2021-09-17 07:37 PDT (History)
2 users (show)

See Also:


Attachments
screenshot of space between multi-line console log renders (137.10 KB, image/png)
2021-09-10 07:36 PDT, Brandon McConnell
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Brandon McConnell 2021-09-10 07:36:57 PDT
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.
Comment 1 Radar WebKit Bug Importer 2021-09-17 07:37:13 PDT
<rdar://problem/83240417>