<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
<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>
@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>
Codebase Browser
chromium