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