dimensions-013-print.html (5004B)
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 orthogonal writing mode roots."> 5 <meta name="flags" content="ahem"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 7 <link rel="match" href="dimensions-013-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 @top-left-corner { 20 writing-mode: vertical-rl; 21 text-align: left; 22 vertical-align: bottom; 23 content: "x\ax"; 24 } 25 @top-right-corner { 26 writing-mode: vertical-rl; 27 text-align: left; 28 vertical-align: bottom; 29 content: "x xxxxxxxxx"; 30 } 31 @bottom-left-corner { 32 writing-mode: vertical-rl; 33 text-align: left; 34 vertical-align: bottom; 35 margin-top: 2.5em; 36 content: "x\ax\ax\ax\ax\ax\ax\ax\axx"; 37 } 38 @bottom-right-corner { 39 writing-mode: vertical-rl; 40 text-align: left; 41 vertical-align: bottom; 42 content: "xx"; 43 } 44 45 /* Min/max width for top-left is 7em (seven lines in an orthogonal 46 writing mode). For top-right it is 1em. Available space is 20em. 47 Unused space becomes 12em. This will be distributed proportionally based 48 on max widths. Left gets 7/8, right gets 1/8. Final widths become 49 7em+12em*7/8 = 17.5em for left, and 1em+12em*1/8 = 2.5em for right. */ 50 @top-left { 51 writing-mode: vertical-rl; 52 text-align: left; 53 vertical-align: bottom; 54 margin-top: 4em; 55 content: "x\ax\ax\ax\ax\ax\ax\a"; 56 background: hotpink; 57 } 58 @top-right { 59 text-align: left; 60 vertical-align: top; 61 margin-bottom: 50%; 62 content: "x"; 63 background: yellow; 64 } 65 66 /* Min content height for left-top is 18em. Min content height for 67 left-bottom is 6em. 68 69 Available space is 16em. Unused space is 20em - (18em + 6em) = -8em. 70 Total min height is larger than what's available. 71 72 Shrink proportionally to min content heights. Top flex is 18. Bottom flex 73 is 6. Total flex is 24. 74 75 Top height: 18em + (-8em) * 18/24 = 12em 76 Bottom height: 6em + (-8em) * 6/24 = 8em */ 77 @left-top { 78 writing-mode: vertical-rl; 79 text-align: left; 80 vertical-align: bottom; 81 margin-left: 4em; 82 content: "x\ax\ax\ax\ax\ax\axxxxxxxxxxxxxxxxxx"; 83 background: yellow; 84 } 85 @left-bottom { 86 writing-mode: vertical-rl; 87 text-align: left; 88 vertical-align: middle; 89 margin-block-end: auto; 90 margin-block-start: 3em; 91 content: "xxxxxx"; 92 background: hotpink; 93 } 94 95 /* Max inner content height of right-top is 3em. It has auto margins, but 96 since the vertical axis is the main axis, they are treated as 0. 97 Therefore max outer content height is also 3em. 98 99 Max inner content height of right-bottom is 1em. Its margins are all 25%. 100 Available vertical space is 16em, meaning that top + bottom margin 101 becomes 50% = 8em. Max outer content height becomes 9em. 102 103 Flex for top becomes 3. Flex for bottom becomes 9. Total flex becomes 12. 104 Unused space is 4em. 105 106 Top outer height: 3em + 4em*3/12 = 4em 107 Bottom outer height: 9em + 4em*9/12 = 12em */ 108 @right-top { 109 writing-mode: vertical-rl; 110 text-align: left; 111 vertical-align: bottom; 112 margin: auto; 113 block-size: fit-content; 114 content: "xxx\ax"; 115 background: hotpink; 116 } 117 @right-bottom { 118 writing-mode: vertical-rl; 119 text-align: left; 120 vertical-align: bottom; 121 margin: 25%; 122 content: "x"; 123 background: yellow; 124 } 125 126 /* bottom-left gets a min-width of 1em (one line in an orthogonal writing 127 mode), bottom-right gets a min-width of 3em (three lines in an orthogonal 128 writing mode). So left gets 1/4 of the surplus, and right gets 3/4. 129 Available space is 20em. Unused space is 20em-4em = 16em. 130 Left width: 1em+16em*1/4 = 5em 131 Right width: 3em+16em*3/4 = 15em 132 133 Bottom-right has an intrinsic height (inline-size) larger than 134 available. Overconstrainedness is resolved by forcing margin-bottom to 135 auto, giving it a negative value so that the outer top of the box is 136 flush with the top of the page bottom margin area. */ 137 @bottom-left { 138 writing-mode: vertical-rl; 139 vertical-align: bottom; 140 text-align: left; 141 margin-top: auto; 142 height: min-content; 143 content: "xx"; 144 background: yellow; 145 } 146 @bottom-right { 147 writing-mode: vertical-rl; 148 vertical-align: bottom; 149 text-align: left; 150 margin-inline-start: 1em; 151 border-bottom: 20px solid red; 152 height: min-content; 153 content: "x\ax\axxxxxxxxx"; 154 background: hotpink; 155 } 156 } 157 body { 158 background: blue; 159 } 160 </style>