From 5769c7458b6f181b576481f09f8be29b88cdd9ca Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Wed, 24 Apr 2024 16:47:20 -0700 Subject: [PATCH] [Color 4] Add tests for color.channel() (#1978) --- spec/core_functions/color/channel/a98-rgb.hrx | 63 +++++++ .../color/channel/display-p3.hrx | 63 +++++++ spec/core_functions/color/channel/error.hrx | 159 ++++++++++++++++++ spec/core_functions/color/channel/hsl.hrx | 74 ++++++++ spec/core_functions/color/channel/hwb.hrx | 85 ++++++++++ spec/core_functions/color/channel/lab.hrx | 63 +++++++ spec/core_functions/color/channel/lch.hrx | 63 +++++++ spec/core_functions/color/channel/missing.hrx | 9 + spec/core_functions/color/channel/named.hrx | 8 + spec/core_functions/color/channel/oklab.hrx | 63 +++++++ spec/core_functions/color/channel/oklch.hrx | 63 +++++++ .../color/channel/positional.hrx | 8 + .../color/channel/prophoto-rgb.hrx | 63 +++++++ spec/core_functions/color/channel/rec2020.hrx | 63 +++++++ spec/core_functions/color/channel/rgb.hrx | 63 +++++++ .../color/channel/srgb-linear.hrx | 63 +++++++ spec/core_functions/color/channel/srgb.hrx | 63 +++++++ spec/core_functions/color/channel/xyz-d50.hrx | 63 +++++++ spec/core_functions/color/channel/xyz.hrx | 63 +++++++ 19 files changed, 1162 insertions(+) create mode 100644 spec/core_functions/color/channel/a98-rgb.hrx create mode 100644 spec/core_functions/color/channel/display-p3.hrx create mode 100644 spec/core_functions/color/channel/error.hrx create mode 100644 spec/core_functions/color/channel/hsl.hrx create mode 100644 spec/core_functions/color/channel/hwb.hrx create mode 100644 spec/core_functions/color/channel/lab.hrx create mode 100644 spec/core_functions/color/channel/lch.hrx create mode 100644 spec/core_functions/color/channel/missing.hrx create mode 100644 spec/core_functions/color/channel/named.hrx create mode 100644 spec/core_functions/color/channel/oklab.hrx create mode 100644 spec/core_functions/color/channel/oklch.hrx create mode 100644 spec/core_functions/color/channel/positional.hrx create mode 100644 spec/core_functions/color/channel/prophoto-rgb.hrx create mode 100644 spec/core_functions/color/channel/rec2020.hrx create mode 100644 spec/core_functions/color/channel/rgb.hrx create mode 100644 spec/core_functions/color/channel/srgb-linear.hrx create mode 100644 spec/core_functions/color/channel/srgb.hrx create mode 100644 spec/core_functions/color/channel/xyz-d50.hrx create mode 100644 spec/core_functions/color/channel/xyz.hrx diff --git a/spec/core_functions/color/channel/a98-rgb.hrx b/spec/core_functions/color/channel/a98-rgb.hrx new file mode 100644 index 000000000..0af8bc085 --- /dev/null +++ b/spec/core_functions/color/channel/a98-rgb.hrx @@ -0,0 +1,63 @@ +<===> local/red/input.scss +@use 'sass:color'; +a {b: color.channel(color(a98-rgb 0.2 0.5 0.8), "red")} + +<===> local/red/output.css +a { + b: 0.2; +} + +<===> +================================================================================ +<===> local/green/input.scss +@use 'sass:color'; +a {b: color.channel(color(a98-rgb 0.2 0.5 0.8), "green")} + +<===> local/green/output.css +a { + b: 0.5; +} + +<===> +================================================================================ +<===> local/blue/input.scss +@use 'sass:color'; +a {b: color.channel(color(a98-rgb 0.2 0.5 0.8), "blue")} + +<===> local/blue/output.css +a { + b: 0.8; +} + +<===> +================================================================================ +<===> foreign/red/input.scss +@use "sass:color"; +a {b: color.channel(pink, "red", $space: a98-rgb)} + +<===> foreign/red/output.css +a { + b: 0.9363244101; +} + +<===> +================================================================================ +<===> foreign/green/input.scss +@use "sass:color"; +a {b: color.channel(pink, "green", $space: a98-rgb)} + +<===> foreign/green/output.css +a { + b: 0.7473920857; +} + +<===> +================================================================================ +<===> foreign/blue/input.scss +@use "sass:color"; +a {b: color.channel(pink, "blue", $space: a98-rgb)} + +<===> foreign/blue/output.css +a { + b: 0.7893042668; +} diff --git a/spec/core_functions/color/channel/display-p3.hrx b/spec/core_functions/color/channel/display-p3.hrx new file mode 100644 index 000000000..4d9af6376 --- /dev/null +++ b/spec/core_functions/color/channel/display-p3.hrx @@ -0,0 +1,63 @@ +<===> local/red/input.scss +@use 'sass:color'; +a {b: color.channel(color(display-p3 0.2 0.5 0.8), "red")} + +<===> local/red/output.css +a { + b: 0.2; +} + +<===> +================================================================================ +<===> local/green/input.scss +@use 'sass:color'; +a {b: color.channel(color(display-p3 0.2 0.5 0.8), "green")} + +<===> local/green/output.css +a { + b: 0.5; +} + +<===> +================================================================================ +<===> local/blue/input.scss +@use 'sass:color'; +a {b: color.channel(color(display-p3 0.2 0.5 0.8), "blue")} + +<===> local/blue/output.css +a { + b: 0.8; +} + +<===> +================================================================================ +<===> foreign/red/input.scss +@use "sass:color"; +a {b: color.channel(pink, "red", $space: display-p3)} + +<===> foreign/red/output.css +a { + b: 0.9621487118; +} + +<===> +================================================================================ +<===> foreign/green/input.scss +@use "sass:color"; +a {b: color.channel(pink, "green", $space: display-p3)} + +<===> foreign/green/output.css +a { + b: 0.7628803605; +} + +<===> +================================================================================ +<===> foreign/blue/input.scss +@use "sass:color"; +a {b: color.channel(pink, "blue", $space: display-p3)} + +<===> foreign/blue/output.css +a { + b: 0.7971503319; +} diff --git a/spec/core_functions/color/channel/error.hrx b/spec/core_functions/color/channel/error.hrx new file mode 100644 index 000000000..081e61400 --- /dev/null +++ b/spec/core_functions/color/channel/error.hrx @@ -0,0 +1,159 @@ +<===> too_few_args/input.scss +@use "sass:color"; +a {b: color.channel(pink)} + +<===> too_few_args/error +Error: Missing argument $channel. + ,--> input.scss +2 | a {b: color.channel(pink)} + | ^^^^^^^^^^^^^^^^^^^ invocation + ' + ,--> sass:color +1 | @function channel($color, $channel, $space: null) { + | ======================================= declaration + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> too_many_args/input.scss +@use "sass:color"; +a {b: color.channel(pink, "red", rgb, "red")} + +<===> too_many_args/error +Error: Only 3 arguments allowed, but 4 were passed. + ,--> input.scss +2 | a {b: color.channel(pink, "red", rgb, "red")} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ invocation + ' + ,--> sass:color +1 | @function channel($color, $channel, $space: null) { + | ======================================= declaration + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> type/color/input.scss +@use "sass:color"; +a {b: color.channel("pink", "red")} + +<===> type/color/error +Error: $color: "pink" is not a color. + , +2 | a {b: color.channel("pink", "red")} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> type/channel/input.scss +@use "sass:color"; +a {b: color.channel(pink, red)} + +<===> type/channel/error +Error: $channel: red is not a string. + , +2 | a {b: color.channel(pink, red)} + | ^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> type/space/input.scss +@use "sass:color"; +a {b: color.channel(pink, "red", red)} + +<===> type/space/error +Error: $space: red is not a string. + , +2 | a {b: color.channel(pink, "red", red)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> channel/unquoted/input.scss +@use "sass:color"; +a {b: color.channel(hsl(50deg 50% 50%), hue)} + +<===> channel/unquoted/error +Error: $channel: Expected hue to be a quoted string. + , +2 | a {b: color.channel(hsl(50deg 50% 50%), hue)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> channel/wrong_space/input.scss +@use "sass:color"; +a {b: color.channel(red, "hue")} + +<===> channel/wrong_space/error +Error: $channel: Color red has no channel named hue. + , +2 | a {b: color.channel(red, "hue")} + | ^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> channel/wrong_case/input.scss +@use "sass:color"; +a {b: color.channel(red, "RED")} + +<===> channel/wrong_case/error +Error: $channel: Color red has no channel named RED. + , +2 | a {b: color.channel(red, "RED")} + | ^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> channel/unknown/input.scss +@use "sass:color"; +a {b: color.channel(red, "foo")} + +<===> channel/unknown/error +Error: $channel: Color red has no channel named foo. + , +2 | a {b: color.channel(red, "foo")} + | ^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> space/quoted/input.scss +@use "sass:color"; +a {b: color.channel(red, "hue", $space: "hsl")} + +<===> space/quoted/error +Error: $space: Expected "hsl" to be an unquoted string. + , +2 | a {b: color.channel(red, "hue", $space: "hsl")} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> space/unknown/input.scss +@use "sass:color"; +a {b: color.channel(red, "hue", $space: "foo")} + +<===> space/unknown/error +Error: $space: Expected "foo" to be an unquoted string. + , +2 | a {b: color.channel(red, "hue", $space: "foo")} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/channel/hsl.hrx b/spec/core_functions/color/channel/hsl.hrx new file mode 100644 index 000000000..fd85220df --- /dev/null +++ b/spec/core_functions/color/channel/hsl.hrx @@ -0,0 +1,74 @@ +<===> local/hue/input.scss +@use 'sass:color'; +a {b: color.channel(hsl(10 40% 60%), "hue")} + +<===> local/hue/output.css +a { + b: 10deg; +} + +<===> +================================================================================ +<===> local/saturation/input.scss +@use 'sass:color'; +a {b: color.channel(hsl(10deg 40% 60%), "saturation")} + +<===> local/saturation/output.css +a { + b: 40%; +} + +<===> +================================================================================ +<===> local/lightness/input.scss +@use 'sass:color'; +a {b: color.channel(hsl(10deg 40% 60%), "lightness")} + +<===> local/lightness/output.css +a { + b: 60%; +} + +<===> +================================================================================ +<===> local/normalized/hue/input.scss +@use 'sass:color'; +a {b: color.channel(hsl(540 40% 60%), "hue")} + +<===> local/normalized/hue/output.css +a { + b: 180deg; +} + +<===> +================================================================================ +<===> foreign/hue/input.scss +@use "sass:color"; +a {b: color.channel(pink, "hue", $space: hsl)} + +<===> foreign/hue/output.css +a { + b: 349.5238095238deg; +} + +<===> +================================================================================ +<===> foreign/saturation/input.scss +@use "sass:color"; +a {b: color.channel(pink, "saturation", $space: hsl)} + +<===> foreign/saturation/output.css +a { + b: 100%; +} + +<===> +================================================================================ +<===> foreign/lightness/input.scss +@use "sass:color"; +a {b: color.channel(pink, "lightness", $space: hsl)} + +<===> foreign/lightness/output.css +a { + b: 87.6470588235%; +} diff --git a/spec/core_functions/color/channel/hwb.hrx b/spec/core_functions/color/channel/hwb.hrx new file mode 100644 index 000000000..a88c874a3 --- /dev/null +++ b/spec/core_functions/color/channel/hwb.hrx @@ -0,0 +1,85 @@ +<===> local/hue/input.scss +@use 'sass:color'; +a {b: color.channel(hwb(10 30% 40%), "hue")} + +<===> local/hue/output.css +a { + b: 10deg; +} + +<===> +================================================================================ +<===> local/whiteness/input.scss +@use 'sass:color'; +a {b: color.channel(hwb(10deg 30% 40%), "whiteness")} + +<===> local/whiteness/output.css +a { + b: 30%; +} + +<===> +================================================================================ +<===> local/blackness/input.scss +@use 'sass:color'; +a {b: color.channel(hwb(10deg 30% 40%), "blackness")} + +<===> local/blackness/output.css +a { + b: 40%; +} + +<===> +================================================================================ +<===> local/normalized/whiteness/input.scss +@use 'sass:color'; +a {b: color.channel(hwb(10deg 70% 50%), "whiteness")} + +<===> local/normalized/whiteness/output.css +a { + b: 58.3333333333%; +} + +<===> +================================================================================ +<===> local/normalized/blackness/input.scss +@use 'sass:color'; +a {b: color.channel(hwb(10deg 70% 50%), "blackness")} + +<===> local/normalized/blackness/output.css +a { + b: 41.6666666667%; +} + +<===> +================================================================================ +<===> foreign/hue/input.scss +@use "sass:color"; +a {b: color.channel(pink, "hue", $space: hwb)} + +<===> foreign/hue/output.css +a { + b: 349.5238095238deg; +} + +<===> +================================================================================ +<===> foreign/whiteness/input.scss +@use "sass:color"; +a {b: color.channel(pink, "whiteness", $space: hwb)} + +<===> foreign/whiteness/output.css +a { + b: 75.2941176471%; +} + +<===> +================================================================================ +<===> foreign/blackness/input.scss +@use "sass:color"; +a {b: color.channel(pink, "blackness", $space: hwb)} + +<===> foreign/blackness/output.css +a { + b: 0%; +} diff --git a/spec/core_functions/color/channel/lab.hrx b/spec/core_functions/color/channel/lab.hrx new file mode 100644 index 000000000..aca18b5ae --- /dev/null +++ b/spec/core_functions/color/channel/lab.hrx @@ -0,0 +1,63 @@ +<===> local/lightness/input.scss +@use 'sass:color'; +a {b: color.channel(lab(50 -150 30), "lightness")} + +<===> local/lightness/output.css +a { + b: 50%; +} + +<===> +================================================================================ +<===> local/a/input.scss +@use 'sass:color'; +a {b: color.channel(lab(50% -150 30), "a")} + +<===> local/a/output.css +a { + b: -150; +} + +<===> +================================================================================ +<===> local/b/input.scss +@use 'sass:color'; +a {b: color.channel(lab(50% -150 30), "b")} + +<===> local/b/output.css +a { + b: 30; +} + +<===> +================================================================================ +<===> foreign/lightness/input.scss +@use "sass:color"; +a {b: color.channel(pink, "lightness", $space: lab)} + +<===> foreign/lightness/output.css +a { + b: 83.7872528656%; +} + +<===> +================================================================================ +<===> foreign/a/input.scss +@use "sass:color"; +a {b: color.channel(pink, "a", $space: lab)} + +<===> foreign/a/output.css +a { + b: 24.4367702881; +} + +<===> +================================================================================ +<===> foreign/b/input.scss +@use "sass:color"; +a {b: color.channel(pink, "b", $space: lab)} + +<===> foreign/b/output.css +a { + b: 3.7594237161; +} diff --git a/spec/core_functions/color/channel/lch.hrx b/spec/core_functions/color/channel/lch.hrx new file mode 100644 index 000000000..1df44f816 --- /dev/null +++ b/spec/core_functions/color/channel/lch.hrx @@ -0,0 +1,63 @@ +<===> local/lightness/input.scss +@use 'sass:color'; +a {b: color.channel(lch(50 80% 0.5turn), "lightness")} + +<===> local/lightness/output.css +a { + b: 50%; +} + +<===> +================================================================================ +<===> local/a/input.scss +@use 'sass:color'; +a {b: color.channel(lch(50 80% 0.5turn), "chroma")} + +<===> local/a/output.css +a { + b: 120; +} + +<===> +================================================================================ +<===> local/b/input.scss +@use 'sass:color'; +a {b: color.channel(lch(50 80% 0.5turn), "hue")} + +<===> local/b/output.css +a { + b: 180deg; +} + +<===> +================================================================================ +<===> foreign/lightness/input.scss +@use "sass:color"; +a {b: color.channel(pink, "lightness", $space: lch)} + +<===> foreign/lightness/output.css +a { + b: 83.7872528656%; +} + +<===> +================================================================================ +<===> foreign/chroma/input.scss +@use "sass:color"; +a {b: color.channel(pink, "chroma", $space: lch)} + +<===> foreign/chroma/output.css +a { + b: 24.7242595195; +} + +<===> +================================================================================ +<===> foreign/hue/input.scss +@use "sass:color"; +a {b: color.channel(pink, "hue", $space: lch)} + +<===> foreign/hue/output.css +a { + b: 8.7459803895deg; +} diff --git a/spec/core_functions/color/channel/missing.hrx b/spec/core_functions/color/channel/missing.hrx new file mode 100644 index 000000000..cfe9a3096 --- /dev/null +++ b/spec/core_functions/color/channel/missing.hrx @@ -0,0 +1,9 @@ +<===> input.scss +@use 'sass:color'; +a {b: color.channel(rgb(255 none 255), "green")} + +<===> output.css +a { + b: 0; +} + diff --git a/spec/core_functions/color/channel/named.hrx b/spec/core_functions/color/channel/named.hrx new file mode 100644 index 000000000..a2e28b897 --- /dev/null +++ b/spec/core_functions/color/channel/named.hrx @@ -0,0 +1,8 @@ +<===> input.scss +@use "sass:color"; +a {b: color.channel($color: pink, $channel: "hue", $space: hsl)} + +<===> output.css +a { + b: 349.5238095238deg; +} diff --git a/spec/core_functions/color/channel/oklab.hrx b/spec/core_functions/color/channel/oklab.hrx new file mode 100644 index 000000000..5ce02231a --- /dev/null +++ b/spec/core_functions/color/channel/oklab.hrx @@ -0,0 +1,63 @@ +<===> local/lightness/input.scss +@use 'sass:color'; +a {b: color.channel(oklab(0.5 -1 50%), "lightness")} + +<===> local/lightness/output.css +a { + b: 50%; +} + +<===> +================================================================================ +<===> local/a/input.scss +@use 'sass:color'; +a {b: color.channel(oklab(0.5 -1 50%), "a")} + +<===> local/a/output.css +a { + b: -1; +} + +<===> +================================================================================ +<===> local/b/input.scss +@use 'sass:color'; +a {b: color.channel(oklab(0.5 -1 50%), "b")} + +<===> local/b/output.css +a { + b: 0.2; +} + +<===> +================================================================================ +<===> foreign/lightness/input.scss +@use "sass:color"; +a {b: color.channel(pink, "lightness", $space: oklab)} + +<===> foreign/lightness/output.css +a { + b: 86.7738445294%; +} + +<===> +================================================================================ +<===> foreign/a/input.scss +@use "sass:color"; +a {b: color.channel(pink, "a", $space: oklab)} + +<===> foreign/a/output.css +a { + b: 0.0729803698; +} + +<===> +================================================================================ +<===> foreign/b/input.scss +@use "sass:color"; +a {b: color.channel(pink, "b", $space: oklab)} + +<===> foreign/b/output.css +a { + b: 0.0090714488; +} diff --git a/spec/core_functions/color/channel/oklch.hrx b/spec/core_functions/color/channel/oklch.hrx new file mode 100644 index 000000000..2620a130a --- /dev/null +++ b/spec/core_functions/color/channel/oklch.hrx @@ -0,0 +1,63 @@ +<===> local/lightness/input.scss +@use 'sass:color'; +a {b: color.channel(oklch(0.3 80% 30), "lightness")} + +<===> local/lightness/output.css +a { + b: 30%; +} + +<===> +================================================================================ +<===> local/a/input.scss +@use 'sass:color'; +a {b: color.channel(oklch(0.3 80% 30), "chroma")} + +<===> local/a/output.css +a { + b: 0.32; +} + +<===> +================================================================================ +<===> local/b/input.scss +@use 'sass:color'; +a {b: color.channel(oklch(0.3 80% 30), "hue")} + +<===> local/b/output.css +a { + b: 30deg; +} + +<===> +================================================================================ +<===> foreign/lightness/input.scss +@use "sass:color"; +a {b: color.channel(pink, "lightness", $space: oklch)} + +<===> foreign/lightness/output.css +a { + b: 86.7738445294%; +} + +<===> +================================================================================ +<===> foreign/chroma/input.scss +@use "sass:color"; +a {b: color.channel(pink, "chroma", $space: oklch)} + +<===> foreign/chroma/output.css +a { + b: 0.0735419986; +} + +<===> +================================================================================ +<===> foreign/hue/input.scss +@use "sass:color"; +a {b: color.channel(pink, "hue", $space: oklch)} + +<===> foreign/hue/output.css +a { + b: 7.0855142734deg; +} diff --git a/spec/core_functions/color/channel/positional.hrx b/spec/core_functions/color/channel/positional.hrx new file mode 100644 index 000000000..212bad64a --- /dev/null +++ b/spec/core_functions/color/channel/positional.hrx @@ -0,0 +1,8 @@ +<===> input.scss +@use 'sass:color'; +a {b: color.channel(oklch(60% 70% 0.6turn), "red", rgb)} + +<===> output.css +a { + b: -143.1028884453; +} diff --git a/spec/core_functions/color/channel/prophoto-rgb.hrx b/spec/core_functions/color/channel/prophoto-rgb.hrx new file mode 100644 index 000000000..32e711673 --- /dev/null +++ b/spec/core_functions/color/channel/prophoto-rgb.hrx @@ -0,0 +1,63 @@ +<===> local/red/input.scss +@use 'sass:color'; +a {b: color.channel(color(prophoto-rgb 0.2 0.5 0.8), "red")} + +<===> local/red/output.css +a { + b: 0.2; +} + +<===> +================================================================================ +<===> local/green/input.scss +@use 'sass:color'; +a {b: color.channel(color(prophoto-rgb 0.2 0.5 0.8), "green")} + +<===> local/green/output.css +a { + b: 0.5; +} + +<===> +================================================================================ +<===> local/blue/input.scss +@use 'sass:color'; +a {b: color.channel(color(prophoto-rgb 0.2 0.5 0.8), "blue")} + +<===> local/blue/output.css +a { + b: 0.8; +} + +<===> +================================================================================ +<===> foreign/red/input.scss +@use "sass:color"; +a {b: color.channel(pink, "red", $space: prophoto-rgb)} + +<===> foreign/red/output.css +a { + b: 0.8755603733; +} + +<===> +================================================================================ +<===> foreign/green/input.scss +@use "sass:color"; +a {b: color.channel(pink, "green", $space: prophoto-rgb)} + +<===> foreign/green/output.css +a { + b: 0.7357592889; +} + +<===> +================================================================================ +<===> foreign/blue/input.scss +@use "sass:color"; +a {b: color.channel(pink, "blue", $space: prophoto-rgb)} + +<===> foreign/blue/output.css +a { + b: 0.7499576055; +} diff --git a/spec/core_functions/color/channel/rec2020.hrx b/spec/core_functions/color/channel/rec2020.hrx new file mode 100644 index 000000000..1daa6eecc --- /dev/null +++ b/spec/core_functions/color/channel/rec2020.hrx @@ -0,0 +1,63 @@ +<===> local/red/input.scss +@use 'sass:color'; +a {b: color.channel(color(rec2020 0.2 0.5 0.8), "red")} + +<===> local/red/output.css +a { + b: 0.2; +} + +<===> +================================================================================ +<===> local/green/input.scss +@use 'sass:color'; +a {b: color.channel(color(rec2020 0.2 0.5 0.8), "green")} + +<===> local/green/output.css +a { + b: 0.5; +} + +<===> +================================================================================ +<===> local/blue/input.scss +@use 'sass:color'; +a {b: color.channel(color(rec2020 0.2 0.5 0.8), "blue")} + +<===> local/blue/output.css +a { + b: 0.8; +} + +<===> +================================================================================ +<===> foreign/red/input.scss +@use "sass:color"; +a {b: color.channel(pink, "red", $space: rec2020)} + +<===> foreign/red/output.css +a { + b: 0.9098509852; +} + +<===> +================================================================================ +<===> foreign/green/input.scss +@use "sass:color"; +a {b: color.channel(pink, "green", $space: rec2020)} + +<===> foreign/green/output.css +a { + b: 0.747938727; +} + +<===> +================================================================================ +<===> foreign/blue/input.scss +@use "sass:color"; +a {b: color.channel(pink, "blue", $space: rec2020)} + +<===> foreign/blue/output.css +a { + b: 0.7726929727; +} diff --git a/spec/core_functions/color/channel/rgb.hrx b/spec/core_functions/color/channel/rgb.hrx new file mode 100644 index 000000000..dfc8674ff --- /dev/null +++ b/spec/core_functions/color/channel/rgb.hrx @@ -0,0 +1,63 @@ +<===> local/red/input.scss +@use 'sass:color'; +a {b: color.channel(#abcdef, "red")} + +<===> local/red/output.css +a { + b: 171; +} + +<===> +================================================================================ +<===> local/green/input.scss +@use 'sass:color'; +a {b: color.channel(#abcdef, "green")} + +<===> local/green/output.css +a { + b: 205; +} + +<===> +================================================================================ +<===> local/blue/input.scss +@use 'sass:color'; +a {b: color.channel(#abcdef, "blue")} + +<===> local/blue/output.css +a { + b: 239; +} + +<===> +================================================================================ +<===> foreign/red/input.scss +@use "sass:color"; +a {b: color.channel(pink, "red")} + +<===> foreign/red/output.css +a { + b: 255; +} + +<===> +================================================================================ +<===> foreign/green/input.scss +@use "sass:color"; +a {b: color.channel(pink, "green")} + +<===> foreign/green/output.css +a { + b: 192; +} + +<===> +================================================================================ +<===> foreign/blue/input.scss +@use "sass:color"; +a {b: color.channel(pink, "blue")} + +<===> foreign/blue/output.css +a { + b: 203; +} diff --git a/spec/core_functions/color/channel/srgb-linear.hrx b/spec/core_functions/color/channel/srgb-linear.hrx new file mode 100644 index 000000000..ab8863b11 --- /dev/null +++ b/spec/core_functions/color/channel/srgb-linear.hrx @@ -0,0 +1,63 @@ +<===> local/red/input.scss +@use 'sass:color'; +a {b: color.channel(color(srgb-linear 0.2 0.5 0.8), "red")} + +<===> local/red/output.css +a { + b: 0.2; +} + +<===> +================================================================================ +<===> local/green/input.scss +@use 'sass:color'; +a {b: color.channel(color(srgb-linear 0.2 0.5 0.8), "green")} + +<===> local/green/output.css +a { + b: 0.5; +} + +<===> +================================================================================ +<===> local/blue/input.scss +@use 'sass:color'; +a {b: color.channel(color(srgb-linear 0.2 0.5 0.8), "blue")} + +<===> local/blue/output.css +a { + b: 0.8; +} + +<===> +================================================================================ +<===> foreign/red/input.scss +@use "sass:color"; +a {b: color.channel(pink, "red", $space: srgb-linear)} + +<===> foreign/red/output.css +a { + b: 1; +} + +<===> +================================================================================ +<===> foreign/green/input.scss +@use "sass:color"; +a {b: color.channel(pink, "green", $space: srgb-linear)} + +<===> foreign/green/output.css +a { + b: 0.5271151257; +} + +<===> +================================================================================ +<===> foreign/blue/input.scss +@use "sass:color"; +a {b: color.channel(pink, "blue", $space: srgb-linear)} + +<===> foreign/blue/output.css +a { + b: 0.5972017884; +} diff --git a/spec/core_functions/color/channel/srgb.hrx b/spec/core_functions/color/channel/srgb.hrx new file mode 100644 index 000000000..867c9791b --- /dev/null +++ b/spec/core_functions/color/channel/srgb.hrx @@ -0,0 +1,63 @@ +<===> local/red/input.scss +@use 'sass:color'; +a {b: color.channel(color(srgb 0.2 0.5 0.8), "red")} + +<===> local/red/output.css +a { + b: 0.2; +} + +<===> +================================================================================ +<===> local/green/input.scss +@use 'sass:color'; +a {b: color.channel(color(srgb 0.2 0.5 0.8), "green")} + +<===> local/green/output.css +a { + b: 0.5; +} + +<===> +================================================================================ +<===> local/blue/input.scss +@use 'sass:color'; +a {b: color.channel(color(srgb 0.2 0.5 0.8), "blue")} + +<===> local/blue/output.css +a { + b: 0.8; +} + +<===> +================================================================================ +<===> foreign/red/input.scss +@use "sass:color"; +a {b: color.channel(pink, "red", $space: srgb)} + +<===> foreign/red/output.css +a { + b: 1; +} + +<===> +================================================================================ +<===> foreign/green/input.scss +@use "sass:color"; +a {b: color.channel(pink, "green", $space: srgb)} + +<===> foreign/green/output.css +a { + b: 0.7529411765; +} + +<===> +================================================================================ +<===> foreign/blue/input.scss +@use "sass:color"; +a {b: color.channel(pink, "blue", $space: srgb)} + +<===> foreign/blue/output.css +a { + b: 0.7960784314; +} diff --git a/spec/core_functions/color/channel/xyz-d50.hrx b/spec/core_functions/color/channel/xyz-d50.hrx new file mode 100644 index 000000000..940553329 --- /dev/null +++ b/spec/core_functions/color/channel/xyz-d50.hrx @@ -0,0 +1,63 @@ +<===> local/x/input.scss +@use 'sass:color'; +a {b: color.channel(color(xyz-d50 -0.2 0.5 1.8), "x")} + +<===> local/x/output.css +a { + b: -0.2; +} + +<===> +================================================================================ +<===> local/y/input.scss +@use 'sass:color'; +a {b: color.channel(color(xyz-d50 -0.2 0.5 1.8), "y")} + +<===> local/y/output.css +a { + b: 0.5; +} + +<===> +================================================================================ +<===> local/z/input.scss +@use 'sass:color'; +a {b: color.channel(color(xyz-d50 -0.2 0.5 1.8), "z")} + +<===> local/z/output.css +a { + b: 1.8; +} + +<===> +================================================================================ +<===> foreign/x/input.scss +@use "sass:color"; +a {b: color.channel(pink, "x", $space: xyz-d50)} + +<===> foreign/x/output.css +a { + b: 0.7245316215; +} + +<===> +================================================================================ +<===> foreign/y/input.scss +@use "sass:color"; +a {b: color.channel(pink, "y", $space: xyz-d50)} + +<===> foreign/y/output.css +a { + b: 0.636577424; +} + +<===> +================================================================================ +<===> foreign/z/input.scss +@use "sass:color"; +a {b: color.channel(pink, "z", $space: xyz-d50)} + +<===> foreign/z/output.css +a { + b: 0.4915583688; +} diff --git a/spec/core_functions/color/channel/xyz.hrx b/spec/core_functions/color/channel/xyz.hrx new file mode 100644 index 000000000..b00abf32d --- /dev/null +++ b/spec/core_functions/color/channel/xyz.hrx @@ -0,0 +1,63 @@ +<===> local/x/input.scss +@use 'sass:color'; +a {b: color.channel(color(xyz-d65 -0.2 0.5 1.8), "x")} + +<===> local/x/output.css +a { + b: -0.2; +} + +<===> +================================================================================ +<===> local/y/input.scss +@use 'sass:color'; +a {b: color.channel(color(xyz-d65 -0.2 0.5 1.8), "y")} + +<===> local/y/output.css +a { + b: 0.5; +} + +<===> +================================================================================ +<===> local/z/input.scss +@use 'sass:color'; +a {b: color.channel(color(xyz-d65 -0.2 0.5 1.8), "z")} + +<===> local/z/output.css +a { + b: 1.8; +} + +<===> +================================================================================ +<===> foreign/x/input.scss +@use "sass:color"; +a {b: color.channel(pink, "x", $space: xyz)} + +<===> foreign/x/output.css +a { + b: 0.7086623629; +} + +<===> +================================================================================ +<===> foreign/y/input.scss +@use "sass:color"; +a {b: color.channel(pink, "y", $space: xyz)} + +<===> foreign/y/output.css +a { + b: 0.6327286137; +} + +<===> +================================================================================ +<===> foreign/z/input.scss +@use "sass:color"; +a {b: color.channel(pink, "z", $space: xyz)} + +<===> foreign/z/output.css +a { + b: 0.6498196913; +}