demo · v130

paginated print preview

The chromestatus motivation calls out block fragmentation — "pagination for printing, multicol" — as the gap Chrome 130 closes. Before Chrome 130, box-decoration-break only honoured slice for block fragmentation in Blink. Now clone works for printing too. Compare a fragmented receipt-style block in a side-by-side simulated print preview.

This preview uses CSS multi-column layout to simulate printer page breaks so you can see the visual difference without sending the page to a printer. The browser's actual print pipeline applies the same rule — try File → Print on this page to see clone render on real printed pages too.

quick view:

why this matters for print

Receipts, invoices, packing slips, multi-page contracts — anything you generate as a printable web document and that runs longer than one page — historically lost their visual identity on every page after the first. The styled "card" was just a frame around the first fragment; subsequent pages showed only borderless content because Blink ignored box-decoration-break: clone at page-break boundaries.

Chrome 130 honours clone for block fragmentation. Each printed page that contains a fragment of the styled block gets its own full set of borders, padding, and shadows — the receipt looks like a receipt on every page.

the code

@media print {
  /* No prefix needed in Chrome 130+. Works at page breaks too. */
}

.receipt {
  border: 2px solid #0022ff;
  background: #f0f4ff;
  box-shadow: 4px 4px 0 #0022ff;
  padding: 0.5rem 0.7rem;
  box-decoration-break: clone;  /* renders correctly across page breaks */
}

see also