aboutsummaryrefslogtreecommitdiffstats
path: root/test/_harmony.scss
diff options
context:
space:
mode:
Diffstat (limited to 'test/_harmony.scss')
-rw-r--r--test/_harmony.scss386
1 files changed, 193 insertions, 193 deletions
diff --git a/test/_harmony.scss b/test/_harmony.scss
index c7d309c..3229e8e 100644
--- a/test/_harmony.scss
+++ b/test/_harmony.scss
@@ -4,251 +4,251 @@
4@use '../src/harmony'; 4@use '../src/harmony';
5 5
6@function _limit-decimals($n) { 6@function _limit-decimals($n) {
7 @return math.div(math.floor($n * 1000), 1000); 7 @return math.div(math.floor($n * 1000), 1000);
8} 8}
9 9
10@include describe('harmony') { 10@include describe('harmony') {
11 @include it('modular-scale') { 11 @include it('modular-scale') {
12 @include assert-equal(_limit-decimals(harmony.modular-scale(0, 1em, 1.1)), 1em, 'Zero iterations, 1em base, 1.1 scale'); 12 @include assert-equal(_limit-decimals(harmony.modular-scale(0, 1em, 1.1)), 1em, 'Zero iterations, 1em base, 1.1 scale');
13 @include assert-equal(_limit-decimals(harmony.modular-scale(1, 1em, 1.1)), 1.1em, '1 iteration, 1em base, 1.1 scale'); 13 @include assert-equal(_limit-decimals(harmony.modular-scale(1, 1em, 1.1)), 1.1em, '1 iteration, 1em base, 1.1 scale');
14 @include assert-equal(_limit-decimals(harmony.modular-scale(2, 2px, 1.2)), 2.88px, '2 iterations, 2px base, 1.2 scale'); 14 @include assert-equal(_limit-decimals(harmony.modular-scale(2, 2px, 1.2)), 2.88px, '2 iterations, 2px base, 1.2 scale');
15 @include assert-equal(_limit-decimals(harmony.modular-scale(-1, 2rem, 2)), 1rem, '-1 iteration, 2rem base, 2 scale'); 15 @include assert-equal(_limit-decimals(harmony.modular-scale(-1, 2rem, 2)), 1rem, '-1 iteration, 2rem base, 2 scale');
16 @include assert-equal(_limit-decimals(harmony.modular-scale(-2, 2rem, 2)), 0.5rem, '-2 iterations, 2rem base, 2 scale'); 16 @include assert-equal(_limit-decimals(harmony.modular-scale(-2, 2rem, 2)), .5rem, '-2 iterations, 2rem base, 2 scale');
17 17
18 @include assert-equal(_limit-decimals(harmony.modular-scale(0, 1em 2em, 1.1)), 1em, 'Zero iterations, 1em 2em base, 1.1 scale'); 18 @include assert-equal(_limit-decimals(harmony.modular-scale(0, 1em 2em, 1.1)), 1em, 'Zero iterations, 1em 2em base, 1.1 scale');
19 @include assert-equal(_limit-decimals(harmony.modular-scale(1, 1em 2em, 1.1)), 1.026em, '1 iteration, 1em 2em base, 1.1 scale'); 19 @include assert-equal(_limit-decimals(harmony.modular-scale(1, 1em 2em, 1.1)), 1.026em, '1 iteration, 1em 2em base, 1.1 scale');
20 @include assert-equal(_limit-decimals(harmony.modular-scale(2, 1em 2em, 1.1)), 1.1em, '2 iterations, 1em 2em base, 1.1 scale'); 20 @include assert-equal(_limit-decimals(harmony.modular-scale(2, 1em 2em, 1.1)), 1.1em, '2 iterations, 1em 2em base, 1.1 scale');
21 @include assert-equal(_limit-decimals(harmony.modular-scale(-1, 1em 1.5em, 1.2)), 0.868em, '-1 iteration, 1em 2em base, 1.1 scale'); 21 @include assert-equal(_limit-decimals(harmony.modular-scale(-1, 1em 1.5em, 1.2)), .868em, '-1 iteration, 1em 2em base, 1.1 scale');
22 @include assert-equal(_limit-decimals(harmony.modular-scale(-2, 1em 1.5em, 1.2)), 0.833em, '-2 iterations, 1em 2em base, 1.1 scale'); 22 @include assert-equal(_limit-decimals(harmony.modular-scale(-2, 1em 1.5em, 1.2)), .833em, '-2 iterations, 1em 2em base, 1.1 scale');
23 } 23 }
24 24
25 @include it('responsive-modular-scale') { 25 @include it('responsive-modular-scale') {
26 @include assert('Single-stranded, fluid') { 26 @include assert('Single-stranded, fluid') {
27 $ms: ( 27 $ms: (
28 320px: (1rem, 1.1), 28 320px: (1rem, 1.1),
29 640px: (1rem, 1.2) 29 640px: (1rem, 1.2)
30 ); 30 );
31 31
32 $rem320px: functions.px-to-rem(320px); 32 $rem320px: functions.px-to-rem(320px);
33 $rem640px: functions.px-to-rem(640px); 33 $rem640px: functions.px-to-rem(640px);
34 $diff320px: functions.strip-unit($rem640px - $rem320px); 34 $diff320px: functions.strip-unit($rem640px - $rem320px);
35 35
36 @include output { 36 @include output {
37 h3 { 37 h3 {
38 @include harmony.responsive-modular-scale(font-size, 0, $ms); 38 @include harmony.responsive-modular-scale(font-size, 0, $ms);
39 } 39 }
40 40
41 h2 { 41 h2 {
42 @include harmony.responsive-modular-scale(font-size, 1, $ms); 42 @include harmony.responsive-modular-scale(font-size, 1, $ms);
43 } 43 }
44 44
45 h1 { 45 h1 {
46 @include harmony.responsive-modular-scale(font-size, 2, $ms); 46 @include harmony.responsive-modular-scale(font-size, 2, $ms);
47 } 47 }
48 } 48 }
49 49
50 @include expect { 50 @include expect {
51 h3 { 51 h3 {
52 font-size: 1rem; 52 font-size: 1rem;
53 53
54 @media (min-width: 320px) and (max-width: 640px) { 54 @media (min-width: 320px) and (max-width: 640px) {
55 font-size: calc(1rem + 0 * (100vw - #{$rem320px}) / #{$diff320px}); 55 font-size: calc(1rem + 0 * (100vw - #{$rem320px}) / #{$diff320px});
56 } 56 }
57 57
58 @media (min-width: 640px) { 58 @media (min-width: 640px) {
59 font-size: 1rem; 59 font-size: 1rem;
60 } 60 }
61 } 61 }
62 62
63 h2 { 63 h2 {
64 font-size: 1.1rem; 64 font-size: 1.1rem;
65 65
66 @media (min-width: 320px) and (max-width: 640px) { 66 @media (min-width: 320px) and (max-width: 640px) {
67 font-size: calc(1.1rem + 0.1 * (100vw - #{$rem320px}) / #{$diff320px}); 67 font-size: calc(1.1rem + .1 * (100vw - #{$rem320px}) / #{$diff320px});
68 } 68 }
69 69
70 @media (min-width: 640px) { 70 @media (min-width: 640px) {
71 font-size: 1.2rem; 71 font-size: 1.2rem;
72 } 72 }
73 } 73 }
74 74
75 h1 { 75 h1 {
76 font-size: 1.21rem; 76 font-size: 1.21rem;
77 77
78 @media (min-width: 320px) and (max-width: 640px) { 78 @media (min-width: 320px) and (max-width: 640px) {
79 font-size: calc(1.21rem + 0.23 * (100vw - #{$rem320px}) / #{$diff320px}); 79 font-size: calc(1.21rem + .23 * (100vw - #{$rem320px}) / #{$diff320px});
80 } 80 }
81 81
82 @media (min-width: 640px) { 82 @media (min-width: 640px) {
83 font-size: 1.44rem; 83 font-size: 1.44rem;
84 } 84 }
85 } 85 }
86 } 86 }
87 } 87 }
88 88
89 @include assert('Single-stranded, non-fluid') { 89 @include assert('Single-stranded, non-fluid') {
90 $ms: ( 90 $ms: (
91 320px: (1rem, 1.1), 91 320px: (1rem, 1.1),
92 640px: (1rem, 1.2) 92 640px: (1rem, 1.2)
93 ); 93 );
94 94
95 $rem320px: functions.px-to-rem(320px); 95 $rem320px: functions.px-to-rem(320px);
96 $rem640px: functions.px-to-rem(640px); 96 $rem640px: functions.px-to-rem(640px);
97 $diff320px: functions.strip-unit($rem640px - $rem320px); 97 $diff320px: functions.strip-unit($rem640px - $rem320px);
98 98
99 @include output { 99 @include output {
100 h3 { 100 h3 {
101 @include harmony.responsive-modular-scale(font-size, 0, $ms, false); 101 @include harmony.responsive-modular-scale(font-size, 0, $ms, false);
102 } 102 }
103 103
104 h2 { 104 h2 {
105 @include harmony.responsive-modular-scale(font-size, 1, $ms, false); 105 @include harmony.responsive-modular-scale(font-size, 1, $ms, false);
106 } 106 }
107 107
108 h1 { 108 h1 {
109 @include harmony.responsive-modular-scale(font-size, 2, $ms, false); 109 @include harmony.responsive-modular-scale(font-size, 2, $ms, false);
110 } 110 }
111 } 111 }
112 112
113 @include expect { 113 @include expect {
114 h3 { 114 h3 {
115 font-size: 1rem; 115 font-size: 1rem;
116 116
117 @media (min-width: 640px) { 117 @media (min-width: 640px) {
118 font-size: 1rem; 118 font-size: 1rem;
119 } 119 }
120 } 120 }
121 121
122 h2 { 122 h2 {
123 font-size: 1.1rem; 123 font-size: 1.1rem;
124 124
125 @media (min-width: 640px) { 125 @media (min-width: 640px) {
126 font-size: 1.2rem; 126 font-size: 1.2rem;
127 } 127 }
128 } 128 }
129 129
130 h1 { 130 h1 {
131 font-size: 1.21rem; 131 font-size: 1.21rem;
132 132
133 @media (min-width: 640px) { 133 @media (min-width: 640px) {
134 font-size: 1.44rem; 134 font-size: 1.44rem;
135 } 135 }
136 } 136 }
137 } 137 }
138 } 138 }
139 139
140 @include assert('Double-stranded, fluid') { 140 @include assert('Double-stranded, fluid') {
141 $ms: ( 141 $ms: (
142 320px: (1rem 2rem, 1.1), 142 320px: (1rem 2rem, 1.1),
143 640px: (1rem 2rem, 1.2) 143 640px: (1rem 2rem, 1.2)
144 ); 144 );
145 145
146 $rem320px: functions.px-to-rem(320px); 146 $rem320px: functions.px-to-rem(320px);
147 $rem640px: functions.px-to-rem(640px); 147 $rem640px: functions.px-to-rem(640px);
148 $diff320px: functions.strip-unit($rem640px - $rem320px); 148 $diff320px: functions.strip-unit($rem640px - $rem320px);
149 149
150 @include output { 150 @include output {
151 h3 { 151 h3 {
152 @include harmony.responsive-modular-scale(font-size, 0, $ms); 152 @include harmony.responsive-modular-scale(font-size, 0, $ms);
153 } 153 }
154 154
155 h2 { 155 h2 {
156 @include harmony.responsive-modular-scale(font-size, 1, $ms); 156 @include harmony.responsive-modular-scale(font-size, 1, $ms);
157 } 157 }
158 158
159 h1 { 159 h1 {
160 @include harmony.responsive-modular-scale(font-size, 2, $ms); 160 @include harmony.responsive-modular-scale(font-size, 2, $ms);
161 } 161 }
162 } 162 }
163 163
164 @include expect { 164 @include expect {
165 h3 { 165 h3 {
166 font-size: 1rem; 166 font-size: 1rem;
167 167
168 @media (min-width: 320px) and (max-width: 640px) { 168 @media (min-width: 320px) and (max-width: 640px) {
169 font-size: calc(1rem + 0 * (100vw - #{$rem320px}) / #{$diff320px}); 169 font-size: calc(1rem + 0 * (100vw - #{$rem320px}) / #{$diff320px});
170 } 170 }
171 171
172 @media (min-width: 640px) { 172 @media (min-width: 640px) {
173 font-size: 1rem; 173 font-size: 1rem;
174 } 174 }
175 } 175 }
176 176
177 h2 { 177 h2 {
178 font-size: 1.0263162365rem; 178 font-size: 1.0263162365rem;
179 179
180 @media (min-width: 320px) and (max-width: 640px) { 180 @media (min-width: 320px) and (max-width: 640px) {
181 font-size: calc(1.0263162365rem + 0.1310911709 * (100vw - #{$rem320px}) / #{$diff320px}); 181 font-size: calc(1.0263162365rem + .1310911709 * (100vw - #{$rem320px}) / #{$diff320px});
182 } 182 }
183 183
184 @media (min-width: 640px) { 184 @media (min-width: 640px) {
185 font-size: 1.1574074074rem; 185 font-size: 1.1574074074rem;
186 } 186 }
187 } 187 }
188 188
189 h1 { 189 h1 {
190 font-size: 1.1rem; 190 font-size: 1.1rem;
191 191
192 @media (min-width: 320px) and (max-width: 640px) { 192 @media (min-width: 320px) and (max-width: 640px) {
193 font-size: calc(1.1rem + 0.1 * (100vw - #{$rem320px}) / #{$diff320px}); 193 font-size: calc(1.1rem + .1 * (100vw - #{$rem320px}) / #{$diff320px});
194 } 194 }
195 195
196 @media (min-width: 640px) { 196 @media (min-width: 640px) {
197 font-size: 1.2rem; 197 font-size: 1.2rem;
198 } 198 }
199 } 199 }
200 } 200 }
201 } 201 }
202 202
203 @include assert('Double-stranded, non-fluid') { 203 @include assert('Double-stranded, non-fluid') {
204 $ms: ( 204 $ms: (
205 320px: (1rem 2rem, 1.1), 205 320px: (1rem 2rem, 1.1),
206 640px: (1rem 2rem, 1.2) 206 640px: (1rem 2rem, 1.2)
207 ); 207 );
208 208
209 $rem320px: functions.px-to-rem(320px); 209 $rem320px: functions.px-to-rem(320px);
210 $rem640px: functions.px-to-rem(640px); 210 $rem640px: functions.px-to-rem(640px);
211 $diff320px: functions.strip-unit($rem640px - $rem320px); 211 $diff320px: functions.strip-unit($rem640px - $rem320px);
212 212
213 @include output { 213 @include output {
214 h3 { 214 h3 {
215 @include harmony.responsive-modular-scale(font-size, 0, $ms, false); 215 @include harmony.responsive-modular-scale(font-size, 0, $ms, false);
216 } 216 }
217 217
218 h2 { 218 h2 {
219 @include harmony.responsive-modular-scale(font-size, 1, $ms, false); 219 @include harmony.responsive-modular-scale(font-size, 1, $ms, false);
220 } 220 }
221 221
222 h1 { 222 h1 {
223 @include harmony.responsive-modular-scale(font-size, 2, $ms, false); 223 @include harmony.responsive-modular-scale(font-size, 2, $ms, false);
224 } 224 }
225 } 225 }
226 226
227 @include expect { 227 @include expect {
228 h3 { 228 h3 {
229 font-size: 1rem; 229 font-size: 1rem;
230 230
231 @media (min-width: 640px) { 231 @media (min-width: 640px) {
232 font-size: 1rem; 232 font-size: 1rem;
233 } 233 }
234 } 234 }
235 235
236 h2 { 236 h2 {
237 font-size: 1.0263162365rem;; 237 font-size: 1.0263162365rem;
238 238
239 @media (min-width: 640px) { 239 @media (min-width: 640px) {
240 font-size: 1.1574074074rem;; 240 font-size: 1.1574074074rem;;
241 } 241 }
242 } 242 }
243 243
244 h1 { 244 h1 {
245 font-size: 1.1rem; 245 font-size: 1.1rem;
246 246
247 @media (min-width: 640px) { 247 @media (min-width: 640px) {
248 font-size: 1.2rem; 248 font-size: 1.2rem;
249 } 249 }
250 } 250 }
251 } 251 }
252 } 252 }
253 } 253 }
254} 254}
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-21 17:42:08 +0000