dimensions-006-print.html (4491B)
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. No 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-006-print-ref.html"> 8 <style> 9 :root { 10 print-color-adjust: exact; 11 } 12 @page { 13 margin: 6em; 14 width: 20em; 15 height: 15em; 16 font: 16px/1 Ahem; 17 18 /* Left min: 4em 19 Left max: 17em 20 Right min: 2em 21 Right max: 5em 22 Min total: 4em + 2em = 6em 23 Max total: 17em + 5em = 22em 24 25 Max content sizes are larger than available size. Min content sizes are 26 smaller. Start at min size, and distribute extra space proportionally to 27 the difference between max and min. 28 29 Left flex (max - min): 13 30 Right flex (max - min): 3 31 Flex total: 16 32 Available space: 20em 33 Unused space: 20em - 6em = 14em 34 35 Width of left box: 4em + 14em * 13/16 = 15.375em 36 Width of right box: 2em + 14em * 3/16 = 4.625em */ 37 @top-left { 38 text-align: left; 39 vertical-align: top; 40 margin-bottom: 3em; 41 content: "xxx xx xx xx xxxx"; 42 background: hotpink; 43 } 44 @top-right { 45 text-align: left; 46 vertical-align: top; 47 margin-top: 3em; 48 content: "xx xx"; 49 background: yellow; 50 } 51 52 /* Top min: 4em 53 Top max: 13em 54 Bottom min: 2em 55 Bottom max: 5em 56 Min total: 4em + 2em = 6em 57 Max total: 13em + 5em = 18em 58 59 Max content sizes are larger than available size. Min content sizes are 60 smaller. Start at min size, and distribute extra space proportionally to 61 the difference between max and min. 62 63 Top flex (max - min): 9 64 Bottom flex (max - min): 3 65 Flex total: 12 66 Available space: 15em 67 Unused space: 15em - 6em = 9em 68 69 Height of top box: 4em + 9em * 9/12 = 10.75em 70 Height of bottom box: 2em + 9em * 3/12 = 4.25em */ 71 @left-top { 72 text-align: left; 73 vertical-align: top; 74 writing-mode: vertical-rl; 75 content: "xxx x xx xxxx"; 76 background: yellow; 77 } 78 @left-bottom { 79 text-align: left; 80 vertical-align: top; 81 writing-mode: vertical-rl; 82 content: "xx xx"; 83 background: hotpink; 84 } 85 86 /* Top min: 6em 87 Top max: 30em 88 Bottom min: 2em 89 Bottom max: 34em 90 Min total: 6em + 2em = 8em 91 Max total: 30em + 34em = 64em 92 93 Max content sizes are larger than available size. Min content sizes are 94 smaller. Start at min size, and distribute extra space proportionally to 95 the difference between max and min. 96 97 Top flex (max - min): 24 98 Bottom flex (max - min): 32 99 Flex total: 56 100 Available space: 15em 101 Unused space: 15em - 8em = 7em 102 103 Height of top box: 6em + 7em * 24/56 = 9em 104 Height of bottom box: 2em + 7em * 32/56 = 6em */ 105 @right-top { 106 text-align: left; 107 vertical-align: top; 108 writing-mode: vertical-rl; 109 content: "x x xxxxxx x x x x x x x x x x"; 110 background: hotpink; 111 } 112 @right-bottom { 113 text-align: left; 114 vertical-align: top; 115 writing-mode: vertical-rl; 116 content: "x x x x x x x x x x x x x x x x xx"; 117 background: yellow; 118 } 119 120 /* Left min: 6em 121 Left max: 34em 122 Right min: 2em 123 Right max: 38em 124 Min total: 6em + 2em = 8em 125 Max total: 34em + 38em = 72em 126 127 Max content sizes are larger than available size. Min content sizes are 128 smaller. Start at min size, and distribute extra space proportionally to 129 the difference between max and min. 130 131 Left flex (max - min): 28 132 Right flex (max - min): 36 133 Flex total: 64 134 Available space: 20em 135 Unused space: 20em - 8em = 12em 136 137 Width of left box: 6em + 12em * 28/64 = 11.25em 138 Width of right box: 2em + 12em * 36/64 = 8.75em */ 139 @bottom-left { 140 text-align: left; 141 vertical-align: top; 142 margin-top: 1em; 143 content: "x x xxxxxx x x x x x x x x x x x x"; 144 background: yellow; 145 } 146 @bottom-right { 147 text-align: left; 148 vertical-align: top; 149 content: "x x x x x x x x x x x x x x x x x x xx"; 150 background: hotpink; 151 } 152 </style>