HTML formatter breaks layout by introducing newlines

Moved here from https://github.com/microsoft/vscode/issues/144042

Description

The HTML formatter breaks the layout of the page.

Input

The code looked like this before beautification:

<span>
  <span>
    <span>1:02</span
    ><time-dot>.</time-dot
    ><time-decimals>27</time-decimals>
  </span>
</span>

Expected Output

The code should have looked like this after beautification:

<!-- no change? -->
<span>
  <span>
    <span>1:02</span
    ><time-dot>.</time-dot
    ><time-decimals>27</time-decimals>
  </span>
</span>

Actual Output

The code actually looked like this after beautification:

<span>
  <span>
    <span>1:02</span>
    <time-dot>.</time-dot>
    <time-decimals>27</time-decimals>
  </span>
</span>

This introduces newlines (and spaces) before and after the <time-dot> element, which adds visual space between the elements on the page that was not there before:

Steps to Reproduce

Paste into https://beautifier.io/ or format in VSCode.

Environment

OS: N/A

Settings

Default?

[bitwiseman]

@lgarron

This is good bug. Took me looking twice at the image, but that made it clear what the problem is. Thanks!

It appears that you want <time-dot> and <time-decimals> to be treated as “inline” elements.

However, the beautifier doesn’t do the end braces the way you said in your expected output. Once you made the elements “inline”, the expected output would be:

<span>
  <span>
    <span>1:02</span><time-dot>.</time-dot><time-decimals>27</time-decimals>
  </span>
</span>

Question: <time-dot> and <time-decimals> are not valid html elements. Where are you getting them?

[lgarron]

FYI: The bug template says:

• Do not include screenshots! This library is a text processor, we need text inputs and outputs for debugging and fixing issues.

I assume this means “do not submit screenshots without submitting associated text examples”, not “screenshots are forbidden, even if they illustrate the text examples”. Apologies if that’s not the case.