Init

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 @@
+@function _limit-decimals($n) {
+    @return floor($n * 1000) / 1000;
+}
+
+@include describe('Harmony') {
+    @include it('iro-harmony-modular-scale') {
+        @include assert-equal(_limit-decimals(iro-harmony-modular-scale(0, 1em, 1.1)), 1em,    'Zero iterations, 1em base, 1.1 scale');
+        @include assert-equal(_limit-decimals(iro-harmony-modular-scale(1, 1em, 1.1)), 1.1em,  '1 iteration, 1em base, 1.1 scale');
+        @include assert-equal(_limit-decimals(iro-harmony-modular-scale(2, 2px, 1.2)), 2.88px, '2 iterations, 2px base, 1.2 scale');
+        @include assert-equal(_limit-decimals(iro-harmony-modular-scale(-1, 2rem, 2)), 1rem,   '-1 iteration, 2rem base, 2 scale');
+        @include assert-equal(_limit-decimals(iro-harmony-modular-scale(-2, 2rem, 2)), 0.5rem, '-2 iterations, 2rem base, 2 scale');
+
+        @include assert-equal(_limit-decimals(iro-harmony-modular-scale(0, 1em 2em, 1.1)), 1em,        'Zero iterations, 1em 2em base, 1.1 scale');
+        @include assert-equal(_limit-decimals(iro-harmony-modular-scale(1, 1em 2em, 1.1)), 1.026em,    '1 iteration, 1em 2em base, 1.1 scale');
+        @include assert-equal(_limit-decimals(iro-harmony-modular-scale(2, 1em 2em, 1.1)), 1.1em,      '2 iterations, 1em 2em base, 1.1 scale');
+        @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');
+        @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');
+    }
+
+    @include it('iro-responsive-modular-scale') {
+        @include assert('Single-stranded, fluid') {
+            $ms: (
+                320px: (1rem, 1.1),
+                640px: (1rem, 1.2)
+            );
+
+            $rem320px:  iro-px-to-rem(320px);
+            $rem640px:  iro-px-to-rem(640px);
+            $diff320px: iro-strip-unit($rem640px - $rem320px);
+
+            @include output {
+                h3 {
+                    @include iro-responsive-modular-scale(font-size, 0, $ms);
+                }
+
+                h2 {
+                    @include iro-responsive-modular-scale(font-size, 1, $ms);
+                }
+
+                h1 {
+                    @include iro-responsive-modular-scale(font-size, 2, $ms);
+                }
+            }
+
+            @include expect {
+                h3 {
+                    font-size: 1rem;
+
+                    @media (min-width: 320px) and (max-width: 640px) {
+                        font-size: calc(1rem + 0 * ((100vw - #{$rem320px}) / #{$diff320px}));
+                    }
+
+                    @media (min-width: 640px) {
+                        font-size: 1rem;
+                    }
+                }
+
+                h2 {
+                    font-size: 1.1rem;
+
+                    @media (min-width: 320px) and (max-width: 640px) {
+                        font-size: calc(1.1rem + 0.1 * ((100vw - #{$rem320px}) / #{$diff320px}));
+                    }
+
+                    @media (min-width: 640px) {
+                        font-size: 1.2rem;
+                    }
+                }
+
+                h1 {
+                    font-size: 1.21rem;
+
+                    @media (min-width: 320px) and (max-width: 640px) {
+                        font-size: calc(1.21rem + 0.23 * ((100vw - #{$rem320px}) / #{$diff320px}));
+                    }
+
+                    @media (min-width: 640px) {
+                        font-size: 1.44rem;
+                    }
+                }
+            }
+        }
+
+        @include assert('Single-stranded, non-fluid') {
+            $ms: (
+                320px: (1rem, 1.1),
+                640px: (1rem, 1.2)
+            );
+
+            $rem320px:  iro-px-to-rem(320px);
+            $rem640px:  iro-px-to-rem(640px);
+            $diff320px: iro-strip-unit($rem640px - $rem320px);
+
+            @include output {
+                h3 {
+                    @include iro-responsive-modular-scale(font-size, 0, $ms, false);
+                }
+
+                h2 {
+                    @include iro-responsive-modular-scale(font-size, 1, $ms, false);
+                }
+
+                h1 {
+                    @include iro-responsive-modular-scale(font-size, 2, $ms, false);
+                }
+            }
+
+            @include expect {
+                h3 {
+                    font-size: 1rem;
+
+                    @media (min-width: 640px) {
+                        font-size: 1rem;
+                    }
+                }
+
+                h2 {
+                    font-size: 1.1rem;
+
+                    @media (min-width: 640px) {
+                        font-size: 1.2rem;
+                    }
+                }
+
+                h1 {
+                    font-size: 1.21rem;
+
+                    @media (min-width: 640px) {
+                        font-size: 1.44rem;
+                    }
+                }
+            }
+        }
+
+        @include assert('Double-stranded, fluid') {
+            $ms: (
+                320px: (1rem 2rem, 1.1),
+                640px: (1rem 2rem, 1.2)
+            );
+
+            $rem320px:  iro-px-to-rem(320px);
+            $rem640px:  iro-px-to-rem(640px);
+            $diff320px: iro-strip-unit($rem640px - $rem320px);
+
+            @include output {
+                h3 {
+                    @include iro-responsive-modular-scale(font-size, 0, $ms);
+                }
+
+                h2 {
+                    @include iro-responsive-modular-scale(font-size, 1, $ms);
+                }
+
+                h1 {
+                    @include iro-responsive-modular-scale(font-size, 2, $ms);
+                }
+            }
+
+            @include expect {
+                h3 {
+                    font-size: 1rem;
+
+                    @media (min-width: 320px) and (max-width: 640px) {
+                        font-size: calc(1rem + 0 * ((100vw - #{$rem320px}) / #{$diff320px}));
+                    }
+
+                    @media (min-width: 640px) {
+                        font-size: 1rem;
+                    }
+                }
+
+                h2 {
+                    font-size: 1.0263162365rem;
+
+                    @media (min-width: 320px) and (max-width: 640px) {
+                        font-size: calc(1.0263162365rem + 0.1310911709 * ((100vw - #{$rem320px}) / #{$diff320px}));
+                    }
+
+                    @media (min-width: 640px) {
+                        font-size: 1.1574074074rem;
+                    }
+                }
+
+                h1 {
+                    font-size: 1.1rem;
+
+                    @media (min-width: 320px) and (max-width: 640px) {
+                        font-size: calc(1.1rem + 0.1 * ((100vw - #{$rem320px}) / #{$diff320px}));
+                    }
+
+                    @media (min-width: 640px) {
+                        font-size: 1.2rem;
+                    }
+                }
+            }
+        }
+
+        @include assert('Double-stranded, non-fluid') {
+            $ms: (
+                320px: (1rem 2rem, 1.1),
+                640px: (1rem 2rem, 1.2)
+            );
+
+            $rem320px:  iro-px-to-rem(320px);
+            $rem640px:  iro-px-to-rem(640px);
+            $diff320px: iro-strip-unit($rem640px - $rem320px);
+
+            @include output {
+                h3 {
+                    @include iro-responsive-modular-scale(font-size, 0, $ms, false);
+                }
+
+                h2 {
+                    @include iro-responsive-modular-scale(font-size, 1, $ms, false);
+                }
+
+                h1 {
+                    @include iro-responsive-modular-scale(font-size, 2, $ms, false);
+                }
+            }
+
+            @include expect {
+                h3 {
+                    font-size: 1rem;
+
+                    @media (min-width: 640px) {
+                        font-size: 1rem;
+                    }
+                }
+
+                h2 {
+                    font-size: 1.0263162365rem;;
+
+                    @media (min-width: 640px) {
+                        font-size: 1.1574074074rem;;
+                    }
+                }
+
+                h1 {
+                    font-size: 1.1rem;
+
+                    @media (min-width: 640px) {
+                        font-size: 1.2rem;
+                    }
+                }
+            }
+        }
+    }
+}