Bug 223687

Summary: box-decoration-break: clone is not taken into account when breaking lines
Product: WebKit Reporter: Johannes Odland <johannes.odland>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: karlcow, mmaxfield, simon.fraser, webkit-bug-importer, zalan
Priority: P2 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

Johannes Odland
Reported 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
Attachments
Screenshot shows inline-elements overflowing container due to box-decoration-break: clone (30.08 KB, image/png)
2021-03-24 05:01 PDT, Johannes Odland 		no flags
Details
Testcase reproducing the bug (764 bytes, text/html)
2021-03-24 05:02 PDT, Johannes Odland 		no flags
Details
A screenshot of Safari 16.1 and 16.4. The issue is present in 16.1, but fixed in 16.4 (1.02 MB, image/png)
2023-04-23 22:53 PDT, Johannes Odland 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Johannes Odland
Comment 1 2021-03-24 05:02:35 PDT
Created attachment 424125 [details] Testcase reproducing the bug
Radar WebKit Bug Importer
Comment 2 2021-03-31 05:02:13 PDT
<rdar://problem/76048576>
Johannes Odland
Comment 3 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
zalan
Comment 4 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)).
Note You need to log in before you can comment on or make changes to this bug.