From 4fbf07b26a172e4ea8a6198c5bd7959c85922992 Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Thu, 5 Oct 2023 17:01:52 -0700 Subject: [PATCH] [Color 4] Add tests for lch() --- spec/core_functions/color/lch/README.md | 2 + spec/core_functions/color/lch/_utils.scss | 27 ++ spec/core_functions/color/lch/alpha.hrx | 120 ++++++++ spec/core_functions/color/lch/error.hrx | 272 ++++++++++++++++++ spec/core_functions/color/lch/no_alpha.hrx | 189 ++++++++++++ spec/core_functions/color/lch/options.yml | 3 + .../color/lch/special_functions.hrx | 142 +++++++++ 7 files changed, 755 insertions(+) create mode 100644 spec/core_functions/color/lch/README.md create mode 100644 spec/core_functions/color/lch/_utils.scss create mode 100644 spec/core_functions/color/lch/alpha.hrx create mode 100644 spec/core_functions/color/lch/error.hrx create mode 100644 spec/core_functions/color/lch/no_alpha.hrx create mode 100644 spec/core_functions/color/lch/options.yml create mode 100644 spec/core_functions/color/lch/special_functions.hrx diff --git a/spec/core_functions/color/lch/README.md b/spec/core_functions/color/lch/README.md new file mode 100644 index 0000000000..5117c908e1 --- /dev/null +++ b/spec/core_functions/color/lch/README.md @@ -0,0 +1,2 @@ +Some of the same behavior tested for `lab()` applies to this function as well, +but for terseness' sake isn't tested explicitly. diff --git a/spec/core_functions/color/lch/_utils.scss b/spec/core_functions/color/lch/_utils.scss new file mode 100644 index 0000000000..508c32e306 --- /dev/null +++ b/spec/core_functions/color/lch/_utils.scss @@ -0,0 +1,27 @@ +@use 'sass:color'; +@use 'sass:list'; +@use 'sass:meta'; + +@function -real-channel($color, $channel) { + @if color.is-missing($color, $channel) { + @return none; + } @else { + @return color.channel($color, $channel); + } +} + +@mixin inspect($color) { + a { + value: $color; + @if meta.type-of($color) == string { + type: string; + } @else { + channels: list.slash( + -real-channel($color, 'lightness') + -real-channel($color, 'chroma') + -real-channel($color, 'hue'), + -real-channel($color, 'alpha') + ); + } + } +} diff --git a/spec/core_functions/color/lch/alpha.hrx b/spec/core_functions/color/lch/alpha.hrx new file mode 100644 index 0000000000..170b7b0b63 --- /dev/null +++ b/spec/core_functions/color/lch/alpha.hrx @@ -0,0 +1,120 @@ +<===> transparent/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1% 2 3deg / 0)); + +<===> transparent/output.css +a { + value: lch(1% 2 3deg / 0); + channels: 1% 2 3deg / 0; +} + +<===> +================================================================================ +<===> opaque/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1% 2 3deg / 1)); + +<===> opaque/output.css +a { + value: lch(1% 2 3deg); + channels: 1% 2 3deg / 1; +} + +<===> +================================================================================ +<===> partial/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1% 2 3deg / 0.4)); + +<===> partial/output.css +a { + value: lch(1% 2 3deg / 0.4); + channels: 1% 2 3deg / 0.4; +} + +<===> +================================================================================ +<===> percent/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1% 2 3deg / 40%)); + +<===> percent/output.css +a { + value: lch(1% 2 3deg / 0.4); + channels: 1% 2 3deg / 0.4; +} + +<===> +================================================================================ +<===> named/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch($channels: 1% 2 3deg / 0.4)); + +<===> named/output.css +a { + value: lch(1% 2 3deg / 0.4); + channels: 1% 2 3deg / 0.4; +} + +<===> +================================================================================ +<===> slash_list/input.scss +@use "sass:list"; +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(list.slash(1% 2 3deg, 0.4))); + +<===> slash_list/output.css +a { + value: lch(1% 2 3deg / 0.4); + channels: 1% 2 3deg / 0.4; +} + +<===> +================================================================================ +<===> none/slash/hue/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1% 2 none / 0.4)); + +<===> none/slash/hue/output.css +a { + value: lch(1% 2 none / 0.4); + channels: 1% 2 none / 0.4; +} + +<===> +================================================================================ +<===> none/slash/alpha/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1% 2 3deg / none)); + +<===> none/slash/alpha/output.css +a { + value: lch(1% 2 3deg / none); + channels: 1% 2 3deg / none; +} + +<===> +================================================================================ +<===> none/slash_list/hue/input.scss +@use 'sass:list'; +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(list.slash(1% 2 none, 0.4))); + +<===> none/slash_list/hue/output.css +a { + value: lch(1% 2 none / 0.4); + channels: 1% 2 none / 0.4; +} + +<===> +================================================================================ +<===> none/slash_list/alpha/input.scss +@use 'sass:list'; +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(list.slash(1% 2 3deg, none))); + +<===> none/slash_list/alpha/output.css +a { + value: lch(1% 2 3deg / none); + channels: 1% 2 3deg / none; +} diff --git a/spec/core_functions/color/lch/error.hrx b/spec/core_functions/color/lch/error.hrx new file mode 100644 index 0000000000..f79aefbf14 --- /dev/null +++ b/spec/core_functions/color/lch/error.hrx @@ -0,0 +1,272 @@ +<===> unit/lightness/input.scss +a {b: lch(1px 2 3deg)} + +<===> unit/lightness/error +Error: $lightness: Expected 1px to have unit "%" or no units. + , +1 | a {b: lch(1px 2 3deg)} + | ^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> unit/chroma/input.scss +a {b: lch(1% 2px 3deg)} + +<===> unit/chroma/error +Error: $chroma: Expected 2px to have unit "%" or no units. + , +1 | a {b: lch(1% 2px 3deg)} + | ^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> unit/hue/unrelated/input.scss +a {b: lch(1% 2 3px)} + +<===> unit/hue/unrelated/error +Error: $hue: Expected 3px to have an angle unit (deg, grad, rad, turn). + , +1 | a {b: lch(1% 2 3px)} + | ^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> unit/hue/percent/input.scss +a {b: lch(1% 2 3%)} + +<===> unit/hue/percent/error +Error: $hue: Expected 3% to have an angle unit (deg, grad, rad, turn). + , +1 | a {b: lch(1% 2 3%)} + | ^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> unit/alpha/slash/input.scss +a {b: lch(1% 2 3deg/0.4px)} + +<===> unit/alpha/slash/error +Error: $alpha: Expected 0.4px to have unit "%" or no units. + , +1 | a {b: lch(1% 2 3deg/0.4px)} + | ^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> unit/alpha/slash_list/input.scss +@use 'sass:list'; +a {b: lch(list.slash(1% 2 3deg, 0.4px))} + +<===> unit/alpha/slash_list/error +Error: $alpha: Expected 0.4px to have unit "%" or no units. + , +2 | a {b: lch(list.slash(1% 2 3deg, 0.4px))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> type/lightness/input.scss +a {b: lch(c 2 3deg)} + +<===> type/lightness/error +Error: $channels: Expected lightness channel to be a number, was c. + , +1 | a {b: lch(c 2 3deg)} + | ^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> type/chroma/input.scss +a {b: lch(1% c 3deg)} + +<===> type/chroma/error +Error: $channels: Expected chroma channel to be a number, was c. + , +1 | a {b: lch(1% c 3deg)} + | ^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> type/hue/input.scss +a {b: lch(1% 2 c)} + +<===> type/hue/error +Error: $channels: Expected hue channel to be a number, was c. + , +1 | a {b: lch(1% 2 c)} + | ^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> type/alpha/slash_list/input.scss +@use 'sass:list'; +a {b: lch(list.slash(1% 2 3deg, c))} + +<===> type/alpha/slash_list/error +Error: $channels: c is not a number. + , +2 | a {b: lch(list.slash(1% 2 3deg, c))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> list/bracketed/input.scss +a {b: lch([1% 2 3deg])} + +<===> list/bracketed/error +Error: $channels: Expected an unbracketed list, was [1% 2 3deg] + , +1 | a {b: lch([1% 2 3deg])} + | ^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> list/comma/input.scss +a {b: lch((1%, 2, 3deg))} + +<===> list/comma/error +Error: $channels: Expected a space- or slash-separated list, was (1%, 2, 3deg) + , +1 | a {b: lch((1%, 2, 3deg))} + | ^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> list/slash/three/input.scss +@use 'sass:list'; +a {b: lch(list.slash(1%, 2, 3deg))} + +<===> list/slash/three/error +Error: $channels: Only 2 slash-separated elements allowed, but 3 were passed. + , +2 | a {b: lch(list.slash(1%, 2, 3deg))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> list/slash/one/input.scss +@use 'sass:list'; +$single-arg-slash-separated: list.append((), 1% 2 3deg, $separator: slash); +a {b: lch($single-arg-slash-separated)} + +<===> list/slash/one/error +Error: $channels: Only 2 slash-separated elements allowed, but 1 was passed. + , +3 | a {b: lch($single-arg-slash-separated)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 3:7 root stylesheet + +<===> +================================================================================ +<===> list/empty/input.scss +a {b: lch(())} + +<===> list/empty/error +Error: $channels: Color component list may not be empty. + , +1 | a {b: lch(())} + | ^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> list/empty_space/input.scss +@use 'sass:list'; +$empty-space: list.join((), (), $separator: space); +a {b: lch(())} + +<===> list/empty_space/error +Error: $channels: Color component list may not be empty. + , +3 | a {b: lch(())} + | ^^^^^^^ + ' + input.scss 3:7 root stylesheet + +<===> +================================================================================ +<===> list/too_few_channels/input.scss +a {b: lch(1% 2)} + +<===> list/too_few_channels/error +Error: $channels: The lch color space has 3 channels but (1% 2) has 2. + , +1 | a {b: lch(1% 2)} + | ^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> list/too_many_channels/input.scss +a {b: lch(1% 2 3deg 0.4)} + +<===> list/too_many_channels/error +Error: $channels: The lch color space has 3 channels but (1% 2 3deg 0.4) has 4. + , +1 | a {b: lch(1% 2 3deg 0.4)} + | ^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> too_few_args/input.scss +a {b: lch()} + +<===> too_few_args/error +Error: Missing argument $channels. + ,--> input.scss +1 | a {b: lch()} + | ^^^^^ invocation + ' + ,--> sass:color +1 | @function lch($channels) { + | ============== declaration + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> too_many_args/input.scss +a {b: lch(1%, 2, 3deg, 0.4)} + +<===> too_many_args/error +Error: Only 1 argument allowed, but 4 were passed. + ,--> input.scss +1 | a {b: lch(1%, 2, 3deg, 0.4)} + | ^^^^^^^^^^^^^^^^^^^^^ invocation + ' + ,--> sass:color +1 | @function lch($channels) { + | ============== declaration + ' + input.scss 1:7 root stylesheet diff --git a/spec/core_functions/color/lch/no_alpha.hrx b/spec/core_functions/color/lch/no_alpha.hrx new file mode 100644 index 0000000000..65fc7e78b1 --- /dev/null +++ b/spec/core_functions/color/lch/no_alpha.hrx @@ -0,0 +1,189 @@ +<===> unitless/in_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1 2 3deg)); + +<===> unitless/in_range/output.css +a { + value: lch(1% 2 3deg); + channels: 1% 2 3deg / 1; +} + +<===> +================================================================================ +<===> unitless/lightness/above_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(101 2 3deg)); + +<===> unitless/lightness/above_range/output.css +a { + value: lch(100% 2 3deg); + channels: 100% 2 3deg / 1; +} + +<===> +================================================================================ +<===> unitless/lightness/below_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(-1 2 3deg)); + +<===> unitless/lightness/below_range/output.css +a { + value: lch(0% 2 3deg); + channels: 0% 2 3deg / 1; +} + +<===> +================================================================================ +<===> unitless/chroma/above_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1% 0.5 3deg)); + +<===> unitless/chroma/above_range/output.css +a { + value: lch(1% 0.5 3deg); + channels: 1% 0.5 3deg / 1; +} + +<===> +================================================================================ +<===> unitless/chroma/below_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1% -0.1 3deg)); + +<===> unitless/chroma/below_range/output.css +a { + value: lch(1% -0.1 3deg); + channels: 1% -0.1 3deg / 1; +} + +<===> +================================================================================ +<===> unitless/hue/above_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1% 2 361deg)); + +<===> unitless/hue/above_range/output.css +a { + value: lch(1% 2 1deg); + channels: 1% 2 1deg / 1; +} + +<===> +================================================================================ +<===> unitless/hue/below_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1% 2 -1deg)); + +<===> unitless/hue/below_range/output.css +a { + value: lch(1% 2 359deg); + channels: 1% 2 359deg / 1; +} + +<===> +================================================================================ +<===> percent/in_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1% 2% 3deg)); + +<===> percent/in_range/output.css +a { + value: lch(1% 3 3deg); + channels: 1% 3 3deg / 1; +} + +<===> +================================================================================ +<===> percent/lightness/above_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(110% 2 3deg)); + +<===> percent/lightness/above_range/output.css +a { + value: lch(100% 2 3deg); + channels: 100% 2 3deg / 1; +} + +<===> +================================================================================ +<===> percent/lightness/below_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(-1% 2 3deg)); + +<===> percent/lightness/below_range/output.css +a { + value: lch(0% 2 3deg); + channels: 0% 2 3deg / 1; +} + +<===> +================================================================================ +<===> percent/chroma/above_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1% 101% 3deg)); + +<===> percent/chroma/above_range/output.css +a { + value: lch(1% 151.5 3deg); + channels: 1% 151.5 3deg / 1; +} + +<===> +================================================================================ +<===> percent/chroma/below_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1% -1% 3deg)); + +<===> percent/chroma/below_range/output.css +a { + value: lch(1% -1.5 3deg); + channels: 1% -1.5 3deg / 1; +} + +<===> +================================================================================ +<===> none/lightness/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(none 2 3deg)); + +<===> none/lightness/output.css +a { + value: lch(none 2 3deg); + channels: none 2 3deg / 1; +} + +<===> +================================================================================ +<===> none/chroma/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1% none 3deg)); + +<===> none/chroma/output.css +a { + value: lch(1% none 3deg); + channels: 1% none 3deg / 1; +} + +<===> +================================================================================ +<===> none/hue/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1% 2 none)); + +<===> none/hue/output.css +a { + value: lch(1% 2 none); + channels: 1% 2 none / 1; +} + +<===> +================================================================================ +<===> named/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch($channels: 1% 2 3deg)); + +<===> named/output.css +a { + value: lch(1% 2 3deg); + channels: 1% 2 3deg / 1; +} diff --git a/spec/core_functions/color/lch/options.yml b/spec/core_functions/color/lch/options.yml new file mode 100644 index 0000000000..99ecec7ed1 --- /dev/null +++ b/spec/core_functions/color/lch/options.yml @@ -0,0 +1,3 @@ +--- +:ignore_for: +- libsass diff --git a/spec/core_functions/color/lch/special_functions.hrx b/spec/core_functions/color/lch/special_functions.hrx new file mode 100644 index 0000000000..afcf9f8134 --- /dev/null +++ b/spec/core_functions/color/lch/special_functions.hrx @@ -0,0 +1,142 @@ +<===> calculation/arg_1/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(calc(1px + 1%) 2 3deg)); + +<===> calculation/arg_1/output.css +a { + value: lch(calc(1px + 1%) 2 3deg); + type: string; +} + +<===> +================================================================================ +<===> calculation/arg_2/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1% calc(1px + 1%) 3deg)); + +<===> calculation/arg_2/output.css +a { + value: lch(1% calc(1px + 1%) 3deg); + type: string; +} + +<===> +================================================================================ +<===> calculation/arg_3/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1% 2 calc(1px + 1%))); + +<===> calculation/arg_3/output.css +a { + value: lch(1% 2 calc(1px + 1%)); + type: string; +} + +<===> +================================================================================ +<===> calculation/arg_4/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1% 2 3deg / calc(1px + 1%))); + +<===> calculation/arg_4/output.css +a { + value: lch(1% 2 3deg/calc(1px + 1%)); + type: string; +} + +<===> +================================================================================ +<===> var/arg_1/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(var(--foo) 2 3deg)); + +<===> var/arg_1/output.css +a { + value: lch(var(--foo) 2 3deg); + type: string; +} + +<===> +================================================================================ +<===> var/arg_2/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1% var(--foo) 3deg)); + +<===> var/arg_2/output.css +a { + value: lch(1% var(--foo) 3deg); + type: string; +} + +<===> +================================================================================ +<===> var/arg_3/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1% 2 var(--foo))); + +<===> var/arg_3/output.css +a { + value: lch(1% 2 var(--foo)); + type: string; +} + +<===> +================================================================================ +<===> var/arg_4/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1% 2 3deg / var(--foo))); + +<===> var/arg_4/output.css +a { + value: lch(1% 2 3deg/var(--foo)); + type: string; +} + +<===> +================================================================================ +<===> multi_argument_var/1_of_2/input.scss +// var() is substituted before parsing, so it may contain multiple arguments. +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(var(--foo) 2deg)); + +<===> multi_argument_var/1_of_2/output.css +a { + value: lch(var(--foo) 2deg); + type: string; +} + +<===> +================================================================================ +<===> multi_argument_var/2_of_2/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(1% var(--foo))); + +<===> multi_argument_var/2_of_2/output.css +a { + value: lch(1% var(--foo)); + type: string; +} + +<===> +================================================================================ +<===> multi_argument_var/1_of_1/no_alpha/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(var(--foo))); + +<===> multi_argument_var/1_of_1/no_alpha/output.css +a { + value: lch(var(--foo)); + type: string; +} + +<===> +================================================================================ +<===> multi_argument_var/1_of_1/alpha/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(lch(var(--foo) / 0.4)); + +<===> multi_argument_var/1_of_1/alpha/output.css +a { + value: lch(var(--foo)/0.4); + type: string; +}