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

[Morten Stenshorne]

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 desktop

128

DevTrial on Android

128

Link to entry on the Chrome Platform Status

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

This intent message was generated by Chrome Platform Status.