Bug 223687

Summary:

box-decoration-break: clone is not taken into account when breaking lines

Product:

WebKit

Reporter:

Johannes Odland <johannes.odland>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

karlcow, mmaxfield, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 14

Hardware:

Unspecified

OS:

Unspecified

See Also:

https://bugs.webkit.org/show_bug.cgi?id=267846

Attachments:

Description	Flags
Screenshot shows inline-elements overflowing container due to box-decoration-break: clone	none
Testcase reproducing the bug	none
A screenshot of Safari 16.1 and 16.4. The issue is present in 16.1, but fixed in 16.4	none

Description Johannes Odland 2021-03-24 05:01:23 PDT

Created attachment 424124 [details]
Screenshot shows inline-elements overflowing container due to box-decoration-break: clone

Steps to reproduce the problem:
1. Add a span inside a div.
2. Define a width on the div.
3. Set `box-decoration-break: clone`, `padding: 15px` and `word-break: break-all` on the span.
4. Fill the span with text.

https://codepen.io/johannesodland/pen/BaQgEyZ

What is the expected behavior?
The padding added on each line through `box-decoration-break: clone` should be accounted for when breaking lines. Each padding-box should stay within the container. 

What went wrong?
The extra padding is not accounted for when breaking lines and the extra padding overflows the container.

Did this work before? N/A 

Does this work in other browsers? Yes

Comment 1 Johannes Odland 2021-03-24 05:02:35 PDT

Created attachment 424125 [details]
Testcase reproducing the bug

Comment 2 Radar WebKit Bug Importer 2021-03-31 05:02:13 PDT

<rdar://problem/76048576>

Comment 3 Johannes Odland 2023-04-23 22:53:51 PDT

Created attachment 466058 [details]
A screenshot of Safari 16.1 and 16.4. The issue is present in 16.1, but fixed in 16.4

I have moved the test case for easier testing, and retested in Safari 16.4.

The issue seems to be resolved in Safari 16.4.

Url to test case: https://johannesodland.github.io/browserbugs/safari-box-decoration-break-clone-padding-ignored-issue.html

Comment 4 zalan 2023-04-24 06:45:43 PDT

(In reply to Johannes Odland from comment #3)
> Created attachment 466058 [details]
> A screenshot of Safari 16.1 and 16.4. The issue is present in 16.1, but
> fixed in 16.4
> 
> I have moved the test case for easier testing, and retested in Safari 16.4.
> 
> The issue seems to be resolved in Safari 16.4.
> 
> Url to test case:
> https://johannesodland.github.io/browserbugs/safari-box-decoration-break-
> clone-padding-ignored-issue.html
Thank you for following up on this! This has progressed at 255771@main (this is when we switched over to the new modern line layout for 'clone'. (IFC progression)).