Add relative color syntax tests for the color() function (#1993)

sass · May 16, 2024 · 12fabe2 · 12fabe2
1 parent 7e48831
commit 12fabe2
Show file tree

Hide file tree

Showing 2 changed files with 140 additions and 0 deletions.
diff --git a/spec/core_functions/color/color/error.hrx b/spec/core_functions/color/color/error.hrx
@@ -277,3 +277,55 @@ Error: $description: Unknown color space "foo".
   |       ^^^^^^^^^^^^^^^^
   '
   input.scss 1:7  root stylesheet
+
+<===>
+================================================================================
+<===> relative_color/quoted/alpha/input.scss
+a {b: color("from" #aaa srgb r g b / 25%)}
+
+<===> relative_color/quoted/alpha/error
+Error: $description: Expected "from" to be an unquoted string.
+  ,
+1 | a {b: color("from" #aaa srgb r g b / 25%)}
+  |       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  '
+  input.scss 1:7  root stylesheet
+
+<===>
+================================================================================
+<===> relative_color/quoted/no_alpha/input.scss
+a {b: color("from" #aaa srgb r g b)}
+
+<===> relative_color/quoted/no_alpha/error
+Error: $description: Expected "from" to be an unquoted string.
+  ,
+1 | a {b: color("from" #aaa srgb r g b)}
+  |       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  '
+  input.scss 1:7  root stylesheet
+
+<===>
+================================================================================
+<===> relative_color/wrong_keyword/alpha/input.scss
+a {b: color(c #aaa srgb r g b / 25%)}
+
+<===> relative_color/wrong_keyword/alpha/error
+Error: $description: Unknown color space "c".
+  ,
+1 | a {b: color(c #aaa srgb r g b / 25%)}
+  |       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  '
+  input.scss 1:7  root stylesheet
+
+<===>
+================================================================================
+<===> relative_color/wrong_keyword/no_alpha/input.scss
+a {b: color(c #aaa srgb r g b)}
+
+<===> relative_color/wrong_keyword/no_alpha/error
+Error: $description: Unknown color space "c".
+  ,
+1 | a {b: color(c #aaa srgb r g b)}
+  |       ^^^^^^^^^^^^^^^^^^^^^^^^
+  '
+  input.scss 1:7  root stylesheet
diff --git a/spec/core_functions/color/color/relative_color.hrx b/spec/core_functions/color/color/relative_color.hrx
@@ -0,0 +1,88 @@
+<===> static/alpha/input.scss
+a {b: color(from #aaa srgb r g b / 25%)}
+
+<===> static/alpha/output.css
+a {
+  b: color(from #aaa srgb r g b/25%);
+}
+
+<===>
+================================================================================
+<===> static/no_alpha/input.scss
+a {b: color(from #aaa srgb r g b)}
+
+<===> static/no_alpha/output.css
+a {
+  b: color(from #aaa srgb r g b);
+}
+
+<===>
+================================================================================
+<===> calc/alpha/input.scss
+a {b: color(from #aaa srgb calc(l + 0.2) a b / 25%)}
+
+<===> calc/alpha/output.css
+a {
+  b: color(from #aaa srgb calc(l + 0.2) a b/25%);
+}
+
+<===>
+================================================================================
+<===> calc/no_alpha/input.scss
+a {b: color(from #aaa srgb calc(l + 0.2) a b)}
+
+<===> calc/no_alpha/output.css
+a {
+  b: color(from #aaa srgb calc(l + 0.2) a b);
+}
+
+<===>
+================================================================================
+<===> var/alpha/input.scss
+a {b: color(from var(--c) srgb r g b / 25%)}
+
+<===> var/alpha/output.css
+a {
+  b: color(from var(--c) srgb r g b/25%);
+}
+
+<===>
+================================================================================
+<===> var/no_alpha/input.scss
+a {b: color(from var(--c) srgb r g b)}
+
+<===> var/no_alpha/output.css
+a {
+  b: color(from var(--c) srgb r g b);
+}
+
+<===>
+================================================================================
+<===> different_case/alpha/input.scss
+a {b: color(From #aaa srgb r g b / 25%)}
+
+<===> different_case/alpha/output.css
+a {
+  b: color(From #aaa srgb r g b/25%);
+}
+
+<===>
+================================================================================
+<===> different_case/no_alpha/input.scss
+a {b: color(From #aaa srgb r g b)}
+
+<===> different_case/no_alpha/output.css
+a {
+  b: color(From #aaa srgb r g b);
+}
+
+<===>
+================================================================================
+<===> slash_list_alpha/input.scss
+@use "sass:list";
+a {b: color(list.slash(from #aaa srgb r g b, 25%))}
+
+<===> slash_list_alpha/output.css
+a {
+  b: color(from #aaa srgb r g b / 25%);
+}