-
Notifications
You must be signed in to change notification settings - Fork 3.3k
/
Copy pathdimensions-007-print.html
141 lines (125 loc) · 4.68 KB
/
dimensions-007-print.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!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. With center boxes.">
<meta name="flags" content="ahem">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<link rel="match" href="dimensions-007-print-ref.html">
<style>
:root {
print-color-adjust: exact;
}
@page {
margin: 12em 6em;
width: 20em;
height: 3em;
font: 16px/1 Ahem;
/* Left min: 1em
Left max: 9em
Center min: 1em
Center max: 17em
Right min: 1em
Right max: 3em
Min total: 1em + 1em + 1em = 3em
Max total: 9em + 17em + 3em = 29em
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.
First resolve the width of center, by evaluating how much space the
double of each side box would take up. Pick the larger (to preserve
centering), and subtract that from available space.
Available space: 20em
Center flex: 17em - 1em = 16
Left double min: 1em * 2 = 2em
Left double flex (max - min): (9em-1em)*2 = 16
Total flex left double + center: 16 + 16 = 32
Unused space with double left: 20em - (2em + 1em) = 17em
Width of double left: 2em + 17em * 16 / 32 = 10.5em
Right double min: 1em * 2 = 2em
Right double flex (max - min): (3em-1em)*2 = 4
Total flex right double + center: 4 + 16 = 20
Unused space with double right: 20em - (2em + 1em) = 17em
Width of double right: 2em + 17em * 4 / 20 = 5.4em
Width of double left (10.5em) is larger than width of double right
(5.4em). Pick this one and resolve center, by using those flex values.
Width of center: 1em + 17em * 16/32 = 9.5em.
Now give the rest in equal parts to left and right:
(20em - 9.5em) / 2 = 5.25em */
@top-left {
text-align: left;
vertical-align: top;
margin-bottom: 2em;
height: 10em;
content: "x x x x x";
background: hotpink;
}
@top-center {
text-align: left;
vertical-align: top;
margin-bottom: 1em;
height: 10em;
content: "x x x x x x x x x";
background: cyan;
}
@top-right {
text-align: left;
vertical-align: top;
height: 10em;
content: "x x";
background: yellow;
}
/* Left min: 3em
Left max: 51em
Center min: 4em
Center max: 36em
Right min: 7em
Right max: 23em
Min total: 3em + 4em + 7em = 14em
Max total: 51em + 36em + 23em = 110em
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.
First resolve the width of center, by evaluating how much space the
double of each side box would take up. Pick the larger (to preserve
centering), and subtract that from available space.
Available space: 20em
Center flex: 36em - 4em = 32
Left double min: 3em * 2 = 6em
Left double flex (max - min): (51em-3em)*2 = 96
Total flex left double + center: 96 + 32 = 128
Unused space with double left: 20em - (6em + 4em) = 10em
Width of double left: 6em + 10em * 96 / 128 = 13.5em
Right double min: 7em * 2 = 14em
Right double flex (max - min): (23em-7em)*2 = 32
Total flex right double + center: 32 + 32 = 64
Unused space with double right: 20em - (14em + 4em) = 2em
Width of double right: 14em + 2em * 32 / 64 = 15em
Width of double right (15em) is larger than width of double left (13.5em).
Pick this one and resolve center, by using those flex values.
Width of center: 4em + 2em * 32/64 = 5em.
Now give the rest in equal parts to left and right:
(20em - 5em) / 2 = 7.5em */
@bottom-left {
text-align: left;
vertical-align: top;
margin-top: 2em;
height: 10em;
content: "x xx x xxx xx xx xx xx xx xx xx x xx xx xx xx xxx x";
background: yellow;
}
@bottom-center {
text-align: left;
vertical-align: top;
margin-top: 1em;
height: 10em;
content: "x x xxxx xxxx xxxx xx x x xxx xx xxx";
background: cyan;
}
@bottom-right {
text-align: left;
vertical-align: top;
height: 10em;
content: "x x x x x xxxxxxx x x x";
background: hotpink;
}
</style>