aboutsummaryrefslogtreecommitdiffstats
path: root/test/_harmony.scss
diff options
context:
space:
mode:
Diffstat (limited to 'test/_harmony.scss')
-rw-r--r--test/_harmony.scss249
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}