dimensions-012-print.html (2468B)
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="Margins around margin boxes."> 5 <meta name="flags" content="ahem"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 7 <link rel="match" href="dimensions-012-print-ref.html"> 8 <style> 9 :root { 10 print-color-adjust: exact; 11 } 12 @page { 13 margin: 4em 5em 8em 7em; 14 width: 20em; 15 height: 16em; 16 font: 16px/1 Ahem; 17 white-space: pre-wrap; 18 19 @top-left-corner { 20 vertical-align: top; 21 text-align: left; 22 margin: auto; 23 width: fit-content; 24 height: fit-content; 25 content: "x x\a\a0x\ax x"; 26 background: pink; 27 } 28 29 /* Top-left has a min content width of 3em. Top-right has an inner min 30 content width of 2em. Additionally, it has 25% margins on each side. In 31 the horizontal direction that means 20em*0.25 = 5em on each side. Outer 32 min content width for top-right becomes 12em. 33 34 Available space is 20em. Unused space is 5em. Total flex is 15. Left flex 35 is 3. Right flex is 12. 36 37 Left outer width: 3em + 5em*3/15 = 4em 38 Right outer width: 12em + 5em*12/15 = 16em */ 39 @top-left { 40 vertical-align: top; 41 text-align: left; 42 content: "xxx"; 43 background: hotpink; 44 } 45 @top-right { 46 vertical-align: top; 47 text-align: left; 48 margin: 25%; 49 content: "xx"; 50 background: yellow; 51 } 52 53 /* Right-top has an inner min content height of 2em. It's margin-top is 1em, 54 so the outer min content height becomes 3em. Right-bottom has an inner 55 min content height of 1em. Additionally, it has 25% margins on each side. 56 In the vertical direction that means 16em*0.25 = 4em on each side. Outer 57 min content height for right-bottom becomes 9em. 58 59 Available space is 16em. Unused space is 4em. Total flex is 12. Top flex 60 is 3. Bottom flex is 9. 61 62 Top outer height: 3em + 4em*3/12 = 4em 63 Bottom outer height: 9em + 4em*9/12 = 12em */ 64 @right-top { 65 vertical-align: top; 66 text-align: left; 67 margin-top: 1em; 68 content: "x\ax"; 69 background: hotpink; 70 } 71 @right-bottom { 72 vertical-align: top; 73 text-align: left; 74 margin: 25%; 75 content: "x"; 76 background: yellow; 77 } 78 } 79 80 body { 81 background: blue; 82 } 83 </style>