ladybird icon indicating copy to clipboard operation
ladybird copied to clipboard

Borders rendering incorrectly on broken line boxes

Open Psychpsyo opened this issue 8 months ago • 3 comments

Summary

When I put an outline on a ::before pseudo in ladybird, its left and right borders are painted for each line of text. This does not happen in other browsers (Chrome, Firefox) but I am unsure where/if there is a spec-basis for this. In those browsers, the left/right borders are only drawn once before and after all of the text, not per line.

Operating system

Linux

Steps to reproduce

  1. Put an outline and a lot of text in a ::before pseudo.
  2. Look at the line breaks.
  3. Notice that they are different from other browsers.

Expected behavior

The outlines should be open at line breaks.

Actual behavior

There is borders being painted at the line breaks.

URL for a reduced test case

N/A

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

<!DOCTYPE html>
<style>
  div::before {
    content: 'This text is very long so that it will break onto multiple lines and showcase the bug.';
    border: 2px solid red;
  }
  div {
    max-width: 100px;
  }
</style>
<div></div>

Log output and (if possible) backtrace

none

Screenshots or screen recordings

Top: Ladybird Bottom: Firefox Image

Build flags or config settings

none

Contribute a patch?

  • [ ] I’ll contribute a patch for this myself.

Psychpsyo avatar Mar 29 '25 17:03 Psychpsyo

IIRC we do the correct thing for borders here, so it should just be a case of copying that logic to the outlines painting pass.

AtkinsSJ avatar Mar 29 '25 21:03 AtkinsSJ

IIRC we do the correct thing for borders here, so it should just be a case of copying that logic to the outlines painting pass.

Not sure why I titled this issue that way, I didn't even know outlines were an actual thing in CSS. The example above is for borders.

Psychpsyo avatar Mar 29 '25 21:03 Psychpsyo

And I should have read the test case properly. 😅

That's weird, I'm sure I made this work a while ago.

AtkinsSJ avatar Mar 29 '25 21:03 AtkinsSJ

Just learned that there is a CSS property to control this behavior: box-decoration-break

Psychpsyo avatar Aug 29 '25 20:08 Psychpsyo