dimensions-004-print.html (3838B)
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 corners. No center/middle boxes."> 5 <meta name="flags" content="ahem"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 7 <link rel="match" href="dimensions-004-print-ref.html"> 8 <style> 9 :root { 10 print-color-adjust: exact; 11 } 12 @page { 13 margin: 4em 5em 8em 7em; 14 width: 20em; 15 height: 15em; 16 font: 16px/1 Ahem; 17 white-space: pre-wrap; 18 19 /* Corners just use all available size, if auto. */ 20 @top-left-corner { 21 writing-mode: vertical-rl; 22 text-align: left; 23 vertical-align: bottom; 24 content: "x\ax"; 25 border: solid thin; 26 } 27 @top-right-corner { 28 text-align: left; 29 vertical-align: top; 30 content: "xx"; 31 border: solid thin; 32 } 33 @bottom-right-corner { 34 text-align: left; 35 vertical-align: top; 36 content: "xxx"; 37 border: solid thin; 38 } 39 @bottom-left-corner { 40 text-align: left; 41 vertical-align: top; 42 content: "xxxx"; 43 border: solid thin; 44 } 45 46 /* Min/max width for top-left is 1em. For top-right it is 3em. 47 Available space is 20em. Unused space becomes 16em. This will be 48 distributed proportionally based on max widths. Left gets 1/4, right 49 gets 3/4. Final widths become 1em+16em*1/4 = 5em for left, and 50 3em+16em*3/4 = 15em for right. */ 51 @top-left { 52 text-align: left; 53 vertical-align: top; 54 margin-bottom: 2em; 55 content: "x"; 56 background: hotpink; 57 } 58 @top-right { 59 text-align: left; 60 vertical-align: top; 61 margin-top: 2em; 62 content: "xxx"; 63 background: yellow; 64 } 65 66 /* Min/max height for left-top is 3em (three lines). For left-bottom it is 67 2em (two lines). Available space is 15em. Unused space is 10em. This 68 will be distributed proportionally based on max heights. Top gets 3/5, 69 bottom gets 2/5. Final heights become 3em+10em*3/5 = 9em for top, and 70 2em+10em*2/5 = 6em for bottom. */ 71 @left-top { 72 text-align: left; 73 vertical-align: top; 74 margin-left: 4em; 75 content: "x\ax\ax\a"; 76 background: yellow; 77 } 78 @left-bottom { 79 text-align: left; 80 vertical-align: top; 81 margin-right: 4em; 82 content: "x\ax\a"; 83 background: hotpink; 84 } 85 86 /* Min/max height for right-top is 2em (two lines). For right-bottom it is 87 1em (one line). Available space is 15em. Unused space is 12em. This will 88 be distributed proportionally based on max heights. Top gets 2/3, bottom 89 gets 1/3. Final heights become 2em+12em*2/3 = 10em for top, and 90 1em+12em*1/3 = 5em for bottom. */ 91 @right-top { 92 text-align: left; 93 vertical-align: top; 94 margin-left: 3em; 95 content: "x\ax\a"; 96 background: hotpink; 97 } 98 @right-bottom { 99 text-align: left; 100 vertical-align: top; 101 margin-right: 3em; 102 content: "xxx"; 103 background: yellow; 104 } 105 106 /* Min/max width for bottom-left is 7em. For bottom-right it is 1em. 107 Available space is 20em. Unused space becomes 12em. This will be 108 distributed proportionally based on max widths. Left gets 7/8, right 109 gets 1/8. Final widths become 7em+12em*7/8 = 17.5em for left, and 110 1em+12em*1/8 = 2.5em for right. */ 111 @bottom-left { 112 text-align: left; 113 vertical-align: top; 114 margin-top: 4em; 115 content: "x x x x"; 116 background: yellow; 117 } 118 @bottom-right { 119 text-align: left; 120 vertical-align: top; 121 margin-bottom: 4em; 122 content: "x"; 123 background: hotpink; 124 } 125 } 126 </style>