aboutsummaryrefslogtreecommitdiffstats
path: root/test/_gradients.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2025-08-13 12:01:46 +0200
committerVolpeon <git@volpeon.ink>2025-08-13 12:01:46 +0200
commitf0f84513f8efe533b6ee670a6f1a0c074387b2ec (patch)
tree845bc4bacf1bd99acb0dfcc7e4545a36b544d2f8 /test/_gradients.scss
parentMore fix (diff)
downloadiro-sass-f0f84513f8efe533b6ee670a6f1a0c074387b2ec.tar.gz
iro-sass-f0f84513f8efe533b6ee670a6f1a0c074387b2ec.tar.bz2
iro-sass-f0f84513f8efe533b6ee670a6f1a0c074387b2ec.zip
Make use of SASS modules
Diffstat (limited to 'test/_gradients.scss')
-rw-r--r--test/_gradients.scss392
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 @@
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}
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-21 22:07:49 +0000