page-size-008-print-ref.html (1097B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <style> 4 @page { 5 size: 200px 160px; 6 margin: 0; 7 } 8 @page smaller { 9 size: 160px 100px; 10 } 11 @page larger { 12 size: 640px 400px; 13 } 14 :root { 15 print-color-adjust: exact; 16 } 17 body { 18 margin: 0; 19 } 20 .container { 21 display: flow-root; 22 } 23 .smaller { 24 page: smaller; 25 } 26 .larger { 27 page: larger; 28 } 29 .float { 30 float: left; 31 width: 50px; 32 height: 80px; 33 } 34 .smaller .float { 35 width: 40px; 36 height: 50px; 37 } 38 .larger .float { 39 width: 160px; 40 height: 200px; 41 } 42 </style> 43 <div class="container larger" style="width:640px; background:pink;"> 44 <div style="break-after:page;">first</div> 45 <div class="float"></div> 46 second 47 </div> 48 <div class="container" style="width:200px; background:yellow;"> 49 <div style="break-after:page;">third</div> 50 <div class="float"></div> 51 fourth 52 </div> 53 <div class="container smaller" style="width:160px; background:cyan;"> 54 <div style="break-after:page;">fifth</div> 55 <div class="float"></div> 56 sixth 57 </div>