body-background-slr-print-ref.html (784B)
1 <!DOCTYPE html> 2 <style> 3 :root { 4 print-color-adjust: exact; 5 } 6 body { 7 margin: 20px; 8 background: linear-gradient(lightgray 0%, lightgray 50%, white 50%, white 100%) 9 } 10 @page { 11 size: 800px 600px; 12 margin: 0; 13 } 14 </style> 15 <p style="writing-mode:horizontal-tb; position:absolute; right:0; top:0; width:200px;"> 16 There should be a bottom-left-aligned blue box on the first page, and a 17 bottom-left-aligned hotpink box on the second page. 18 The background of the first page is lightgray, and the background of the 19 second page is white. 20 </p> 21 <div style="width:600px; height:100px; break-inside:avoid; background:blue; margin-top:480px;"></div> 22 <div style="height:500px"></div> 23 <div style="width:800px; height:100px; break-inside:avoid; background:hotpink; margin-left:-20px;"></div>