| <!DOCTYPE html> |
| <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> |
| <style> |
| @page { |
| size: 200px 160px; |
| margin: 0; |
| } |
| @page smaller { |
| size: 160px 100px; |
| } |
| @page larger { |
| size: 640px 400px; |
| } |
| :root { |
| print-color-adjust: exact; |
| } |
| body { |
| margin: 0; |
| } |
| .container { |
| display: flow-root; |
| } |
| .smaller { |
| page: smaller; |
| } |
| .larger { |
| page: larger; |
| } |
| .float { |
| float: left; |
| width: 50px; |
| height: 80px; |
| } |
| .smaller .float { |
| width: 40px; |
| height: 50px; |
| } |
| .larger .float { |
| width: 160px; |
| height: 200px; |
| } |
| </style> |
| <div class="container larger" style="width:640px; background:pink;"> |
| <div style="break-after:page;">first</div> |
| <div class="float"></div> |
| second |
| </div> |
| <div class="container" style="width:200px; background:yellow;"> |
| <div style="break-after:page;">third</div> |
| <div class="float"></div> |
| fourth |
| </div> |
| <div class="container smaller" style="width:160px; background:cyan;"> |
| <div style="break-after:page;">fifth</div> |
| <div class="float"></div> |
| sixth |
| </div> |
