Intent to Prototype: Full and unprefixed box-decoration-break support

159 views
Skip to first unread message

Morten Stenshorne

unread,
Jun 20, 2024, 5:18:34 AMJun 20
to blink-dev

Contact emails

mste...@chromium.org

Explainer

None

Specification

https://www.w3.org/TR/css-break-3/#break-decoration

Summary

Support box-decoration-break:clone both for inline fragmentation (line layout) and block fragmentation (pagination for printing, multicol). Traditionally in Blink, only box-decoration-break:slice (the initial value) has been supported for block fragmentation, whereas for inline fragmentation, box-decoration-break:clone was also supported, but only when using the prefixed -webkit-box-decoration-break property. See https://drafts.csswg.org/css-break/#break-decoration



Blink component

Blink>Layout

Motivation

The box-decoration-break: clone CSS property is a useful feature because it addresses a common issue with how box decorations (backgrounds, borders, padding, etc.) are handled when an element is broken across multiple lines, columns, or pages. By default, when an element is broken into fragments, its box decorations are treated as if they belong to the original, unbroken element. This means: Backgrounds might be cut off or appear incomplete on the fragments. Borders might not wrap around each fragment individually. Padding might not be applied consistently across fragments. This can lead to visual inconsistencies and unexpected layouts, especially when dealing with complex or dynamic content. box-decoration-break: clone changes this behavior by treating each fragment of a broken element as if it were its own independent element. This means: Backgrounds are applied to each fragment in full, ensuring a consistent appearance. Borders wrap around each fragment individually, creating a more visually appealing and intuitive layout. Padding is applied to each fragment as if it were a separate element, maintaining consistent spacing.



Initial public proposal

None

TAG review

None

TAG review status

Not applicable

Risks



Interoperability and Compatibility

Low.



Gecko: Shipped/Shipping

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/366) Currently WebKit and Blink only support -webkit-box-decoration-break, and only for inline fragmentation (i.e. no block fragmentation).

Web developers: No signals (https://issues.chromium.org/issues/40415661)

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None



Debuggability

None



Is this feature fully tested by web-platform-tests?

Yes

Flag name on chrome://flags

BoxDecorationBreak

Finch feature name

None

Non-finch justification

None

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/41295617

Estimated milestones

DevTrial on desktop128
DevTrial on Android128


Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5162398704205824?gate=5078313008889856

This intent message was generated by Chrome Platform Status.
Reply all
Reply to author
Forward
0 new messages