From d07f664450ddaaebb44127a4bd057763d13d3f82 Mon Sep 17 00:00:00 2001 From: Feuerfuchs Date: Sun, 1 Nov 2020 20:55:14 +0100 Subject: Init --- test/_harmony.scss | 249 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 249 insertions(+) create mode 100644 test/_harmony.scss (limited to 'test/_harmony.scss') 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; + } + } + } + } + } +} -- cgit v1.2.3-54-g00ecf