dimensions-007-print.html (4788B)
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. Max content sizes are larger than available size, but their min sizes are not. With center boxes."> 5 <meta name="flags" content="ahem"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 7 <link rel="match" href="dimensions-007-print-ref.html"> 8 <style> 9 :root { 10 print-color-adjust: exact; 11 } 12 @page { 13 margin: 12em 6em; 14 width: 20em; 15 height: 3em; 16 font: 16px/1 Ahem; 17 18 /* Left min: 1em 19 Left max: 9em 20 Center min: 1em 21 Center max: 17em 22 Right min: 1em 23 Right max: 3em 24 Min total: 1em + 1em + 1em = 3em 25 Max total: 9em + 17em + 3em = 29em 26 27 Max content sizes are larger than available size. Min content sizes are 28 smaller. Start at min size, and distribute extra space proportionally to 29 the difference between max and min. 30 31 First resolve the width of center, by evaluating how much space the 32 double of each side box would take up. Pick the larger (to preserve 33 centering), and subtract that from available space. 34 35 Available space: 20em 36 Center flex: 17em - 1em = 16 37 38 Left double min: 1em * 2 = 2em 39 Left double flex (max - min): (9em-1em)*2 = 16 40 Total flex left double + center: 16 + 16 = 32 41 Unused space with double left: 20em - (2em + 1em) = 17em 42 Width of double left: 2em + 17em * 16 / 32 = 10.5em 43 44 Right double min: 1em * 2 = 2em 45 Right double flex (max - min): (3em-1em)*2 = 4 46 Total flex right double + center: 4 + 16 = 20 47 Unused space with double right: 20em - (2em + 1em) = 17em 48 Width of double right: 2em + 17em * 4 / 20 = 5.4em 49 50 Width of double left (10.5em) is larger than width of double right 51 (5.4em). Pick this one and resolve center, by using those flex values. 52 Width of center: 1em + 17em * 16/32 = 9.5em. 53 54 Now give the rest in equal parts to left and right: 55 (20em - 9.5em) / 2 = 5.25em */ 56 @top-left { 57 text-align: left; 58 vertical-align: top; 59 margin-bottom: 2em; 60 height: 10em; 61 content: "x x x x x"; 62 background: hotpink; 63 } 64 @top-center { 65 text-align: left; 66 vertical-align: top; 67 margin-bottom: 1em; 68 height: 10em; 69 content: "x x x x x x x x x"; 70 background: cyan; 71 } 72 @top-right { 73 text-align: left; 74 vertical-align: top; 75 height: 10em; 76 content: "x x"; 77 background: yellow; 78 } 79 80 /* Left min: 3em 81 Left max: 51em 82 Center min: 4em 83 Center max: 36em 84 Right min: 7em 85 Right max: 23em 86 Min total: 3em + 4em + 7em = 14em 87 Max total: 51em + 36em + 23em = 110em 88 89 Max content sizes are larger than available size. Min content sizes are 90 smaller. Start at min size, and distribute extra space proportionally to 91 the difference between max and min. 92 93 First resolve the width of center, by evaluating how much space the 94 double of each side box would take up. Pick the larger (to preserve 95 centering), and subtract that from available space. 96 97 Available space: 20em 98 Center flex: 36em - 4em = 32 99 100 Left double min: 3em * 2 = 6em 101 Left double flex (max - min): (51em-3em)*2 = 96 102 Total flex left double + center: 96 + 32 = 128 103 Unused space with double left: 20em - (6em + 4em) = 10em 104 Width of double left: 6em + 10em * 96 / 128 = 13.5em 105 106 Right double min: 7em * 2 = 14em 107 Right double flex (max - min): (23em-7em)*2 = 32 108 Total flex right double + center: 32 + 32 = 64 109 Unused space with double right: 20em - (14em + 4em) = 2em 110 Width of double right: 14em + 2em * 32 / 64 = 15em 111 112 Width of double right (15em) is larger than width of double left (13.5em). 113 Pick this one and resolve center, by using those flex values. 114 Width of center: 4em + 2em * 32/64 = 5em. 115 116 Now give the rest in equal parts to left and right: 117 (20em - 5em) / 2 = 7.5em */ 118 @bottom-left { 119 text-align: left; 120 vertical-align: top; 121 margin-top: 2em; 122 height: 10em; 123 content: "x xx x xxx xx xx xx xx xx xx xx x xx xx xx xx xxx x"; 124 background: yellow; 125 } 126 @bottom-center { 127 text-align: left; 128 vertical-align: top; 129 margin-top: 1em; 130 height: 10em; 131 content: "x x xxxx xxxx xxxx xx x x xxx xx xxx"; 132 background: cyan; 133 } 134 @bottom-right { 135 text-align: left; 136 vertical-align: top; 137 height: 10em; 138 content: "x x x x x xxxxxxx x x x"; 139 background: hotpink; 140 } 141 </style>