| <!DOCTYPE html> |
| <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> |
| <link rel="help" href="https://drafts.csswg.org/css-page-3/#margin-dimension"> |
| <meta name="assert" content="Test orthogonal writing mode roots."> |
| <meta name="flags" content="ahem"> |
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> |
| <link rel="match" href="dimensions-013-print-ref.html"> |
| <style> |
| :root { |
| print-color-adjust: exact; |
| } |
| @page { |
| margin: 6em; |
| width: 20em; |
| height: 16em; |
| font: 16px/1 Ahem; |
| white-space: pre-wrap; |
| |
| @top-left-corner { |
| writing-mode: vertical-rl; |
| text-align: left; |
| vertical-align: bottom; |
| content: "x\ax"; |
| } |
| @top-right-corner { |
| writing-mode: vertical-rl; |
| text-align: left; |
| vertical-align: bottom; |
| content: "x xxxxxxxxx"; |
| } |
| @bottom-left-corner { |
| writing-mode: vertical-rl; |
| text-align: left; |
| vertical-align: bottom; |
| margin-top: 2.5em; |
| content: "x\ax\ax\ax\ax\ax\ax\ax\axx"; |
| } |
| @bottom-right-corner { |
| writing-mode: vertical-rl; |
| text-align: left; |
| vertical-align: bottom; |
| content: "xx"; |
| } |
| |
| /* Min/max width for top-left is 7em (seven lines in an orthogonal |
| writing mode). For top-right it is 1em. Available space is 20em. |
| Unused space becomes 12em. This will be distributed proportionally based |
| on max widths. Left gets 7/8, right gets 1/8. Final widths become |
| 7em+12em*7/8 = 17.5em for left, and 1em+12em*1/8 = 2.5em for right. */ |
| @top-left { |
| writing-mode: vertical-rl; |
| text-align: left; |
| vertical-align: bottom; |
| margin-top: 4em; |
| content: "x\ax\ax\ax\ax\ax\ax\a"; |
| background: hotpink; |
| } |
| @top-right { |
| text-align: left; |
| vertical-align: top; |
| margin-bottom: 50%; |
| content: "x"; |
| background: yellow; |
| } |
| |
| /* Min content height for left-top is 18em. Min content height for |
| left-bottom is 6em. |
| |
| Available space is 16em. Unused space is 20em - (18em + 6em) = -8em. |
| Total min height is larger than what's available. |
| |
| Shrink proportionally to min content heights. Top flex is 18. Bottom flex |
| is 6. Total flex is 24. |
| |
| Top height: 18em + (-8em) * 18/24 = 12em |
| Bottom height: 6em + (-8em) * 6/24 = 8em */ |
| @left-top { |
| writing-mode: vertical-rl; |
| text-align: left; |
| vertical-align: bottom; |
| margin-left: 4em; |
| content: "x\ax\ax\ax\ax\ax\axxxxxxxxxxxxxxxxxx"; |
| background: yellow; |
| } |
| @left-bottom { |
| writing-mode: vertical-rl; |
| text-align: left; |
| vertical-align: middle; |
| margin-block-end: auto; |
| margin-block-start: 3em; |
| content: "xxxxxx"; |
| background: hotpink; |
| } |
| |
| /* Max inner content height of right-top is 3em. It has auto margins, but |
| since the vertical axis is the main axis, they are treated as 0. |
| Therefore max outer content height is also 3em. |
| |
| Max inner content height of right-bottom is 1em. Its margins are all 25%. |
| Available vertical space is 16em, meaning that top + bottom margin |
| becomes 50% = 8em. Max outer content height becomes 9em. |
| |
| Flex for top becomes 3. Flex for bottom becomes 9. Total flex becomes 12. |
| Unused space is 4em. |
| |
| Top outer height: 3em + 4em*3/12 = 4em |
| Bottom outer height: 9em + 4em*9/12 = 12em */ |
| @right-top { |
| writing-mode: vertical-rl; |
| text-align: left; |
| vertical-align: bottom; |
| margin: auto; |
| block-size: fit-content; |
| content: "xxx\ax"; |
| background: hotpink; |
| } |
| @right-bottom { |
| writing-mode: vertical-rl; |
| text-align: left; |
| vertical-align: bottom; |
| margin: 25%; |
| content: "x"; |
| background: yellow; |
| } |
| |
| /* bottom-left gets a min-width of 1em (one line in an orthogonal writing |
| mode), bottom-right gets a min-width of 3em (three lines in an orthogonal |
| writing mode). So left gets 1/4 of the surplus, and right gets 3/4. |
| Available space is 20em. Unused space is 20em-4em = 16em. |
| Left width: 1em+16em*1/4 = 5em |
| Right width: 3em+16em*3/4 = 15em |
| |
| Bottom-right has an intrinsic height (inline-size) larger than |
| available. Overconstrainedness is resolved by forcing margin-bottom to |
| auto, giving it a negative value so that the outer top of the box is |
| flush with the top of the page bottom margin area. */ |
| @bottom-left { |
| writing-mode: vertical-rl; |
| vertical-align: bottom; |
| text-align: left; |
| margin-top: auto; |
| height: min-content; |
| content: "xx"; |
| background: yellow; |
| } |
| @bottom-right { |
| writing-mode: vertical-rl; |
| vertical-align: bottom; |
| text-align: left; |
| margin-inline-start: 1em; |
| border-bottom: 20px solid red; |
| height: min-content; |
| content: "x\ax\axxxxxxxxx"; |
| background: hotpink; |
| } |
| } |
| body { |
| background: blue; |
| } |
| </style> |
