Skip to content

Commit

Permalink
[Color 4] Update specs for color.change() (#1983)
Browse files Browse the repository at this point in the history
  • Loading branch information
nex3 authored May 2, 2024
1 parent 741f09d commit 2876026
Show file tree
Hide file tree
Showing 41 changed files with 2,939 additions and 902 deletions.
129 changes: 129 additions & 0 deletions spec/core_functions/color/change/a98_rgb.hrx
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
<===> red/unitless/input.scss
@use 'sass:color';
a {b: color.change(color(a98-rgb 0.2 0.5 0.7), $red: 0.5)}

<===> red/unitless/output.css
a {
b: color(a98-rgb 0.5 0.5 0.7);
}

<===>
================================================================================
<===> red/percent/input.scss
@use 'sass:color';
a {b: color.change(color(a98-rgb 0.2 0.5 0.7), $red: 50%)}

<===> red/percent/output.css
a {
b: color(a98-rgb 0.5 0.5 0.7);
}

<===>
================================================================================
<===> red/out_of_range/input.scss
@use 'sass:color';
a {b: color.change(color(a98-rgb 0.2 0.5 0.7), $red: 1.2)}

<===> red/out_of_range/output.css
a {
b: color(a98-rgb 1.2 0.5 0.7);
}

<===>
================================================================================
<===> green/unitless/input.scss
@use 'sass:color';
a {b: color.change(color(a98-rgb 0.2 0.5 0.7), $green: 0.4)}

<===> green/unitless/output.css
a {
b: color(a98-rgb 0.2 0.4 0.7);
}

<===>
================================================================================
<===> green/percent/input.scss
@use 'sass:color';
a {b: color.change(color(a98-rgb 0.2 0.5 0.7), $green: 40%)}

<===> green/percent/output.css
a {
b: color(a98-rgb 0.2 0.4 0.7);
}

<===>
================================================================================
<===> green/out_of_range/input.scss
@use 'sass:color';
a {b: color.change(color(a98-rgb 0.2 0.5 0.7), $green: -0.2)}

<===> green/out_of_range/output.css
a {
b: color(a98-rgb 0.2 -0.2 0.7);
}

<===>
================================================================================
<===> blue/unitless/input.scss
@use 'sass:color';
a {b: color.change(color(a98-rgb 0.2 0.5 0.7), $blue: 0.5)}

<===> blue/unitless/output.css
a {
b: color(a98-rgb 0.2 0.5 0.5);
}

<===>
================================================================================
<===> blue/percent/input.scss
@use 'sass:color';
a {b: color.change(color(a98-rgb 0.2 0.5 0.7), $blue: 50%)}

<===> blue/percent/output.css
a {
b: color(a98-rgb 0.2 0.5 0.5);
}

<===>
================================================================================
<===> blue/out_of_range/input.scss
@use 'sass:color';
a {b: color.change(color(a98-rgb 0.2 0.5 0.7), $blue: 100)}

<===> blue/out_of_range/output.css
a {
b: color(a98-rgb 0.2 0.5 100);
}

<===>
================================================================================
<===> all/input.scss
@use 'sass:color';
a {b: color.change(color(a98-rgb 0.2 0.5 0.7), $red: 0.7, $green: 0.4, $blue: 0.2)}

<===> all/output.css
a {
b: color(a98-rgb 0.7 0.4 0.2);
}

<===>
================================================================================
<===> alpha_input/input.scss
@use 'sass:color';
a {b: color.change(color(a98-rgb 0.2 0.5 0.7 / 0.9), $red: 0.5)}

<===> alpha_input/output.css
a {
b: color(a98-rgb 0.5 0.5 0.7 / 0.9);
}

<===>
================================================================================
<===> alpha_arg/input.scss
@use 'sass:color';
a {b: color.change(color(a98-rgb 0.2 0.5 0.7), $red: 0.5, $alpha: 0.9)}

<===> alpha_arg/output.css
a {
b: color(a98-rgb 0.5 0.5 0.7 / 0.9);
}
129 changes: 129 additions & 0 deletions spec/core_functions/color/change/display_p3.hrx
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
<===> red/unitless/input.scss
@use 'sass:color';
a {b: color.change(color(display-p3 0.2 0.5 0.7), $red: 0.5)}

<===> red/unitless/output.css
a {
b: color(display-p3 0.5 0.5 0.7);
}

<===>
================================================================================
<===> red/percent/input.scss
@use 'sass:color';
a {b: color.change(color(display-p3 0.2 0.5 0.7), $red: 50%)}

<===> red/percent/output.css
a {
b: color(display-p3 0.5 0.5 0.7);
}

<===>
================================================================================
<===> red/out_of_range/input.scss
@use 'sass:color';
a {b: color.change(color(display-p3 0.2 0.5 0.7), $red: 1.2)}

<===> red/out_of_range/output.css
a {
b: color(display-p3 1.2 0.5 0.7);
}

<===>
================================================================================
<===> green/unitless/input.scss
@use 'sass:color';
a {b: color.change(color(display-p3 0.2 0.5 0.7), $green: 0.4)}

<===> green/unitless/output.css
a {
b: color(display-p3 0.2 0.4 0.7);
}

<===>
================================================================================
<===> green/percent/input.scss
@use 'sass:color';
a {b: color.change(color(display-p3 0.2 0.5 0.7), $green: 40%)}

<===> green/percent/output.css
a {
b: color(display-p3 0.2 0.4 0.7);
}

<===>
================================================================================
<===> green/out_of_range/input.scss
@use 'sass:color';
a {b: color.change(color(display-p3 0.2 0.5 0.7), $green: -0.2)}

<===> green/out_of_range/output.css
a {
b: color(display-p3 0.2 -0.2 0.7);
}

<===>
================================================================================
<===> blue/unitless/input.scss
@use 'sass:color';
a {b: color.change(color(display-p3 0.2 0.5 0.7), $blue: 0.5)}

<===> blue/unitless/output.css
a {
b: color(display-p3 0.2 0.5 0.5);
}

<===>
================================================================================
<===> blue/percent/input.scss
@use 'sass:color';
a {b: color.change(color(display-p3 0.2 0.5 0.7), $blue: 50%)}

<===> blue/percent/output.css
a {
b: color(display-p3 0.2 0.5 0.5);
}

<===>
================================================================================
<===> blue/out_of_range/input.scss
@use 'sass:color';
a {b: color.change(color(display-p3 0.2 0.5 0.7), $blue: 100)}

<===> blue/out_of_range/output.css
a {
b: color(display-p3 0.2 0.5 100);
}

<===>
================================================================================
<===> all/input.scss
@use 'sass:color';
a {b: color.change(color(display-p3 0.2 0.5 0.7), $red: 0.7, $green: 0.4, $blue: 0.2)}

<===> all/output.css
a {
b: color(display-p3 0.7 0.4 0.2);
}

<===>
================================================================================
<===> alpha_input/input.scss
@use 'sass:color';
a {b: color.change(color(display-p3 0.2 0.5 0.7 / 0.9), $red: 0.5)}

<===> alpha_input/output.css
a {
b: color(display-p3 0.5 0.5 0.7 / 0.9);
}

<===>
================================================================================
<===> alpha_arg/input.scss
@use 'sass:color';
a {b: color.change(color(display-p3 0.2 0.5 0.7), $red: 0.5, $alpha: 0.9)}

<===> alpha_arg/output.css
a {
b: color(display-p3 0.5 0.5 0.7 / 0.9);
}
Original file line number Diff line number Diff line change
@@ -1,40 +1,43 @@
<===> too_few/input.scss
a {b: change-color()}
@use 'sass:color';
a {b: color.change()}

<===> too_few/error
Error: Missing argument $color.
,--> input.scss
1 | a {b: change-color()}
2 | a {b: color.change()}
| ^^^^^^^^^^^^^^ invocation
'
,--> sass:color
1 | @function change($color, $kwargs...) {
| ========================== declaration
'
input.scss 1:7 root stylesheet
input.scss 2:7 root stylesheet

<===>
================================================================================
<===> too_many/input.scss
a {b: change-color(red, 1)}
@use 'sass:color';
a {b: color.change(red, 1)}

<===> too_many/error
Error: Only one positional argument is allowed. All other arguments must be passed by name.
,
1 | a {b: change-color(red, 1)}
2 | a {b: color.change(red, 1)}
| ^^^^^^^^^^^^^^^^^^^^
'
input.scss 1:7 root stylesheet
input.scss 2:7 root stylesheet

<===>
================================================================================
<===> unknown/input.scss
a {b: change-color(red, $ambience: 10%)}
@use 'sass:color';
a {b: color.change(red, $ambience: 10%)}

<===> unknown/error
Error: $ambience: Color space rgb doesn't have a channel with this name.
,
1 | a {b: change-color(red, $ambience: 10%)}
2 | a {b: color.change(red, $ambience: 10%)}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
'
input.scss 1:7 root stylesheet
input.scss 2:7 root stylesheet
39 changes: 39 additions & 0 deletions spec/core_functions/color/change/error/bounds.hrx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<===> alpha/too_low/input.scss
@use 'sass:color';
a {b: color.change(red, $alpha: -0.001)}

<===> alpha/too_low/error
Error: $alpha: Expected -0.001 to be within 0 and 1.
,
2 | a {b: color.change(red, $alpha: -0.001)}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
'
input.scss 2:7 root stylesheet

<===>
================================================================================
<===> alpha/too_high/input.scss
@use 'sass:color';
a {b: color.change(red, $alpha: 1.001)}

<===> alpha/too_high/error
Error: $alpha: Expected 1.001 to be within 0 and 1.
,
2 | a {b: color.change(red, $alpha: 1.001)}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
'
input.scss 2:7 root stylesheet

<===>
================================================================================
<===> alpha/unit/input.scss
@use 'sass:color';
a {b: color.change(red, $alpha: 150%)}

<===> alpha/unit/error
Error: $alpha: Expected 150% to be within 0% and 100%.
,
2 | a {b: color.change(red, $alpha: 150%)}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
'
input.scss 2:7 root stylesheet
39 changes: 39 additions & 0 deletions spec/core_functions/color/change/error/incompatible_channel.hrx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<===> legacy_space/input.scss
@use 'sass:color';
a {b: color.change(red, $chroma: 50%)}

<===> legacy_space/error
Error: $chroma: Color space rgb doesn't have a channel with this name.
,
2 | a {b: color.change(red, $chroma: 50%)}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
'
input.scss 2:7 root stylesheet

<===>
================================================================================
<===> legacy_channel/input.scss
@use 'sass:color';
a {b: color.change(color(srgb 0.2 0.5 0.7), $whiteness: 50%)}

<===> legacy_channel/error
Error: $whiteness: Color space srgb doesn't have a channel with this name.
,
2 | a {b: color.change(color(srgb 0.2 0.5 0.7), $whiteness: 50%)}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
'
input.scss 2:7 root stylesheet

<===>
================================================================================
<===> modern_both/input.scss
@use 'sass:color';
a {b: color.change(color(srgb 0.2 0.5 0.7), $chroma: 50%)}

<===> modern_both/error
Error: $chroma: Color space srgb doesn't have a channel with this name.
,
2 | a {b: color.change(color(srgb 0.2 0.5 0.7), $chroma: 50%)}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
'
input.scss 2:7 root stylesheet
Loading

0 comments on commit 2876026

Please sign in to comment.