dimensions-009-print.html (2442B)
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 auto lengths. Min content sizes are larger than available size. With center/middle boxes."> 5 <meta name="flags" content="ahem"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 7 <link rel="match" href="dimensions-009-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 18 /* Total min content size is larger than available size. Shrink 19 proportionally to min sizes. Note that max content sizes don't affect 20 sizing in this mode. 21 22 Left margin box min: 18em 23 Center margin box min: 12em 24 Right margin box min: 6em 25 Flex will be the same as min. 26 27 First resolve the width of center, by evaluating how much space the 28 double of each side box would take up. Pick the larger (to preserve 29 centering), and subtract that from available space. 30 31 Available space: 20em 32 Center flex: 12 (like min) 33 34 Left double min (and flex factor): 18em * 2 = 36em 35 Total flex left double + center: 36 + 12 = 48 36 Unused space with double left: 20em - 36em - 12em = -28em 37 Width of double left: 36em + (-28em) * 36 / 48 = 15em 38 39 Right double min (and flex factor): 6em * 2 = 12em 40 Total flex right double + center: 12 + 12 = 24 41 Unused space with double right: 20em - 12em - 12em = -4em 42 Width of double right: 12em + (-4em) * 12 / 24 = 10em 43 44 Width of double left (15em) is larger than width of double right 45 (10em). Pick this one and resolve center, by using those flex values. 46 Width of center: 12em + (-28em) * 12 / 48 = 5em. 47 Left and right will share the rest, i.e. 7.5em on each.*/ 48 49 @top-left { 50 text-align: left; 51 vertical-align: top; 52 content: "xxxxxxxxxxxxxxxxxx xxxxxxx"; 53 margin-bottom: 4em; 54 background: hotpink; 55 } 56 @top-center { 57 text-align: left; 58 vertical-align: top; 59 margin-top: 2em; 60 margin-bottom: 2em; 61 content: "xxxxxxxxxxxx"; 62 background: cyan; 63 } 64 @top-right { 65 text-align: left; 66 vertical-align: top; 67 margin-top: 4em; 68 content: "xxxxxx"; 69 background: yellow; 70 } 71 } 72 </style>