51 lines
1.3 KiB
HTML
51 lines
1.3 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 with auto lengths and margins/border/padding.">
|
|
<meta name="flags" content="ahem">
|
|
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
|
<link rel="match" href="dimensions-003-print-ref.html">
|
|
<style>
|
|
:root {
|
|
print-color-adjust: exact;
|
|
}
|
|
@page {
|
|
margin: 6em;
|
|
width: 20em;
|
|
height: 16em;
|
|
font: 16px/1 Ahem;
|
|
white-space: pre-wrap;
|
|
|
|
/* Available size for top edge margins is 20em.
|
|
|
|
Min/max content width of top-left is
|
|
(left border/padding + content + right padding/border/margin)
|
|
is 0.25em+0.25em+1em+0.25em+0.25em+1em = 3em
|
|
|
|
Min content width of top-right is 1em + 1em = 2em
|
|
|
|
Unused space becomes 15em.
|
|
|
|
Left flex: 3
|
|
Right flex: 2
|
|
Total flex: 5
|
|
|
|
Left width: 3em + 15em * 3/5 = 12em
|
|
Right width: 2em + 15em * 2/5 = 8em */
|
|
@top-left {
|
|
text-align: left;
|
|
vertical-align: top;
|
|
margin-right: 1em;
|
|
border: solid 0.25em;
|
|
padding: 0.25em;
|
|
content: "x";
|
|
}
|
|
@top-right {
|
|
text-align: left;
|
|
vertical-align: top;
|
|
margin-left: 1em;
|
|
background: yellow;
|
|
content: "x";
|
|
}
|
|
}
|
|
</style>
|