dimensions-003-print.html (1369B)
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="Test with auto lengths and margins/border/padding."> 5 <meta name="flags" content="ahem"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 7 <link rel="match" href="dimensions-003-print-ref.html"> 8 <style> 9 :root { 10 print-color-adjust: exact; 11 } 12 @page { 13 margin: 6em; 14 width: 20em; 15 height: 16em; 16 font: 16px/1 Ahem; 17 white-space: pre-wrap; 18 19 /* Available size for top edge margins is 20em. 20 21 Min/max content width of top-left is 22 (left border/padding + content + right padding/border/margin) 23 is 0.25em+0.25em+1em+0.25em+0.25em+1em = 3em 24 25 Min content width of top-right is 1em + 1em = 2em 26 27 Unused space becomes 15em. 28 29 Left flex: 3 30 Right flex: 2 31 Total flex: 5 32 33 Left width: 3em + 15em * 3/5 = 12em 34 Right width: 2em + 15em * 2/5 = 8em */ 35 @top-left { 36 text-align: left; 37 vertical-align: top; 38 margin-right: 1em; 39 border: solid 0.25em; 40 padding: 0.25em; 41 content: "x"; 42 } 43 @top-right { 44 text-align: left; 45 vertical-align: top; 46 margin-left: 1em; 47 background: yellow; 48 content: "x"; 49 } 50 } 51 </style>