ladybird
ladybird copied to clipboard
Borders rendering incorrectly on broken line boxes
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
- Put an outline and a lot of text in a ::before pseudo.
- Look at the line breaks.
- 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
Build flags or config settings
none
Contribute a patch?
- [ ] I’ll contribute a patch for this myself.
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.
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.
And I should have read the test case properly. 😅
That's weird, I'm sure I made this work a while ago.
Just learned that there is a CSS property to control this behavior: box-decoration-break