152 lines
4.4 KiB
HTML
152 lines
4.4 KiB
HTML
<!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 auto lengths. Max content sizes are larger than available size, but their min sizes are not. No center boxes.">
|
|
<meta name="flags" content="ahem">
|
|
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
|
<link rel="match" href="dimensions-006-print-ref.html">
|
|
<style>
|
|
:root {
|
|
print-color-adjust: exact;
|
|
}
|
|
@page {
|
|
margin: 6em;
|
|
width: 20em;
|
|
height: 15em;
|
|
font: 16px/1 Ahem;
|
|
|
|
/* Left min: 4em
|
|
Left max: 17em
|
|
Right min: 2em
|
|
Right max: 5em
|
|
Min total: 4em + 2em = 6em
|
|
Max total: 17em + 5em = 22em
|
|
|
|
Max content sizes are larger than available size. Min content sizes are
|
|
smaller. Start at min size, and distribute extra space proportionally to
|
|
the difference between max and min.
|
|
|
|
Left flex (max - min): 13
|
|
Right flex (max - min): 3
|
|
Flex total: 16
|
|
Available space: 20em
|
|
Unused space: 20em - 6em = 14em
|
|
|
|
Width of left box: 4em + 14em * 13/16 = 15.375em
|
|
Width of right box: 2em + 14em * 3/16 = 4.625em */
|
|
@top-left {
|
|
text-align: left;
|
|
vertical-align: top;
|
|
margin-bottom: 3em;
|
|
content: "xxx xx xx xx xxxx";
|
|
background: hotpink;
|
|
}
|
|
@top-right {
|
|
text-align: left;
|
|
vertical-align: top;
|
|
margin-top: 3em;
|
|
content: "xx xx";
|
|
background: yellow;
|
|
}
|
|
|
|
/* Top min: 4em
|
|
Top max: 13em
|
|
Bottom min: 2em
|
|
Bottom max: 5em
|
|
Min total: 4em + 2em = 6em
|
|
Max total: 13em + 5em = 18em
|
|
|
|
Max content sizes are larger than available size. Min content sizes are
|
|
smaller. Start at min size, and distribute extra space proportionally to
|
|
the difference between max and min.
|
|
|
|
Top flex (max - min): 9
|
|
Bottom flex (max - min): 3
|
|
Flex total: 12
|
|
Available space: 15em
|
|
Unused space: 15em - 6em = 9em
|
|
|
|
Height of top box: 4em + 9em * 9/12 = 10.75em
|
|
Height of bottom box: 2em + 9em * 3/12 = 4.25em */
|
|
@left-top {
|
|
text-align: left;
|
|
vertical-align: top;
|
|
writing-mode: vertical-rl;
|
|
content: "xxx x xx xxxx";
|
|
background: yellow;
|
|
}
|
|
@left-bottom {
|
|
text-align: left;
|
|
vertical-align: top;
|
|
writing-mode: vertical-rl;
|
|
content: "xx xx";
|
|
background: hotpink;
|
|
}
|
|
|
|
/* Top min: 6em
|
|
Top max: 30em
|
|
Bottom min: 2em
|
|
Bottom max: 34em
|
|
Min total: 6em + 2em = 8em
|
|
Max total: 30em + 34em = 64em
|
|
|
|
Max content sizes are larger than available size. Min content sizes are
|
|
smaller. Start at min size, and distribute extra space proportionally to
|
|
the difference between max and min.
|
|
|
|
Top flex (max - min): 24
|
|
Bottom flex (max - min): 32
|
|
Flex total: 56
|
|
Available space: 15em
|
|
Unused space: 15em - 8em = 7em
|
|
|
|
Height of top box: 6em + 7em * 24/56 = 9em
|
|
Height of bottom box: 2em + 7em * 32/56 = 6em */
|
|
@right-top {
|
|
text-align: left;
|
|
vertical-align: top;
|
|
writing-mode: vertical-rl;
|
|
content: "x x xxxxxx x x x x x x x x x x";
|
|
background: hotpink;
|
|
}
|
|
@right-bottom {
|
|
text-align: left;
|
|
vertical-align: top;
|
|
writing-mode: vertical-rl;
|
|
content: "x x x x x x x x x x x x x x x x xx";
|
|
background: yellow;
|
|
}
|
|
|
|
/* Left min: 6em
|
|
Left max: 34em
|
|
Right min: 2em
|
|
Right max: 38em
|
|
Min total: 6em + 2em = 8em
|
|
Max total: 34em + 38em = 72em
|
|
|
|
Max content sizes are larger than available size. Min content sizes are
|
|
smaller. Start at min size, and distribute extra space proportionally to
|
|
the difference between max and min.
|
|
|
|
Left flex (max - min): 28
|
|
Right flex (max - min): 36
|
|
Flex total: 64
|
|
Available space: 20em
|
|
Unused space: 20em - 8em = 12em
|
|
|
|
Width of left box: 6em + 12em * 28/64 = 11.25em
|
|
Width of right box: 2em + 12em * 36/64 = 8.75em */
|
|
@bottom-left {
|
|
text-align: left;
|
|
vertical-align: top;
|
|
margin-top: 1em;
|
|
content: "x x xxxxxx x x x x x x x x x x x x";
|
|
background: yellow;
|
|
}
|
|
@bottom-right {
|
|
text-align: left;
|
|
vertical-align: top;
|
|
content: "x x x x x x x x x x x x x x x x x x xx";
|
|
background: hotpink;
|
|
}
|
|
</style>
|