paint-order-003-print.html (1942B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://drafts.csswg.org/css-page-3/#painting"> 4 <meta name="assert" content="Test margin boxes with z-index."> 5 <link rel="match" href="paint-order-003-print-ref.html"> 6 <style> 7 :root { 8 print-color-adjust: exact; 9 } 10 @page { 11 size: 500px; 12 margin: 50px; 13 margin-top: 100px; 14 @top-left-corner { 15 content: ""; 16 width: 100px; 17 height: 100px; 18 margin-right: -50px; 19 background: green; 20 z-index: -1; 21 } 22 @top-left { 23 content: ""; 24 border-left: 50px solid red; 25 border-right: 50px solid red; 26 width: 100px; 27 height: 100px; 28 background: green; 29 z-index: -2; 30 } 31 @top-center { 32 content: ""; 33 width: 100px; 34 height: 100px; 35 z-index: 1; 36 background: green; 37 } 38 @top-right { 39 content: ""; 40 border-left: 50px solid red; 41 border-right: 50px solid red; 42 width: 100px; 43 height: 100px; 44 background: green; 45 z-index: -2; 46 } 47 @top-right-corner { 48 content: ""; 49 width: 100px; 50 height: 100px; 51 margin-left: -50px; 52 background: green; 53 z-index: -1; 54 } 55 56 @bottom-left-corner { 57 content: ""; 58 width: 100px; 59 height: 100px; 60 margin-top: -50px; 61 margin-right: -50px; 62 background: cyan; 63 z-index: -1; 64 } 65 @bottom-right-corner { 66 content: ""; 67 width: 100px; 68 height: 100px; 69 margin-top: -50px; 70 margin-left: -50px; 71 background: yellow; 72 } 73 } 74 body { 75 margin: 0; 76 background: #ddd; 77 } 78 </style> 79 <p>The margin area above this page should be green. No red.</p> 80 <p>The cyan square in the bottom left corner should be overlapped by the gray document background.</p> 81 <p>The yellow square in the bottom right corner should be on top of the gray document background.</p>