85 lines
2.9 KiB
HTML
85 lines
2.9 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 smaller than available size. With center/middle boxes. No corners.">
|
|
<meta name="flags" content="ahem">
|
|
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
|
<link rel="match" href="dimensions-005-print-ref.html">
|
|
<style>
|
|
:root {
|
|
print-color-adjust: exact;
|
|
}
|
|
@page {
|
|
margin: 6em;
|
|
width: 20em;
|
|
height: 15em;
|
|
font: 16px/1 Ahem;
|
|
white-space: pre-wrap;
|
|
|
|
/* In order to preserve centering of a center/middle box, pretend that the
|
|
space distributed to left/top and right/bottom combined will be twice the
|
|
size of the one that needs the most size (this is called the AC box).
|
|
Then resolve center/middle by giving it the rest. Then the boxes on the
|
|
sides receive equal shares of AC. */
|
|
|
|
/* Min/max width for top-left is 3em. For top-center it is 2em. For
|
|
top-right it is 2em. Available space is 20em. Left is larger than right.
|
|
Double it to 6em and call this the AC box. Unused space becomes 12em
|
|
(20em minus center max width and double left box max width). Unused space
|
|
will be distributed proportionally between AC and the center box, based
|
|
on max widths. AC gets 6/8, center gets 2/8. AC becomes
|
|
6em+12em*6/8 = 15em. Center becomes 2em+12em*2/8 = 5em. Left and right
|
|
each receive half of what's left after having resolved for center,
|
|
i.e. (20em-5em)/2 = 7.5em. */
|
|
@top-left {
|
|
text-align: left;
|
|
vertical-align: top;
|
|
margin-bottom: 4em;
|
|
content: "xxx";
|
|
background: hotpink;
|
|
}
|
|
@top-center {
|
|
text-align: left;
|
|
vertical-align: top;
|
|
margin-top: 2em;
|
|
margin-bottom: 2em;
|
|
content: "xx";
|
|
background: cyan;
|
|
}
|
|
@top-right {
|
|
text-align: left;
|
|
vertical-align: top;
|
|
margin-top: 4em;
|
|
content: "xx";
|
|
background: yellow;
|
|
}
|
|
|
|
/* This is the same as for the top edge, except that available space is less.
|
|
It is 15em here. Unused space then becomes 7em (15em minus center max
|
|
height and double top box max height). AC becomes 6em+7em*6/8 = 11.25em.
|
|
Center becomes 2em+7em*2/8 = 3.75em. Top and bottom each become
|
|
11.25em / 2 = 5.625em. */
|
|
@right-top {
|
|
text-align: left;
|
|
vertical-align: top;
|
|
margin-right: 4em;
|
|
content: "x\ax\ax";
|
|
background: hotpink;
|
|
}
|
|
@right-middle {
|
|
text-align: left;
|
|
vertical-align: top;
|
|
margin-left: 2em;
|
|
margin-right: 2em;
|
|
content: "x\ax";
|
|
background: cyan;
|
|
}
|
|
@right-bottom {
|
|
text-align: left;
|
|
vertical-align: top;
|
|
margin-left: 4em;
|
|
content: "x\ax";
|
|
background: yellow;
|
|
}
|
|
}
|
|
</style>
|