1 files changed, 174 insertions, 218 deletions
diff --git a/test/_gradients.scss b/test/_gradients.scss
index c11439c..db5fda7 100644
--- a/test/_gradients.scss
+++ b/test/_gradients.scss
@@ -5,264 +5,220 @@
 @use '../src/gradients';
 @include describe('gradients') {
-    @include it('easing-gradient') {
+        @include it('easing-gradient') {
-        $gradient1: gradients.easing-gradient(
+                $gradient1: gradients.easing-gradient(linear,
-            linear,
+                        to right,
-            to right,
+                        #000,
-            #000,
+                        ease-in-quad,
-            ease-in-quad,
+                        transparent);
-            transparent
-        );
-        $expected1: linear-gradient(
+                $expected1: linear-gradient(to right,
-            to right,
+                        #000 0,
-            #000 0,
+                        mix(transparent, #000, easing.ease-in-quad(.25) * 100%) 25%,
-            mix(transparent, #000, easing.ease-in-quad(0.25) * 100%) 25%,
+                        mix(transparent, #000, easing.ease-in-quad(.5)  * 100%) 50%,
-            mix(transparent, #000, easing.ease-in-quad(0.5)  * 100%) 50%,
+                        mix(transparent, #000, easing.ease-in-quad(.75) * 100%) 75%,
-            mix(transparent, #000, easing.ease-in-quad(0.75) * 100%) 75%,
+                        transparent 100%);
-            transparent 100%
-        );
-        @include assert-equal($gradient1, $expected1, 'Simple linear gradient');
+                @include assert-equal($gradient1, $expected1, 'Simple linear gradient');
-        // ---------------------------------------------------------------------------
+                // ---------------------------------------------------------------------------
-        $gradient2: gradients.easing-gradient(
+                $gradient2: gradients.easing-gradient(radial,
-            radial,
+                        1em 2em at 50% 60%,
-            1em 2em at 50% 60%,
+                        #000,
-            #000,
+                        ease-out-cubic,
-            ease-out-cubic,
+                        transparent);
-            transparent
-        );
-        $expected2: radial-gradient(
+                $expected2: radial-gradient(1em 2em at 50% 60%,
-            1em 2em at 50% 60%,
+                        #000 0,
-            #000 0,
+                        mix(transparent, #000, easing.ease-out-cubic(.25) * 100%) 25%,
-            mix(transparent, #000, easing.ease-out-cubic(0.25) * 100%) 25%,
+                        mix(transparent, #000, easing.ease-out-cubic(.5)  * 100%) 50%,
-            mix(transparent, #000, easing.ease-out-cubic(0.5)  * 100%) 50%,
+                        mix(transparent, #000, easing.ease-out-cubic(.75) * 100%) 75%,
-            mix(transparent, #000, easing.ease-out-cubic(0.75) * 100%) 75%,
+                        transparent 100%);
-            transparent 100%
-        );
-        @include assert-equal($gradient2, $expected2, 'Simple radial gradient');
+                @include assert-equal($gradient2, $expected2, 'Simple radial gradient');
-        // ---------------------------------------------------------------------------
+                // ---------------------------------------------------------------------------
-        $gradient3: gradients.easing-gradient(
+                $gradient3: gradients.easing-gradient(linear,
-            linear,
+                        to right,
-            to right,
+                        #000        2em,
-            #000        2em,
+                        ease-in-quad,
-            ease-in-quad,
+                        transparent 10em);
-            transparent 10em
-        );
-        $expected3: linear-gradient(
+                $expected3: linear-gradient(to right,
-            to right,
+                        #000 2em,
-            #000 2em,
+                        mix(transparent, #000, easing.ease-in-quad(.25) * 100%) 4em,
-            mix(transparent, #000, easing.ease-in-quad(0.25) * 100%) 4em,
+                        mix(transparent, #000, easing.ease-in-quad(.5)  * 100%) 6em,
-            mix(transparent, #000, easing.ease-in-quad(0.5)  * 100%) 6em,
+                        mix(transparent, #000, easing.ease-in-quad(.75) * 100%) 8em,
-            mix(transparent, #000, easing.ease-in-quad(0.75) * 100%) 8em,
+                        transparent 10em);
-            transparent 10em
-        );
-        @include assert-equal($gradient3, $expected3, 'Linear gradient with positioned color stops');
+                @include assert-equal($gradient3, $expected3, 'Linear gradient with positioned color stops');
-        // ---------------------------------------------------------------------------
+                // ---------------------------------------------------------------------------
-        $gradient4: gradients.easing-gradient(
+                $gradient4: gradients.easing-gradient(linear,
-            linear,
+                        to right,
-            to right,
+                        #000 20%,
-            #000 20%,
+                        ease-in-quad,
-            ease-in-quad,
+                        transparent calc(20% + 10em));
-            transparent calc(20% + 10em)
-        );
-        $expected4: linear-gradient(
+                $expected4: linear-gradient(to right,
-            to right,
+                        #000 20%,
-            #000 20%,
+                        mix(transparent, #000, easing.ease-in-quad(.25) * 100%) calc(20% + (20% + 10em - 20%) * .25),
-            mix(transparent, #000, easing.ease-in-quad(0.25) * 100%) calc(20% + (20% + 10em - 20%) * 0.25),
+                        mix(transparent, #000, easing.ease-in-quad(.5)  * 100%) calc(20% + (20% + 10em - 20%) * .5),
-            mix(transparent, #000, easing.ease-in-quad(0.5)  * 100%) calc(20% + (20% + 10em - 20%) * 0.5),
+                        mix(transparent, #000, easing.ease-in-quad(.75) * 100%) calc(20% + (20% + 10em - 20%) * .75),
-            mix(transparent, #000, easing.ease-in-quad(0.75) * 100%) calc(20% + (20% + 10em - 20%) * 0.75),
+                        transparent calc(20% + 10em));
-            transparent calc(20% + 10em)
-        );
-        @include assert-equal($gradient4, $expected4, 'More advanced linear gradient with positioned color stops');
+                @include assert-equal($gradient4, $expected4, 'More advanced linear gradient with positioned color stops');
-        // ---------------------------------------------------------------------------
+                // ---------------------------------------------------------------------------
-        $gradient5: gradients.easing-gradient(
+                $gradient5: gradients.easing-gradient(linear,
-            linear,
+                        to right,
-            to right,
+                        #000        2em,
-            #000        2em,
+                        #f00        7em,
-            #f00        7em,
+                        ease-in-quad,
-            ease-in-quad,
+                        transparent 10em);
-            transparent 10em
-        );
-        $expected5: linear-gradient(
+                $expected5: linear-gradient(to right,
-            to right,
+                        #000 2em,
-            #000 2em,
+                        #f00 7em,
-            #f00 7em,
+                        mix(transparent, #f00, easing.ease-in-quad(.25) * 100%) 7em + 3em * .25,
-            mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 7em + 3em * 0.25,
+                        mix(transparent, #f00, easing.ease-in-quad(.5)  * 100%) 7em + 3em * .5,
-            mix(transparent, #f00, easing.ease-in-quad(0.5)  * 100%) 7em + 3em * 0.5,
+                        mix(transparent, #f00, easing.ease-in-quad(.75) * 100%) 7em + 3em * .75,
-            mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 7em + 3em * 0.75,
+                        transparent 10em);
-            transparent 10em
-        );
-        @include assert-equal($gradient5, $expected5, 'Linear gradient with 3 positioned color stops, 1 easing transitions');
+                @include assert-equal($gradient5, $expected5, 'Linear gradient with 3 positioned color stops, 1 easing transitions');
-        // ---------------------------------------------------------------------------
+                // ---------------------------------------------------------------------------
-        $gradient6: gradients.easing-gradient(
+                $gradient6: gradients.easing-gradient(linear,
-            linear,
+                        to right,
-            to right,
+                        #000        2em,
-            #000        2em,
+                        ease-in-quad,
-            ease-in-quad,
+                        #f00        7em,
-            #f00        7em,
+                        ease-in-quad,
-            ease-in-quad,
+                        transparent 10em);
-            transparent 10em
-        );
-        $expected6: linear-gradient(
+                $expected6: linear-gradient(to right,
-            to right,
+                        #000 2em,
-            #000 2em,
+                        mix(#f00, #000, easing.ease-in-quad(.25) * 100%) 2em + 5em * .25,
-            mix(#f00,        #000, easing.ease-in-quad(0.25) * 100%) 2em + 5em * 0.25,
+                        mix(#f00, #000, easing.ease-in-quad(.5)  * 100%) 2em + 5em * .5,
-            mix(#f00,        #000, easing.ease-in-quad(0.5)  * 100%) 2em + 5em * 0.5,
+                        mix(#f00, #000, easing.ease-in-quad(.75) * 100%) 2em + 5em * .75,
-            mix(#f00,        #000, easing.ease-in-quad(0.75) * 100%) 2em + 5em * 0.75,
+                        #f00 7em,
-            #f00 7em,
+                        mix(transparent, #f00, easing.ease-in-quad(.25) * 100%) 7em + 3em * .25,
-            mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 7em + 3em * 0.25,
+                        mix(transparent, #f00, easing.ease-in-quad(.5)  * 100%) 7em + 3em * .5,
-            mix(transparent, #f00, easing.ease-in-quad(0.5)  * 100%) 7em + 3em * 0.5,
+                        mix(transparent, #f00, easing.ease-in-quad(.75) * 100%) 7em + 3em * .75,
-            mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 7em + 3em * 0.75,
+                        transparent 10em);
-            transparent 10em
-        );
-        @include assert-equal($gradient6, $expected6, 'Linear gradient with 3 positioned color stops, 2 easing transitions');
+                @include assert-equal($gradient6, $expected6, 'Linear gradient with 3 positioned color stops, 2 easing transitions');
-        // ---------------------------------------------------------------------------
+                // ---------------------------------------------------------------------------
-        $gradient7: gradients.easing-gradient(
+                $gradient7: gradients.easing-gradient(linear,
-            linear,
+                        to right,
-            to right,
+                        #000        2em,
-            #000        2em,
+                        ease-in-quad,
-            ease-in-quad,
+                        #f00,
-            #f00,
+                        ease-in-quad,
-            ease-in-quad,
+                        transparent 10em);
-            transparent 10em
-        );
-        $expected7: linear-gradient(
+                $expected7: linear-gradient(to right,
-            to right,
+                        #000 2em,
-            #000 2em,
+                        mix(#f00, #000, easing.ease-in-quad(.25) * 100%) 2em + 4em * .25,
-            mix(#f00,        #000, easing.ease-in-quad(0.25) * 100%) 2em + 4em * 0.25,
+                        mix(#f00, #000, easing.ease-in-quad(.5)  * 100%) 2em + 4em * .5,
-            mix(#f00,        #000, easing.ease-in-quad(0.5)  * 100%) 2em + 4em * 0.5,
+                        mix(#f00, #000, easing.ease-in-quad(.75) * 100%) 2em + 4em * .75,
-            mix(#f00,        #000, easing.ease-in-quad(0.75) * 100%) 2em + 4em * 0.75,
+                        #f00 6em,
-            #f00 6em,
+                        mix(transparent, #f00, easing.ease-in-quad(.25) * 100%) 6em + 4em * .25,
-            mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 6em + 4em * 0.25,
+                        mix(transparent, #f00, easing.ease-in-quad(.5)  * 100%) 6em + 4em * .5,
-            mix(transparent, #f00, easing.ease-in-quad(0.5)  * 100%) 6em + 4em * 0.5,
+                        mix(transparent, #f00, easing.ease-in-quad(.75) * 100%) 6em + 4em * .75,
-            mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 6em + 4em * 0.75,
+                        transparent 10em);
-            transparent 10em
-        );
-        @include assert-equal($gradient7, $expected7, 'Linear gradient with 2 / 3 positioned color stops, 2 easing transitions');
+                @include assert-equal($gradient7, $expected7, 'Linear gradient with 2 / 3 positioned color stops, 2 easing transitions');
-        // ---------------------------------------------------------------------------
+                // ---------------------------------------------------------------------------
-        $gradient8: gradients.easing-gradient(
+                $gradient8: gradients.easing-gradient(linear,
-            linear,
+                        to right,
-            to right,
+                        #000,
-            #000,
+                        ease-in-quad,
-            ease-in-quad,
+                        #f00,
-            #f00,
+                        ease-in-quad,
-            ease-in-quad,
+                        transparent);
-            transparent
-        );
-        $expected8: linear-gradient(
+                $expected8: linear-gradient(to right,
-            to right,
+                        #000 0,
-            #000 0,
+                        mix(#f00, #000, easing.ease-in-quad(.25) * 100%) 50% * .25,
-            mix(#f00,        #000, easing.ease-in-quad(0.25) * 100%) 50% * 0.25,
+                        mix(#f00, #000, easing.ease-in-quad(.5)  * 100%) 50% * .5,
-            mix(#f00,        #000, easing.ease-in-quad(0.5)  * 100%) 50% * 0.5,
+                        mix(#f00, #000, easing.ease-in-quad(.75) * 100%) 50% * .75,
-            mix(#f00,        #000, easing.ease-in-quad(0.75) * 100%) 50% * 0.75,
+                        #f00 50%,
-            #f00 50%,
+                        mix(transparent, #f00, easing.ease-in-quad(.25) * 100%) 50% + 50% * .25,
-            mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 50% + 50% * 0.25,
+                        mix(transparent, #f00, easing.ease-in-quad(.5)  * 100%) 50% + 50% * .5,
-            mix(transparent, #f00, easing.ease-in-quad(0.5)  * 100%) 50% + 50% * 0.5,
+                        mix(transparent, #f00, easing.ease-in-quad(.75) * 100%) 50% + 50% * .75,
-            mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 50% + 50% * 0.75,
+                        transparent 100%);
-            transparent 100%
-        );
-        @include assert-equal($gradient8, $expected8, 'Linear gradient with 0 / 3 positioned color stops, 2 easing transitions');
+                @include assert-equal($gradient8, $expected8, 'Linear gradient with 0 / 3 positioned color stops, 2 easing transitions');
-        // ---------------------------------------------------------------------------
+                // ---------------------------------------------------------------------------
-        $gradient9: gradients.easing-gradient(
+                $gradient9: gradients.easing-gradient(linear,
-            linear,
+                        to right,
-            to right,
+                        #000,
-            #000,
+                        ease-in-quad,
-            ease-in-quad,
+                        #f00,
-            #f00,
+                        ease-in-quad,
-            ease-in-quad,
+                        transparent 20em);
-            transparent 20em
-        );
-        $expected9: linear-gradient(
+                $expected9: linear-gradient(to right,
-            to right,
+                        #000 0,
-            #000 0,
+                        mix(#f00, #000, easing.ease-in-quad(.25) * 100%) 10em * .25,
-            mix(#f00,        #000, easing.ease-in-quad(0.25) * 100%) 10em * 0.25,
+                        mix(#f00, #000, easing.ease-in-quad(.5)  * 100%) 10em * .5,
-            mix(#f00,        #000, easing.ease-in-quad(0.5)  * 100%) 10em * 0.5,
+                        mix(#f00, #000, easing.ease-in-quad(.75) * 100%) 10em * .75,
-            mix(#f00,        #000, easing.ease-in-quad(0.75) * 100%) 10em * 0.75,
+                        #f00 10em,
-            #f00 10em,
+                        mix(transparent, #f00, easing.ease-in-quad(.25) * 100%) 10em + 10em * .25,
-            mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 10em + 10em * 0.25,
+                        mix(transparent, #f00, easing.ease-in-quad(.5)  * 100%) 10em + 10em * .5,
-            mix(transparent, #f00, easing.ease-in-quad(0.5)  * 100%) 10em + 10em * 0.5,
+                        mix(transparent, #f00, easing.ease-in-quad(.75) * 100%) 10em + 10em * .75,
-            mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 10em + 10em * 0.75,
+                        transparent 20em);
-            transparent 20em
-        );
-        @include assert-equal($gradient9, $expected9, 'Linear gradient with 1 / 3 positioned color stops, 2 easing transitions');
+                @include assert-equal($gradient9, $expected9, 'Linear gradient with 1 / 3 positioned color stops, 2 easing transitions');
-        // ---------------------------------------------------------------------------
+                // ---------------------------------------------------------------------------
-        $gradient10: gradients.easing-gradient(
+                $gradient10: gradients.easing-gradient(linear,
-            linear,
+                        to right,
-            to right,
+                        #000,
-            #000,
+                        cubic-bezier .47 0 .745 .715,
-            cubic-bezier 0.47 0 0.745 0.715,
+                        transparent);
-            transparent
-        );
-        $expected10: linear-gradient(
+                $expected10: linear-gradient(to right,
-            to right,
+                        #000 0,
-            #000 0,
+                        mix(transparent, #000, easing.cubic-bezier(.47, 0, .745, .715, .25) * 100%) 25%,
-            mix(transparent, #000, easing.cubic-bezier(0.47, 0, 0.745, 0.715, 0.25) * 100%) 25%,
+                        mix(transparent, #000, easing.cubic-bezier(.47, 0, .745, .715, .5)  * 100%) 50%,
-            mix(transparent, #000, easing.cubic-bezier(0.47, 0, 0.745, 0.715, 0.5)  * 100%) 50%,
+                        mix(transparent, #000, easing.cubic-bezier(.47, 0, .745, .715, .75) * 100%) 75%,
-            mix(transparent, #000, easing.cubic-bezier(0.47, 0, 0.745, 0.715, 0.75) * 100%) 75%,
+                        transparent 100%);
-            transparent 100%
-        );
-        @include assert-equal($gradient10, $expected10, 'Simple linear gradient with custom cubic-bezier easing');
+                @include assert-equal($gradient10, $expected10, 'Simple linear gradient with custom cubic-bezier easing');
-        // ---------------------------------------------------------------------------
+                // ---------------------------------------------------------------------------
-        $gradient11: gradients.easing-gradient(
+                $gradient11: gradients.easing-gradient(linear,
-            linear,
+                        to right,
-            to right,
+                        #000,
-            #000,
+                        steps 4 jump-start,
-            steps 4 jump-start,
+                        transparent);
-            transparent
-        );
-        $expected11: linear-gradient(
+                $expected11: linear-gradient(to right,
-            to right,
+                        #000 0,
-            #000 0,
+                        mix(transparent, #000, .25 * 100%) 0,
-            mix(transparent, #000, 0.25 * 100%) 0,
+                        mix(transparent, #000, .25 * 100%) 25%,
-            mix(transparent, #000, 0.25 * 100%) 25%,
+                        mix(transparent, #000, .5  * 100%) 25%,
-            mix(transparent, #000, 0.5  * 100%) 25%,
+                        mix(transparent, #000, .5  * 100%) 50%,
-            mix(transparent, #000, 0.5  * 100%) 50%,
+                        mix(transparent, #000, .75 * 100%) 50%,
-            mix(transparent, #000, 0.75 * 100%) 50%,
+                        mix(transparent, #000, .75 * 100%) 75%,
-            mix(transparent, #000, 0.75 * 100%) 75%,
+                        transparent 75%,
-            transparent 75%,
+                        transparent 100%);
-            transparent 100%
-        );
-        @include assert-equal($gradient11, $expected11, 'Simple linear gradient with custom steps easing');
+                @include assert-equal($gradient11, $expected11, 'Simple linear gradient with custom steps easing');
-    }
+        }
 }

diff --git a/test/_gradients.scss b/test/_gradients.scss index c11439c..db5fda7 100644 --- a/test/_gradients.scss +++ b/test/_gradients.scss
@@ -5,264 +5,220 @@
5	@use '../src/gradients';	5	@use '../src/gradients';
6		6
7	@include describe('gradients') {	7	@include describe('gradients') {
8	@include it('easing-gradient') {	8	@include it('easing-gradient') {
9	$gradient1: gradients.easing-gradient(	9	$gradient1: gradients.easing-gradient(linear,
10	linear,	10	to right,
11	to right,	11	#000,
12	#000,	12	ease-in-quad,
13	ease-in-quad,	13	transparent);
14	transparent
15	);
16		14
17	$expected1: linear-gradient(	15	$expected1: linear-gradient(to right,
18	to right,	16	#000 0,
19	#000 0,	17	mix(transparent, #000, easing.ease-in-quad(.25) * 100%) 25%,
20	mix(transparent, #000, easing.ease-in-quad(0.25) * 100%) 25%,	18	mix(transparent, #000, easing.ease-in-quad(.5) * 100%) 50%,
21	mix(transparent, #000, easing.ease-in-quad(0.5) * 100%) 50%,	19	mix(transparent, #000, easing.ease-in-quad(.75) * 100%) 75%,
22	mix(transparent, #000, easing.ease-in-quad(0.75) * 100%) 75%,	20	transparent 100%);
23	transparent 100%
24	);
25		21
26	@include assert-equal($gradient1, $expected1, 'Simple linear gradient');	22	@include assert-equal($gradient1, $expected1, 'Simple linear gradient');
27		23
28	// ---------------------------------------------------------------------------	24	// ---------------------------------------------------------------------------
29		25
30	$gradient2: gradients.easing-gradient(	26	$gradient2: gradients.easing-gradient(radial,
31	radial,	27	1em 2em at 50% 60%,
32	1em 2em at 50% 60%,	28	#000,
33	#000,	29	ease-out-cubic,
34	ease-out-cubic,	30	transparent);
35	transparent
36	);
37		31
38	$expected2: radial-gradient(	32	$expected2: radial-gradient(1em 2em at 50% 60%,
39	1em 2em at 50% 60%,	33	#000 0,
40	#000 0,	34	mix(transparent, #000, easing.ease-out-cubic(.25) * 100%) 25%,
41	mix(transparent, #000, easing.ease-out-cubic(0.25) * 100%) 25%,	35	mix(transparent, #000, easing.ease-out-cubic(.5) * 100%) 50%,
42	mix(transparent, #000, easing.ease-out-cubic(0.5) * 100%) 50%,	36	mix(transparent, #000, easing.ease-out-cubic(.75) * 100%) 75%,
43	mix(transparent, #000, easing.ease-out-cubic(0.75) * 100%) 75%,	37	transparent 100%);
44	transparent 100%
45	);
46		38
47	@include assert-equal($gradient2, $expected2, 'Simple radial gradient');	39	@include assert-equal($gradient2, $expected2, 'Simple radial gradient');
48		40
49	// ---------------------------------------------------------------------------	41	// ---------------------------------------------------------------------------
50		42
51	$gradient3: gradients.easing-gradient(	43	$gradient3: gradients.easing-gradient(linear,
52	linear,	44	to right,
53	to right,	45	#000 2em,
54	#000 2em,	46	ease-in-quad,
55	ease-in-quad,	47	transparent 10em);
56	transparent 10em
57	);
58		48
59	$expected3: linear-gradient(	49	$expected3: linear-gradient(to right,
60	to right,	50	#000 2em,
61	#000 2em,	51	mix(transparent, #000, easing.ease-in-quad(.25) * 100%) 4em,
62	mix(transparent, #000, easing.ease-in-quad(0.25) * 100%) 4em,	52	mix(transparent, #000, easing.ease-in-quad(.5) * 100%) 6em,
63	mix(transparent, #000, easing.ease-in-quad(0.5) * 100%) 6em,	53	mix(transparent, #000, easing.ease-in-quad(.75) * 100%) 8em,
64	mix(transparent, #000, easing.ease-in-quad(0.75) * 100%) 8em,	54	transparent 10em);
65	transparent 10em
66	);
67		55
68	@include assert-equal($gradient3, $expected3, 'Linear gradient with positioned color stops');	56	@include assert-equal($gradient3, $expected3, 'Linear gradient with positioned color stops');
69		57
70	// ---------------------------------------------------------------------------	58	// ---------------------------------------------------------------------------
71		59
72	$gradient4: gradients.easing-gradient(	60	$gradient4: gradients.easing-gradient(linear,
73	linear,	61	to right,
74	to right,	62	#000 20%,
75	#000 20%,	63	ease-in-quad,
76	ease-in-quad,	64	transparent calc(20% + 10em));
77	transparent calc(20% + 10em)
78	);
79		65
80	$expected4: linear-gradient(	66	$expected4: linear-gradient(to right,
81	to right,	67	#000 20%,
82	#000 20%,	68	mix(transparent, #000, easing.ease-in-quad(.25) * 100%) calc(20% + (20% + 10em - 20%) * .25),
83	mix(transparent, #000, easing.ease-in-quad(0.25) * 100%) calc(20% + (20% + 10em - 20%) * 0.25),	69	mix(transparent, #000, easing.ease-in-quad(.5) * 100%) calc(20% + (20% + 10em - 20%) * .5),
84	mix(transparent, #000, easing.ease-in-quad(0.5) * 100%) calc(20% + (20% + 10em - 20%) * 0.5),	70	mix(transparent, #000, easing.ease-in-quad(.75) * 100%) calc(20% + (20% + 10em - 20%) * .75),
85	mix(transparent, #000, easing.ease-in-quad(0.75) * 100%) calc(20% + (20% + 10em - 20%) * 0.75),	71	transparent calc(20% + 10em));
86	transparent calc(20% + 10em)
87	);
88		72
89	@include assert-equal($gradient4, $expected4, 'More advanced linear gradient with positioned color stops');	73	@include assert-equal($gradient4, $expected4, 'More advanced linear gradient with positioned color stops');
90		74
91	// ---------------------------------------------------------------------------	75	// ---------------------------------------------------------------------------
92		76
93	$gradient5: gradients.easing-gradient(	77	$gradient5: gradients.easing-gradient(linear,
94	linear,	78	to right,
95	to right,	79	#000 2em,
96	#000 2em,	80	#f00 7em,
97	#f00 7em,	81	ease-in-quad,
98	ease-in-quad,	82	transparent 10em);
99	transparent 10em
100	);
101		83
102	$expected5: linear-gradient(	84	$expected5: linear-gradient(to right,
103	to right,	85	#000 2em,
104	#000 2em,	86	#f00 7em,
105	#f00 7em,	87	mix(transparent, #f00, easing.ease-in-quad(.25) * 100%) 7em + 3em * .25,
106	mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 7em + 3em * 0.25,	88	mix(transparent, #f00, easing.ease-in-quad(.5) * 100%) 7em + 3em * .5,
107	mix(transparent, #f00, easing.ease-in-quad(0.5) * 100%) 7em + 3em * 0.5,	89	mix(transparent, #f00, easing.ease-in-quad(.75) * 100%) 7em + 3em * .75,
108	mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 7em + 3em * 0.75,	90	transparent 10em);
109	transparent 10em
110	);
111		91
112	@include assert-equal($gradient5, $expected5, 'Linear gradient with 3 positioned color stops, 1 easing transitions');	92	@include assert-equal($gradient5, $expected5, 'Linear gradient with 3 positioned color stops, 1 easing transitions');
113		93
114	// ---------------------------------------------------------------------------	94	// ---------------------------------------------------------------------------
115		95
116	$gradient6: gradients.easing-gradient(	96	$gradient6: gradients.easing-gradient(linear,
117	linear,	97	to right,
118	to right,	98	#000 2em,
119	#000 2em,	99	ease-in-quad,
120	ease-in-quad,	100	#f00 7em,
121	#f00 7em,	101	ease-in-quad,
122	ease-in-quad,	102	transparent 10em);
123	transparent 10em
124	);
125		103
126	$expected6: linear-gradient(	104	$expected6: linear-gradient(to right,
127	to right,	105	#000 2em,
128	#000 2em,	106	mix(#f00, #000, easing.ease-in-quad(.25) * 100%) 2em + 5em * .25,
129	mix(#f00, #000, easing.ease-in-quad(0.25) * 100%) 2em + 5em * 0.25,	107	mix(#f00, #000, easing.ease-in-quad(.5) * 100%) 2em + 5em * .5,
130	mix(#f00, #000, easing.ease-in-quad(0.5) * 100%) 2em + 5em * 0.5,	108	mix(#f00, #000, easing.ease-in-quad(.75) * 100%) 2em + 5em * .75,
131	mix(#f00, #000, easing.ease-in-quad(0.75) * 100%) 2em + 5em * 0.75,	109	#f00 7em,
132	#f00 7em,	110	mix(transparent, #f00, easing.ease-in-quad(.25) * 100%) 7em + 3em * .25,
133	mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 7em + 3em * 0.25,	111	mix(transparent, #f00, easing.ease-in-quad(.5) * 100%) 7em + 3em * .5,
134	mix(transparent, #f00, easing.ease-in-quad(0.5) * 100%) 7em + 3em * 0.5,	112	mix(transparent, #f00, easing.ease-in-quad(.75) * 100%) 7em + 3em * .75,
135	mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 7em + 3em * 0.75,	113	transparent 10em);
136	transparent 10em
137	);
138		114
139	@include assert-equal($gradient6, $expected6, 'Linear gradient with 3 positioned color stops, 2 easing transitions');	115	@include assert-equal($gradient6, $expected6, 'Linear gradient with 3 positioned color stops, 2 easing transitions');
140		116
141	// ---------------------------------------------------------------------------	117	// ---------------------------------------------------------------------------
142		118
143	$gradient7: gradients.easing-gradient(	119	$gradient7: gradients.easing-gradient(linear,
144	linear,	120	to right,
145	to right,	121	#000 2em,
146	#000 2em,	122	ease-in-quad,
147	ease-in-quad,	123	#f00,
148	#f00,	124	ease-in-quad,
149	ease-in-quad,	125	transparent 10em);
150	transparent 10em
151	);
152		126
153	$expected7: linear-gradient(	127	$expected7: linear-gradient(to right,
154	to right,	128	#000 2em,
155	#000 2em,	129	mix(#f00, #000, easing.ease-in-quad(.25) * 100%) 2em + 4em * .25,
156	mix(#f00, #000, easing.ease-in-quad(0.25) * 100%) 2em + 4em * 0.25,	130	mix(#f00, #000, easing.ease-in-quad(.5) * 100%) 2em + 4em * .5,
157	mix(#f00, #000, easing.ease-in-quad(0.5) * 100%) 2em + 4em * 0.5,	131	mix(#f00, #000, easing.ease-in-quad(.75) * 100%) 2em + 4em * .75,
158	mix(#f00, #000, easing.ease-in-quad(0.75) * 100%) 2em + 4em * 0.75,	132	#f00 6em,
159	#f00 6em,	133	mix(transparent, #f00, easing.ease-in-quad(.25) * 100%) 6em + 4em * .25,
160	mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 6em + 4em * 0.25,	134	mix(transparent, #f00, easing.ease-in-quad(.5) * 100%) 6em + 4em * .5,
161	mix(transparent, #f00, easing.ease-in-quad(0.5) * 100%) 6em + 4em * 0.5,	135	mix(transparent, #f00, easing.ease-in-quad(.75) * 100%) 6em + 4em * .75,
162	mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 6em + 4em * 0.75,	136	transparent 10em);
163	transparent 10em
164	);
165		137
166	@include assert-equal($gradient7, $expected7, 'Linear gradient with 2 / 3 positioned color stops, 2 easing transitions');	138	@include assert-equal($gradient7, $expected7, 'Linear gradient with 2 / 3 positioned color stops, 2 easing transitions');
167		139
168	// ---------------------------------------------------------------------------	140	// ---------------------------------------------------------------------------
169		141
170	$gradient8: gradients.easing-gradient(	142	$gradient8: gradients.easing-gradient(linear,
171	linear,	143	to right,
172	to right,	144	#000,
173	#000,	145	ease-in-quad,
174	ease-in-quad,	146	#f00,
175	#f00,	147	ease-in-quad,
176	ease-in-quad,	148	transparent);
177	transparent
178	);
179		149
180	$expected8: linear-gradient(	150	$expected8: linear-gradient(to right,
181	to right,	151	#000 0,
182	#000 0,	152	mix(#f00, #000, easing.ease-in-quad(.25) * 100%) 50% * .25,
183	mix(#f00, #000, easing.ease-in-quad(0.25) * 100%) 50% * 0.25,	153	mix(#f00, #000, easing.ease-in-quad(.5) * 100%) 50% * .5,
184	mix(#f00, #000, easing.ease-in-quad(0.5) * 100%) 50% * 0.5,	154	mix(#f00, #000, easing.ease-in-quad(.75) * 100%) 50% * .75,
185	mix(#f00, #000, easing.ease-in-quad(0.75) * 100%) 50% * 0.75,	155	#f00 50%,
186	#f00 50%,	156	mix(transparent, #f00, easing.ease-in-quad(.25) * 100%) 50% + 50% * .25,
187	mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 50% + 50% * 0.25,	157	mix(transparent, #f00, easing.ease-in-quad(.5) * 100%) 50% + 50% * .5,
188	mix(transparent, #f00, easing.ease-in-quad(0.5) * 100%) 50% + 50% * 0.5,	158	mix(transparent, #f00, easing.ease-in-quad(.75) * 100%) 50% + 50% * .75,
189	mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 50% + 50% * 0.75,	159	transparent 100%);
190	transparent 100%
191	);
192		160
193	@include assert-equal($gradient8, $expected8, 'Linear gradient with 0 / 3 positioned color stops, 2 easing transitions');	161	@include assert-equal($gradient8, $expected8, 'Linear gradient with 0 / 3 positioned color stops, 2 easing transitions');
194		162
195	// ---------------------------------------------------------------------------	163	// ---------------------------------------------------------------------------
196		164
197	$gradient9: gradients.easing-gradient(	165	$gradient9: gradients.easing-gradient(linear,
198	linear,	166	to right,
199	to right,	167	#000,
200	#000,	168	ease-in-quad,
201	ease-in-quad,	169	#f00,
202	#f00,	170	ease-in-quad,
203	ease-in-quad,	171	transparent 20em);
204	transparent 20em
205	);
206		172
207	$expected9: linear-gradient(	173	$expected9: linear-gradient(to right,
208	to right,	174	#000 0,
209	#000 0,	175	mix(#f00, #000, easing.ease-in-quad(.25) * 100%) 10em * .25,
210	mix(#f00, #000, easing.ease-in-quad(0.25) * 100%) 10em * 0.25,	176	mix(#f00, #000, easing.ease-in-quad(.5) * 100%) 10em * .5,
211	mix(#f00, #000, easing.ease-in-quad(0.5) * 100%) 10em * 0.5,	177	mix(#f00, #000, easing.ease-in-quad(.75) * 100%) 10em * .75,
212	mix(#f00, #000, easing.ease-in-quad(0.75) * 100%) 10em * 0.75,	178	#f00 10em,
213	#f00 10em,	179	mix(transparent, #f00, easing.ease-in-quad(.25) * 100%) 10em + 10em * .25,
214	mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 10em + 10em * 0.25,	180	mix(transparent, #f00, easing.ease-in-quad(.5) * 100%) 10em + 10em * .5,
215	mix(transparent, #f00, easing.ease-in-quad(0.5) * 100%) 10em + 10em * 0.5,	181	mix(transparent, #f00, easing.ease-in-quad(.75) * 100%) 10em + 10em * .75,
216	mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 10em + 10em * 0.75,	182	transparent 20em);
217	transparent 20em
218	);
219		183
220	@include assert-equal($gradient9, $expected9, 'Linear gradient with 1 / 3 positioned color stops, 2 easing transitions');	184	@include assert-equal($gradient9, $expected9, 'Linear gradient with 1 / 3 positioned color stops, 2 easing transitions');
221		185
222	// ---------------------------------------------------------------------------	186	// ---------------------------------------------------------------------------
223		187
224	$gradient10: gradients.easing-gradient(	188	$gradient10: gradients.easing-gradient(linear,
225	linear,	189	to right,
226	to right,	190	#000,
227	#000,	191	cubic-bezier .47 0 .745 .715,
228	cubic-bezier 0.47 0 0.745 0.715,	192	transparent);
229	transparent
230	);
231		193
232	$expected10: linear-gradient(	194	$expected10: linear-gradient(to right,
233	to right,	195	#000 0,
234	#000 0,	196	mix(transparent, #000, easing.cubic-bezier(.47, 0, .745, .715, .25) * 100%) 25%,
235	mix(transparent, #000, easing.cubic-bezier(0.47, 0, 0.745, 0.715, 0.25) * 100%) 25%,	197	mix(transparent, #000, easing.cubic-bezier(.47, 0, .745, .715, .5) * 100%) 50%,
236	mix(transparent, #000, easing.cubic-bezier(0.47, 0, 0.745, 0.715, 0.5) * 100%) 50%,	198	mix(transparent, #000, easing.cubic-bezier(.47, 0, .745, .715, .75) * 100%) 75%,
237	mix(transparent, #000, easing.cubic-bezier(0.47, 0, 0.745, 0.715, 0.75) * 100%) 75%,	199	transparent 100%);
238	transparent 100%
239	);
240		200
241	@include assert-equal($gradient10, $expected10, 'Simple linear gradient with custom cubic-bezier easing');	201	@include assert-equal($gradient10, $expected10, 'Simple linear gradient with custom cubic-bezier easing');
242		202
243	// ---------------------------------------------------------------------------	203	// ---------------------------------------------------------------------------
244		204
245	$gradient11: gradients.easing-gradient(	205	$gradient11: gradients.easing-gradient(linear,
246	linear,	206	to right,
247	to right,	207	#000,
248	#000,	208	steps 4 jump-start,
249	steps 4 jump-start,	209	transparent);
250	transparent
251	);
252		210
253	$expected11: linear-gradient(	211	$expected11: linear-gradient(to right,
254	to right,	212	#000 0,
255	#000 0,	213	mix(transparent, #000, .25 * 100%) 0,
256	mix(transparent, #000, 0.25 * 100%) 0,	214	mix(transparent, #000, .25 * 100%) 25%,
257	mix(transparent, #000, 0.25 * 100%) 25%,	215	mix(transparent, #000, .5 * 100%) 25%,
258	mix(transparent, #000, 0.5 * 100%) 25%,	216	mix(transparent, #000, .5 * 100%) 50%,
259	mix(transparent, #000, 0.5 * 100%) 50%,	217	mix(transparent, #000, .75 * 100%) 50%,
260	mix(transparent, #000, 0.75 * 100%) 50%,	218	mix(transparent, #000, .75 * 100%) 75%,
261	mix(transparent, #000, 0.75 * 100%) 75%,	219	transparent 75%,
262	transparent 75%,	220	transparent 100%);
263	transparent 100%
264	);
265		221
266	@include assert-equal($gradient11, $expected11, 'Simple linear gradient with custom steps easing');	222	@include assert-equal($gradient11, $expected11, 'Simple linear gradient with custom steps easing');
267	}	223	}
268	}	224	}