Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-page/margin-boxes/dimensions-014-print.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<meta name="assert" content="Test vertical-rl writing mode document.">
<meta name="flags" content="ahem">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<!-- Note: Using the ref from the preceding test here. -->
<link rel="match" href="dimensions-013-print-ref.html">
<style>
html {
writing-mode: vertical-rl;
}
@page {
margin: 6em;
width: 20em;
height: 16em;
font: 16px/1 Ahem;
white-space: pre-wrap;
@top-left-corner {
text-align: left;
vertical-align: bottom;
content: "x\ax";
}
@top-right-corner {
text-align: left;
vertical-align: bottom;
content: "x xxxxxxxxx";
}
@bottom-left-corner {
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: horizontal-tb;
text-align: left;
vertical-align: top;
content: "x\ax";
}
/* Min/max width for top-left is 7em (seven lines in a vertical 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 {
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: bottom;
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 {
text-align: left;
vertical-align: bottom;
margin-left: 4em;
content: "x\ax\ax\ax\ax\ax\axxxxxxxxxxxxxxxxxx";
background: yellow;
}
@left-bottom {
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 {
text-align: left;
vertical-align: bottom;
margin: auto;
block-size: fit-content;
content: "xxx\ax";
background: hotpink;
}
@right-bottom {
text-align: left;
vertical-align: bottom;
margin: 25%;
content: "x";
background: yellow;
}
/* bottom-left gets a min-width of 1em (one line in a vertical writing
mode), bottom-right gets a min-width of 3em (three lines in a vertical
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 {
vertical-align: bottom;
text-align: left;
margin-top: auto;
height: min-content;
content: "xx";
background: yellow;
}
@bottom-right {
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>