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