1 files changed, 264 insertions, 0 deletions

diff --git a/test/_gradients.scss b/test/_gradients.scss
new file mode 100644
index 0000000..c1145aa
--- /dev/null
+++ b/test/_gradients.scss
@@ -0,0 +1,264 @@
+// sass-lint:disable no-color-literals zero-unit
+
+@include describe('Gradients') {
+    @include it('iro-easing-gradient') {
+        $gradient1: iro-easing-gradient(
+            linear,
+            to right,
+            #000,
+            ease-in-quad,
+            transparent
+        );
+
+        $expected1: linear-gradient(
+            to right,
+            #000 0,
+            mix(transparent, #000, iro-ease-in-quad(0.25) * 100%) 25%,
+            mix(transparent, #000, iro-ease-in-quad(0.5)  * 100%) 50%,
+            mix(transparent, #000, iro-ease-in-quad(0.75) * 100%) 75%,
+            transparent 100%
+        );
+
+        @include assert-equal($gradient1, $expected1, 'Simple linear gradient');
+
+        // ---------------------------------------------------------------------------
+
+        $gradient2: iro-easing-gradient(
+            radial,
+            1em 2em at 50% 60%,
+            #000,
+            ease-out-cubic,
+            transparent
+        );
+
+        $expected2: radial-gradient(
+            1em 2em at 50% 60%,
+            #000 0,
+            mix(transparent, #000, iro-ease-out-cubic(0.25) * 100%) 25%,
+            mix(transparent, #000, iro-ease-out-cubic(0.5)  * 100%) 50%,
+            mix(transparent, #000, iro-ease-out-cubic(0.75) * 100%) 75%,
+            transparent 100%
+        );
+
+        @include assert-equal($gradient2, $expected2, 'Simple radial gradient');
+
+        // ---------------------------------------------------------------------------
+
+        $gradient3: iro-easing-gradient(
+            linear,
+            to right,
+            #000        2em,
+            ease-in-quad,
+            transparent 10em
+        );
+
+        $expected3: linear-gradient(
+            to right,
+            #000 2em,
+            mix(transparent, #000, iro-ease-in-quad(0.25) * 100%) 4em,
+            mix(transparent, #000, iro-ease-in-quad(0.5)  * 100%) 6em,
+            mix(transparent, #000, iro-ease-in-quad(0.75) * 100%) 8em,
+            transparent 10em
+        );
+
+        @include assert-equal($gradient3, $expected3, 'Linear gradient with positioned color stops');
+
+        // ---------------------------------------------------------------------------
+
+        $gradient4: iro-easing-gradient(
+            linear,
+            to right,
+            #000 20%,
+            ease-in-quad,
+            transparent calc(20% + 10em)
+        );
+
+        $expected4: linear-gradient(
+            to right,
+            #000 20%,
+            mix(transparent, #000, iro-ease-in-quad(0.25) * 100%) calc(20% + (20% + 10em - 20%) * 0.25),
+            mix(transparent, #000, iro-ease-in-quad(0.5)  * 100%) calc(20% + (20% + 10em - 20%) * 0.5),
+            mix(transparent, #000, iro-ease-in-quad(0.75) * 100%) calc(20% + (20% + 10em - 20%) * 0.75),
+            transparent calc(20% + 10em)
+        );
+
+        @include assert-equal($gradient4, $expected4, 'More advanced linear gradient with positioned color stops');
+
+        // ---------------------------------------------------------------------------
+
+        $gradient5: iro-easing-gradient(
+            linear,
+            to right,
+            #000        2em,
+            #f00        7em,
+            ease-in-quad,
+            transparent 10em
+        );
+
+        $expected5: linear-gradient(
+            to right,
+            #000 2em,
+            #f00 7em,
+            mix(transparent, #f00, iro-ease-in-quad(0.25) * 100%) 7em + 3em * 0.25,
+            mix(transparent, #f00, iro-ease-in-quad(0.5)  * 100%) 7em + 3em * 0.5,
+            mix(transparent, #f00, iro-ease-in-quad(0.75) * 100%) 7em + 3em * 0.75,
+            transparent 10em
+        );
+
+        @include assert-equal($gradient5, $expected5, 'Linear gradient with 3 positioned color stops, 1 easing transitions');
+
+        // ---------------------------------------------------------------------------
+
+        $gradient6: iro-easing-gradient(
+            linear,
+            to right,
+            #000        2em,
+            ease-in-quad,
+            #f00        7em,
+            ease-in-quad,
+            transparent 10em
+        );
+
+        $expected6: linear-gradient(
+            to right,
+            #000 2em,
+            mix(#f00,        #000, iro-ease-in-quad(0.25) * 100%) 2em + 5em * 0.25,
+            mix(#f00,        #000, iro-ease-in-quad(0.5)  * 100%) 2em + 5em * 0.5,
+            mix(#f00,        #000, iro-ease-in-quad(0.75) * 100%) 2em + 5em * 0.75,
+            #f00 7em,
+            mix(transparent, #f00, iro-ease-in-quad(0.25) * 100%) 7em + 3em * 0.25,
+            mix(transparent, #f00, iro-ease-in-quad(0.5)  * 100%) 7em + 3em * 0.5,
+            mix(transparent, #f00, iro-ease-in-quad(0.75) * 100%) 7em + 3em * 0.75,
+            transparent 10em
+        );
+
+        @include assert-equal($gradient6, $expected6, 'Linear gradient with 3 positioned color stops, 2 easing transitions');
+
+        // ---------------------------------------------------------------------------
+
+        $gradient7: iro-easing-gradient(
+            linear,
+            to right,
+            #000        2em,
+            ease-in-quad,
+            #f00,
+            ease-in-quad,
+            transparent 10em
+        );
+
+        $expected7: linear-gradient(
+            to right,
+            #000 2em,
+            mix(#f00,        #000, iro-ease-in-quad(0.25) * 100%) 2em + 4em * 0.25,
+            mix(#f00,        #000, iro-ease-in-quad(0.5)  * 100%) 2em + 4em * 0.5,
+            mix(#f00,        #000, iro-ease-in-quad(0.75) * 100%) 2em + 4em * 0.75,
+            #f00 6em,
+            mix(transparent, #f00, iro-ease-in-quad(0.25) * 100%) 6em + 4em * 0.25,
+            mix(transparent, #f00, iro-ease-in-quad(0.5)  * 100%) 6em + 4em * 0.5,
+            mix(transparent, #f00, iro-ease-in-quad(0.75) * 100%) 6em + 4em * 0.75,
+            transparent 10em
+        );
+
+        @include assert-equal($gradient7, $expected7, 'Linear gradient with 2 / 3 positioned color stops, 2 easing transitions');
+
+        // ---------------------------------------------------------------------------
+
+        $gradient8: iro-easing-gradient(
+            linear,
+            to right,
+            #000,
+            ease-in-quad,
+            #f00,
+            ease-in-quad,
+            transparent
+        );
+
+        $expected8: linear-gradient(
+            to right,
+            #000 0,
+            mix(#f00,        #000, iro-ease-in-quad(0.25) * 100%) 50% * 0.25,
+            mix(#f00,        #000, iro-ease-in-quad(0.5)  * 100%) 50% * 0.5,
+            mix(#f00,        #000, iro-ease-in-quad(0.75) * 100%) 50% * 0.75,
+            #f00 50%,
+            mix(transparent, #f00, iro-ease-in-quad(0.25) * 100%) 50% + 50% * 0.25,
+            mix(transparent, #f00, iro-ease-in-quad(0.5)  * 100%) 50% + 50% * 0.5,
+            mix(transparent, #f00, iro-ease-in-quad(0.75) * 100%) 50% + 50% * 0.75,
+            transparent 100%
+        );
+
+        @include assert-equal($gradient8, $expected8, 'Linear gradient with 0 / 3 positioned color stops, 2 easing transitions');
+
+        // ---------------------------------------------------------------------------
+
+        $gradient9: iro-easing-gradient(
+            linear,
+            to right,
+            #000,
+            ease-in-quad,
+            #f00,
+            ease-in-quad,
+            transparent 20em
+        );
+
+        $expected9: linear-gradient(
+            to right,
+            #000 0,
+            mix(#f00,        #000, iro-ease-in-quad(0.25) * 100%) 10em * 0.25,
+            mix(#f00,        #000, iro-ease-in-quad(0.5)  * 100%) 10em * 0.5,
+            mix(#f00,        #000, iro-ease-in-quad(0.75) * 100%) 10em * 0.75,
+            #f00 10em,
+            mix(transparent, #f00, iro-ease-in-quad(0.25) * 100%) 10em + 10em * 0.25,
+            mix(transparent, #f00, iro-ease-in-quad(0.5)  * 100%) 10em + 10em * 0.5,
+            mix(transparent, #f00, iro-ease-in-quad(0.75) * 100%) 10em + 10em * 0.75,
+            transparent 20em
+        );
+
+        @include assert-equal($gradient9, $expected9, 'Linear gradient with 1 / 3 positioned color stops, 2 easing transitions');
+
+        // ---------------------------------------------------------------------------
+
+        $gradient10: iro-easing-gradient(
+            linear,
+            to right,
+            #000,
+            cubic-bezier 0.47 0 0.745 0.715,
+            transparent
+        );
+
+        $expected10: linear-gradient(
+            to right,
+            #000 0,
+            mix(transparent, #000, iro-cubic-bezier(0.47, 0, 0.745, 0.715, 0.25) * 100%) 25%,
+            mix(transparent, #000, iro-cubic-bezier(0.47, 0, 0.745, 0.715, 0.5)  * 100%) 50%,
+            mix(transparent, #000, iro-cubic-bezier(0.47, 0, 0.745, 0.715, 0.75) * 100%) 75%,
+            transparent 100%
+        );
+
+        @include assert-equal($gradient10, $expected10, 'Simple linear gradient with custom cubic-bezier easing');
+
+        // ---------------------------------------------------------------------------
+
+        $gradient11: iro-easing-gradient(
+            linear,
+            to right,
+            #000,
+            steps 4 jump-start,
+            transparent
+        );
+
+        $expected11: linear-gradient(
+            to right,
+            #000 0,
+            mix(transparent, #000, 0.25 * 100%) 0,
+            mix(transparent, #000, 0.25 * 100%) 25%,
+            mix(transparent, #000, 0.5  * 100%) 25%,
+            mix(transparent, #000, 0.5  * 100%) 50%,
+            mix(transparent, #000, 0.75 * 100%) 50%,
+            mix(transparent, #000, 0.75 * 100%) 75%,
+            transparent 75%,
+            transparent 100%
+        );
+
+        @include assert-equal($gradient11, $expected11, 'Simple linear gradient with custom steps easing');
+    }
+}