dimensions-005-print.html (2930B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://drafts.csswg.org/css-page-3/#margin-dimension"> 4 <meta name="assert" content="Test auto lengths. Max content sizes are smaller than available size. With center/middle boxes. No corners."> 5 <meta name="flags" content="ahem"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 7 <link rel="match" href="dimensions-005-print-ref.html"> 8 <style> 9 :root { 10 print-color-adjust: exact; 11 } 12 @page { 13 margin: 6em; 14 width: 20em; 15 height: 15em; 16 font: 16px/1 Ahem; 17 white-space: pre-wrap; 18 19 /* In order to preserve centering of a center/middle box, pretend that the 20 space distributed to left/top and right/bottom combined will be twice the 21 size of the one that needs the most size (this is called the AC box). 22 Then resolve center/middle by giving it the rest. Then the boxes on the 23 sides receive equal shares of AC. */ 24 25 /* Min/max width for top-left is 3em. For top-center it is 2em. For 26 top-right it is 2em. Available space is 20em. Left is larger than right. 27 Double it to 6em and call this the AC box. Unused space becomes 12em 28 (20em minus center max width and double left box max width). Unused space 29 will be distributed proportionally between AC and the center box, based 30 on max widths. AC gets 6/8, center gets 2/8. AC becomes 31 6em+12em*6/8 = 15em. Center becomes 2em+12em*2/8 = 5em. Left and right 32 each receive half of what's left after having resolved for center, 33 i.e. (20em-5em)/2 = 7.5em. */ 34 @top-left { 35 text-align: left; 36 vertical-align: top; 37 margin-bottom: 4em; 38 content: "xxx"; 39 background: hotpink; 40 } 41 @top-center { 42 text-align: left; 43 vertical-align: top; 44 margin-top: 2em; 45 margin-bottom: 2em; 46 content: "xx"; 47 background: cyan; 48 } 49 @top-right { 50 text-align: left; 51 vertical-align: top; 52 margin-top: 4em; 53 content: "xx"; 54 background: yellow; 55 } 56 57 /* This is the same as for the top edge, except that available space is less. 58 It is 15em here. Unused space then becomes 7em (15em minus center max 59 height and double top box max height). AC becomes 6em+7em*6/8 = 11.25em. 60 Center becomes 2em+7em*2/8 = 3.75em. Top and bottom each become 61 11.25em / 2 = 5.625em. */ 62 @right-top { 63 text-align: left; 64 vertical-align: top; 65 margin-right: 4em; 66 content: "x\ax\ax"; 67 background: hotpink; 68 } 69 @right-middle { 70 text-align: left; 71 vertical-align: top; 72 margin-left: 2em; 73 margin-right: 2em; 74 content: "x\ax"; 75 background: cyan; 76 } 77 @right-bottom { 78 text-align: left; 79 vertical-align: top; 80 margin-left: 4em; 81 content: "x\ax"; 82 background: yellow; 83 } 84 } 85 </style>