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