Buttons with display: inline are empty

[Psychpsyo]

Summary

Putting display: inline on a <button> makes it be empty.

Operating system

Linux

Steps to reproduce

1. <button style="display: inline">Hello!</button>

Expected behavior

<button style="display: inline">This should be visible.</button>

Actual behavior

<button style="display: inline">This is invisible.</button>

URL for a reduced test case

data:text/html,<button style="display: inline">Hello!</button>

HTML/SVG/etc. source for a reduced test case

<button style="display: inline">Hello!</button>

Log output and (if possible) backtrace

4045.236 WebContent(6905): FIXME: InlineFormattingContext::dimension_box_on_line got unexpected box in inline context:
4045.236 WebContent(6905): BlockContainer <input> (not painted) [0+0+0 0 0+0+0] [0+0+0 0 0+0+0] children: not-inline
  BlockContainer <(anonymous)> (not painted) flex-container(column) [0+0+0 0 0+0+0] [0+0+0 0 0+0+0] [FFC] children: not-inline
    BlockContainer <(anonymous)> (not painted) [0+0+0 0 0+0+0] [0+0+0 0 0+0+0] [BFC] children: inline
      BlockContainer <span> (not painted) inline-block [0+0+0 0 0+0+0] [0+0+0 0 0+0+0] [BFC] children: inline
        TextNode <#text>

Screenshots or screen recordings

Reduced test case in Ladybird:

Reduced test case in Firefox:

Build flags or config settings

No response

Contribute a patch?

• I’ll contribute a patch for this myself.

[Psychpsyo]

Some update fixed the height of buttons like in the test a while back, so here's a new screenshot of what this looks like now:

(very zoomed in)

If you add more content after the button you can see that it is currently cut in half, by virtue of the right half re-appearing. (though still without content, it is also not big enough for that)