From 6ac877117c08f516ea0a05885b1f4579917ff839 Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Mon, 9 Oct 2023 15:40:29 -0700 Subject: [PATCH] Re-enable and expand tests for relative colors See #3673 --- .../color/hsl/one_arg/relative_color.hrx | 13 +- spec/core_functions/color/hwb/one_arg.hrx | 148 ++++++++++++++++++ .../color/lab/relative_color.hrx | 146 +++++++++++++++++ spec/core_functions/color/oklab/alpha.hrx | 25 +++ spec/core_functions/color/oklab/no_alpha.hrx | 12 ++ .../color/rgb/one_arg/relative_color.hrx | 16 +- 6 files changed, 345 insertions(+), 15 deletions(-) create mode 100644 spec/core_functions/color/lab/relative_color.hrx diff --git a/spec/core_functions/color/hsl/one_arg/relative_color.hrx b/spec/core_functions/color/hsl/one_arg/relative_color.hrx index 887da2998..94a31093b 100644 --- a/spec/core_functions/color/hsl/one_arg/relative_color.hrx +++ b/spec/core_functions/color/hsl/one_arg/relative_color.hrx @@ -1,9 +1,3 @@ -<===> options.yml -:todo: -- dart-sass - -<===> -================================================================================ <===> static/alpha/input.scss a {b: hsl(from #aaa h s l / 25%)} @@ -61,7 +55,6 @@ a { b: hsl(from var(--c) h s l); } - <===> ================================================================================ <===> different_case/alpha/input.scss @@ -93,6 +86,12 @@ a { b: hsl(from #aaa h s l / 25%); } +<===> +================================================================================ +<===> error/options.yml +:todo: + - dart-sass + <===> ================================================================================ <===> error/quoted/alpha/input.scss diff --git a/spec/core_functions/color/hwb/one_arg.hrx b/spec/core_functions/color/hwb/one_arg.hrx index b50f23c1e..5dd629831 100644 --- a/spec/core_functions/color/hwb/one_arg.hrx +++ b/spec/core_functions/color/hwb/one_arg.hrx @@ -96,3 +96,151 @@ a {b: color.hwb($channels: 180 30% 40% / 0.4)} a { b: hsla(180, 33.3333333333%, 45%, 0.4); } + +<===> +================================================================================ +<===> relative_color/static/alpha/input.scss +a {b: hwb(from #aaa h w b / 25%)} + +<===> relative_color/static/alpha/output.css +a { + b: hwb(from #aaa h w b/25%); +} + +<===> +================================================================================ +<===> relative_color/static/no_alpha/input.scss +a {b: hwb(from #aaa h w b)} + +<===> relative_color/static/no_alpha/output.css +a { + b: hwb(from #aaa h w b); +} + +<===> +================================================================================ +<===> relative_color/calc/alpha/input.scss +a {b: hwb(from #aaa calc(h + 180deg) w b / 25%)} + +<===> relative_color/calc/alpha/output.css +a { + b: hwb(from #aaa calc(h + 180deg) w b/25%); +} + +<===> +================================================================================ +<===> relative_color/calc/no_alpha/input.scss +a {b: hwb(from #aaa calc(h + 180deg) w b)} + +<===> relative_color/calc/no_alpha/output.css +a { + b: hwb(from #aaa calc(h + 180deg) w b); +} + +<===> +================================================================================ +<===> relative_color/var/alpha/input.scss +a {b: hwb(from var(--c) h w b / 25%)} + +<===> relative_color/var/alpha/output.css +a { + b: hwb(from var(--c) h w b/25%); +} + +<===> +================================================================================ +<===> relative_color/var/no_alpha/input.scss +a {b: hwb(from var(--c) h w b)} +<===> relative_color/var/no_alpha/output.css +a { + b: hwb(from var(--c) h w b); +} + +<===> +================================================================================ +<===> relative_color/different_case/alpha/input.scss +a {b: hwb(From #aaa h w b / 25%)} + +<===> relative_color/different_case/alpha/output.css +a { + b: hwb(From #aaa h w b/25%); +} + +<===> +================================================================================ +<===> relative_color/different_case/no_alpha/input.scss +a {b: hwb(From #aaa h w b)} + +<===> relative_color/different_case/no_alpha/output.css +a { + b: hwb(From #aaa h w b); +} + +<===> +================================================================================ +<===> relative_color/slash_list_alpha/input.scss +@use "sass:list"; +a {b: hwb(list.slash(from #aaa h w b, 25%))} + +<===> relative_color/slash_list_alpha/output.css +a { + b: hwb(from #aaa h w b / 25%); +} + +<===> +================================================================================ +<===> relative_color/error/options.yml +:todo: + - dart-sass + +<===> +================================================================================ +<===> relative_color/error/quoted/alpha/input.scss +a {b: hwb("from" #aaa h w b / 25%)} + +<===> relative_color/error/quoted/alpha/error +Error: Only 3 elements allowed, but 5 were passed. + , +1 | a {b: hwb("from" #aaa h w b / 25%)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> relative_color/error/quoted/no_alpha/input.scss +a {b: hwb("from" #aaa h w b)} + +<===> relative_color/error/quoted/no_alpha/error +Error: Only 3 elements allowed, but 5 were passed. + , +1 | a {b: hwb("from" #aaa h w b)} + | ^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> relative_color/error/wrong_keyword/alpha/input.scss +a {b: hwb(c #aaa h w b / 25%)} + +<===> relative_color/error/wrong_keyword/alpha/error +Error: Only 3 elements allowed, but 5 were passed. + , +1 | a {b: hwb(c #aaa h w b / 25%)} + | ^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> relative_color/error/wrong_keyword/no_alpha/input.scss +a {b: hwb(c #aaa h w b)} + +<===> relative_color/error/wrong_keyword/no_alpha/error +Error: Only 3 elements allowed, but 5 were passed. + , +1 | a {b: hwb(c #aaa h w b)} + | ^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet diff --git a/spec/core_functions/color/lab/relative_color.hrx b/spec/core_functions/color/lab/relative_color.hrx new file mode 100644 index 000000000..e378f9376 --- /dev/null +++ b/spec/core_functions/color/lab/relative_color.hrx @@ -0,0 +1,146 @@ +<===> static/alpha/input.scss +a {b: lab(from #aaa l a b / 25%)} + +<===> static/alpha/output.css +a { + b: lab(from #aaa l a b/25%); +} + +<===> +================================================================================ +<===> static/no_alpha/input.scss +a {b: lab(from #aaa l a b)} + +<===> static/no_alpha/output.css +a { + b: lab(from #aaa l a b); +} + +<===> +================================================================================ +<===> calc/alpha/input.scss +a {b: lab(from #aaa calc(l + 0.2) a b / 25%)} + +<===> calc/alpha/output.css +a { + b: lab(from #aaa calc(l + 0.2) a b/25%); +} + +<===> +================================================================================ +<===> calc/no_alpha/input.scss +a {b: lab(from #aaa calc(l + 0.2) a b)} + +<===> calc/no_alpha/output.css +a { + b: lab(from #aaa calc(l + 0.2) a b); +} + +<===> +================================================================================ +<===> var/alpha/input.scss +a {b: lab(from var(--c) l a b / 25%)} + +<===> var/alpha/output.css +a { + b: lab(from var(--c) l a b/25%); +} + +<===> +================================================================================ +<===> var/no_alpha/input.scss +a {b: lab(from var(--c) l a b)} + +<===> var/no_alpha/output.css +a { + b: lab(from var(--c) l a b); +} + +<===> +================================================================================ +<===> different_case/alpha/input.scss +a {b: lab(From #aaa l a b / 25%)} + +<===> different_case/alpha/output.css +a { + b: lab(From #aaa l a b/25%); +} + +<===> +================================================================================ +<===> different_case/no_alpha/input.scss +a {b: lab(From #aaa l a b)} + +<===> different_case/no_alpha/output.css +a { + b: lab(From #aaa l a b); +} + +<===> +================================================================================ +<===> slash_list_alpha/input.scss +@use "sass:list"; +a {b: lab(list.slash(from #aaa r g b, 25%))} + +<===> slash_list_alpha/output.css +a { + b: lab(from #aaa r g b / 25%); +} + +<===> +================================================================================ +<===> error/options.yml +:todo: + - dart-sass + +<===> +================================================================================ +<===> error/quoted/alpha/input.scss +a {b: lab("from" #aaa l a b / 25%)} + +<===> error/quoted/alpha/error +Error: Only 3 elements allowed, but 5 were passed. + , +1 | a {b: lab("from" #aaa l a b / 25%)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> error/quoted/no_alpha/input.scss +a {b: lab("from" #aaa l a b)} + +<===> error/quoted/no_alpha/error +Error: Only 3 elements allowed, but 5 were passed. + , +1 | a {b: lab("from" #aaa l a b)} + | ^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> error/wrong_keyword/alpha/input.scss +a {b: lab(c #aaa l a b / 25%)} + +<===> error/wrong_keyword/alpha/error +Error: Only 3 elements allowed, but 5 were passed. + , +1 | a {b: lab(c #aaa l a b / 25%)} + | ^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> error/wrong_keyword/no_alpha/input.scss +a {b: lab(c #aaa l a b)} + +<===> error/wrong_keyword/no_alpha/error +Error: Only 3 elements allowed, but 5 were passed. + , +1 | a {b: lab(c #aaa l a b)} + | ^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet diff --git a/spec/core_functions/color/oklab/alpha.hrx b/spec/core_functions/color/oklab/alpha.hrx index 4f245830d..6ff6a6287 100644 --- a/spec/core_functions/color/oklab/alpha.hrx +++ b/spec/core_functions/color/oklab/alpha.hrx @@ -118,3 +118,28 @@ a { value: oklab(1% 2 3 / none); channels: 1% 2 3 / none; } + +<===> +================================================================================ +<===> relative_color/slash/input.scss +@use 'core_functions/color/oklab/utils'; +@include utils.inspect(oklab(from #aaa l a b / 25%)); + +<===> relative_color/slash/output.css +a { + value: oklab(from #aaa l a b/25%); + type: string; +} + +<===> +================================================================================ +<===> relative_color/slash_list/input.scss +@use 'sass:list'; +@use 'core_functions/color/oklab/utils'; +@include utils.inspect(oklab(list.slash(from #aaa l a b, 25%))); + +<===> relative_color/slash_list/output.css +a { + value: oklab(from #aaa l a b / 25%); + type: string; +} diff --git a/spec/core_functions/color/oklab/no_alpha.hrx b/spec/core_functions/color/oklab/no_alpha.hrx index 89c41fc68..ffd32248d 100644 --- a/spec/core_functions/color/oklab/no_alpha.hrx +++ b/spec/core_functions/color/oklab/no_alpha.hrx @@ -176,6 +176,18 @@ a { channels: 1% 2 none / 1; } +<===> +================================================================================ +<===> relative_color/input.scss +@use 'core_functions/color/oklab/utils'; +@include utils.inspect(oklab(from #aaa l a b)); + +<===> relative_color/output.css +a { + value: oklab(from #aaa l a b); + type: string; +} + <===> ================================================================================ <===> named/input.scss diff --git a/spec/core_functions/color/rgb/one_arg/relative_color.hrx b/spec/core_functions/color/rgb/one_arg/relative_color.hrx index f6456407e..38805f509 100644 --- a/spec/core_functions/color/rgb/one_arg/relative_color.hrx +++ b/spec/core_functions/color/rgb/one_arg/relative_color.hrx @@ -1,9 +1,3 @@ -<===> options.yml -:todo: -- dart-sass - -<===> -================================================================================ <===> static/alpha/input.scss a {b: rgb(from #aaa r g b / 25%)} @@ -86,13 +80,19 @@ a { ================================================================================ <===> slash_list_alpha/input.scss @use "sass:list"; -a {b: rgb(list.slash(from #aaa h s l, 25%))} +a {b: rgb(list.slash(from #aaa r g b, 25%))} <===> slash_list_alpha/output.css a { - b: rgb(from #aaa h s l / 25%); + b: rgb(from #aaa r g b / 25%); } +<===> +================================================================================ +<===> error/options.yml +:todo: + - dart-sass + <===> ================================================================================ <===> error/quoted/alpha/input.scss