dimensions-010-print.html (1507B)
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/#margin-dimension"> 4 <meta name="assert" content="Zero min/max content min/max size."> 5 <link rel="match" href="dimensions-010-print-ref.html"> 6 <style> 7 :root { 8 print-color-adjust: exact; 9 } 10 @page { 11 margin: 100px; 12 size: 650px 500px; 13 14 @top-left { 15 background: hotpink; 16 content: ""; 17 } 18 @top-center { 19 background: cyan; 20 content: ""; 21 } 22 @top-right { 23 background: yellow; 24 content: ""; 25 } 26 27 @left-top { 28 background: yellow; 29 content: ""; 30 } 31 @left-middle { 32 background: cyan; 33 content: ""; 34 } 35 @left-bottom { 36 background: hotpink; 37 content: ""; 38 } 39 40 @right-top { 41 background: red; 42 content: ""; 43 } 44 @right-middle { 45 background: cyan; 46 content: "\a0"; 47 } 48 @right-bottom { 49 background: red; 50 content: ""; 51 } 52 53 @bottom-left { 54 background: hotpink; 55 content: "\a0"; 56 } 57 @bottom-center { 58 background: red; 59 content: ""; 60 } 61 /* Since there's a center box here, although it doesn't require any space, 62 it will be there right in the center, meaning that the hotpink box, which 63 *does* require space, can only receive everything to the left of the 64 center box. */ 65 @bottom-right { 66 background: yellow; 67 content: ""; 68 } 69 } 70 </style>