1775045 - CSS Outline overlapping lines

Status: RESOLVED DUPLICATE of bug 266122

(Core :: CSS Parsing and Computation, defect)

Description

[firefox]

Attachment: Firefox-bug-CSS-Outline-property.jpg

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:101.0) Gecko/20100101 Firefox/101.0

Steps to reproduce:

Used CSS "Outline" property to highlight text. The highlighted text is spread over two lines.

HTML & CSS code to reproduce the issue:

<style>
div { width: 300px;}
span { outline: 2px solid orange;}
</style>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span>Potenti nullam ac tortor vitae purus. Malesuada fames ac turpis egestas. Mauris a diam maecenas sed enim ut.</span> Dictum sit amet justo donec enim. A scelerisque purus semper eget duis at tellus at urna. Orci a scelerisque purus semper eget duis at. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Eget mi proin sed libero enim sed faucibus. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ultrices dui sapien eget mi proin sed libero enim. Interdum velit euismod in pellentesque. Erat nam at lectus urna duis convallis convallis tellus id.</p>
</div>

Actual results:

The styling of the "Outline" is not consistent with other browsers (Chrome, Edge).

In FireFox, there is more than one box (closing each box at the end of the line) with overlapping borders.

In Chrome/Edge, there is one box with no overlapping borders.

Expected results:

Expected similar styling behaviour as per Chrome/Edge.

See: https://imgur.com/a/RlHrENV

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.