paint-order-003-print-ref.html (864B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <style> 4 @page { 5 size: 500px; 6 margin: 0; 7 } 8 :root { 9 print-color-adjust: exact; 10 } 11 body { 12 margin: 0; 13 } 14 </style> 15 <div style="height:100px; background:green;"></div> 16 <div style="position:absolute; z-index:-1; left:0; bottom:0; width:100px; height:100px; background:cyan;"></div> 17 <div style="position:absolute; right:0; bottom:0; width:100px; height:100px; background:yellow;"></div> 18 <div style="display:flow-root; margin:0 50px; height:350px; background:#ddd;"> 19 <p>The margin area above this page should be green. No red.</p> 20 <p>The cyan square in the bottom left corner should be overlapped by the gray document background.</p> 21 <p>The yellow square in the bottom right corner should be on top of the gray document background.</p> 22 </div>