diff --git a/spec/core_functions/color/hsl/basic/output-libsass.css b/spec/core_functions/color/hsl/basic/output-libsass.css deleted file mode 100644 index d95475d953..0000000000 --- a/spec/core_functions/color/hsl/basic/output-libsass.css +++ /dev/null @@ -1,220 +0,0 @@ -hue red { - hue-0: red; - hue--360: red; - hue-260: #5500ff; - hue-6120: red; -} - -hue yellow { - hue-60: yellow; - hue--300: yellow; - hue-420: yellow; - hue--9660: yellow; -} - -hue green { - hue-120: lime; - hue--240: lime; - hue-480: lime; - hue-99840: lime; -} - -hue cyan { - hue-180: cyan; - hue--180: cyan; - hue-540: cyan; - hue--900: cyan; -} - -hue blue { - hue-240: blue; - hue--120: blue; - hue-600: blue; - hue--104880: blue; -} - -hue purple { - hue-300: magenta; - hue--60: magenta; - hue-660: magenta; - hue-2820: magenta; -} - -red-to-green { - step-1: red; - step-2: #ff3300; - step-3: #ff6600; - step-4: #ff9900; - step-5: #ffcc00; - step-6: yellow; - step-7: #ccff00; - step-8: #99ff00; - step-9: #66ff00; - step-10: #33ff00; - step-11: lime; -} - -green-to-blue { - step-1: lime; - step-2: #00ff33; - step-3: #00ff66; - step-4: #00ff99; - step-5: #00ffcc; - step-6: cyan; - step-7: #00ccff; - step-8: #0099ff; - step-9: #0066ff; - step-10: #0033ff; - step-11: blue; -} - -blue-to-red { - step-1: blue; - step-2: #3300ff; - step-3: #6600ff; - step-4: #9900ff; - step-5: #cc00ff; - step-6: magenta; - step-7: #ff00cc; - step-8: #ff0099; - step-9: #ff0066; - step-10: #ff0033; - step-11: red; -} - -gray-to red { - step-1: #996666; - step-2: #cc3333; - step-3: red; -} - -gray-to yellow { - step-1: #999966; - step-2: #cccc33; - step-3: yellow; -} - -gray-to green { - step-1: #669966; - step-2: #33cc33; - step-3: lime; -} - -gray-to cyan { - step-1: #669999; - step-2: #33cccc; - step-3: cyan; -} - -gray-to blue { - step-1: #666699; - step-2: #3333cc; - step-3: blue; -} - -gray-to purple { - step-1: #996699; - step-2: #cc33cc; - step-3: magenta; -} - -black-to-white-through red { - step-1: black; - step-2: #330000; - step-3: #660000; - step-4: #990000; - step-5: #cc0000; - step-6: red; - step-7: #ff3333; - step-8: #ff6666; - step-9: #ff9999; - step-10: #ffcccc; - step-11: white; -} - -black-to-white-through yellow { - step-1: black; - step-2: #333300; - step-3: #666600; - step-4: #999900; - step-5: #cccc00; - step-6: yellow; - step-7: #ffff33; - step-8: #ffff66; - step-9: #ffff99; - step-10: #ffffcc; - step-11: white; -} - -black-to-white-through green { - step-1: black; - step-2: #003300; - step-3: #006600; - step-4: #009900; - step-5: #00cc00; - step-6: lime; - step-7: #33ff33; - step-8: #66ff66; - step-9: #99ff99; - step-10: #ccffcc; - step-11: white; -} - -black-to-white-through cyan { - step-1: black; - step-2: #003333; - step-3: #006666; - step-4: #009999; - step-5: #00cccc; - step-6: cyan; - step-7: #33ffff; - step-8: #66ffff; - step-9: #99ffff; - step-10: #ccffff; - step-11: white; -} - -black-to-white-through blue { - step-1: black; - step-2: #000033; - step-3: #000066; - step-4: #000099; - step-5: #0000cc; - step-6: blue; - step-7: #3333ff; - step-8: #6666ff; - step-9: #9999ff; - step-10: #ccccff; - step-11: white; -} - -black-to-white-through purple { - step-1: black; - step-2: #330033; - step-3: #660066; - step-4: #990099; - step-5: #cc00cc; - step-6: magenta; - step-7: #ff33ff; - step-8: #ff66ff; - step-9: #ff99ff; - step-10: #ffccff; - step-11: white; -} - -clamped { - saturation-above: red; - saturation-below: gray; - lightness-above: white; - lightness-below: black; -} - -units { - hue-deg: red; - saturation-unitless: #bf4040; - lightness-unitless: red; -} - -named { - x: red; -} diff --git a/spec/core_functions/color/hsl/basic/output-ruby-sass.css b/spec/core_functions/color/hsl/basic/output-ruby-sass.css deleted file mode 100644 index 8f121440cd..0000000000 --- a/spec/core_functions/color/hsl/basic/output-ruby-sass.css +++ /dev/null @@ -1,205 +0,0 @@ -hue red { - hue-0: red; - hue--360: red; - hue-260: #5500ff; - hue-6120: red; -} -hue yellow { - hue-60: yellow; - hue--300: yellow; - hue-420: yellow; - hue--9660: yellow; -} -hue green { - hue-120: lime; - hue--240: lime; - hue-480: lime; - hue-99840: lime; -} -hue cyan { - hue-180: cyan; - hue--180: cyan; - hue-540: cyan; - hue--900: cyan; -} -hue blue { - hue-240: blue; - hue--120: blue; - hue-600: blue; - hue--104880: blue; -} -hue purple { - hue-300: magenta; - hue--60: magenta; - hue-660: magenta; - hue-2820: magenta; -} - -red-to-green { - step-1: red; - step-2: #ff3300; - step-3: #ff6600; - step-4: #ff9900; - step-5: #ffcc00; - step-6: yellow; - step-7: #ccff00; - step-8: #99ff00; - step-9: #66ff00; - step-10: #33ff00; - step-11: lime; -} - -green-to-blue { - step-1: lime; - step-2: #00ff33; - step-3: #00ff66; - step-4: #00ff99; - step-5: #00ffcc; - step-6: cyan; - step-7: #00ccff; - step-8: #0099ff; - step-9: #0066ff; - step-10: #0033ff; - step-11: blue; -} - -blue-to-red { - step-1: blue; - step-2: #3300ff; - step-3: #6600ff; - step-4: #9900ff; - step-5: #cc00ff; - step-6: magenta; - step-7: #ff00cc; - step-8: #ff0099; - step-9: #ff0066; - step-10: #ff0033; - step-11: red; -} - -gray-to red { - step-1: #996666; - step-2: #cc3333; - step-3: red; -} -gray-to yellow { - step-1: #999966; - step-2: #cccc33; - step-3: yellow; -} -gray-to green { - step-1: #669966; - step-2: #33cc33; - step-3: lime; -} -gray-to cyan { - step-1: #669999; - step-2: #33cccc; - step-3: cyan; -} -gray-to blue { - step-1: #666699; - step-2: #3333cc; - step-3: blue; -} -gray-to purple { - step-1: #996699; - step-2: #cc33cc; - step-3: magenta; -} - -black-to-white-through red { - step-1: black; - step-2: #330000; - step-3: #660000; - step-4: #990000; - step-5: #cc0000; - step-6: red; - step-7: #ff3333; - step-8: #ff6666; - step-9: #ff9999; - step-10: #ffcccc; - step-11: white; -} -black-to-white-through yellow { - step-1: black; - step-2: #333300; - step-3: #666600; - step-4: #999900; - step-5: #cccc00; - step-6: yellow; - step-7: #ffff33; - step-8: #ffff66; - step-9: #ffff99; - step-10: #ffffcc; - step-11: white; -} -black-to-white-through green { - step-1: black; - step-2: #003300; - step-3: #006600; - step-4: #009900; - step-5: #00cc00; - step-6: lime; - step-7: #33ff33; - step-8: #66ff66; - step-9: #99ff99; - step-10: #ccffcc; - step-11: white; -} -black-to-white-through cyan { - step-1: black; - step-2: #003333; - step-3: #006666; - step-4: #009999; - step-5: #00cccc; - step-6: cyan; - step-7: #33ffff; - step-8: #66ffff; - step-9: #99ffff; - step-10: #ccffff; - step-11: white; -} -black-to-white-through blue { - step-1: black; - step-2: #000033; - step-3: #000066; - step-4: #000099; - step-5: #0000cc; - step-6: blue; - step-7: #3333ff; - step-8: #6666ff; - step-9: #9999ff; - step-10: #ccccff; - step-11: white; -} -black-to-white-through purple { - step-1: black; - step-2: #330033; - step-3: #660066; - step-4: #990099; - step-5: #cc00cc; - step-6: magenta; - step-7: #ff33ff; - step-8: #ff66ff; - step-9: #ff99ff; - step-10: #ffccff; - step-11: white; -} - -clamped { - saturation-above: red; - saturation-below: gray; - lightness-above: white; - lightness-below: black; -} - -units { - hue-deg: red; - saturation-unitless: #bf4040; - lightness-unitless: red; -} - -named { - x: red; -} diff --git a/spec/core_functions/color/hsl/error/two_args.hrx b/spec/core_functions/color/hsl/error/two_args.hrx index 38ddea90de..67697c1b83 100644 --- a/spec/core_functions/color/hsl/error/two_args.hrx +++ b/spec/core_functions/color/hsl/error/two_args.hrx @@ -1,49 +1,17 @@ -<===> options.yml ---- -:todo: -- sass/libsass#2722 +<===> input.scss +a {b: hsl(#123, 0.5)} -<===> -================================================================================ -<===> color/type/input.scss -color-type { - x: hsl("foo", 0.5); -} - -<===> color/type/error +<===> error Error: Missing argument $lightness. , -2 | x: hsl("foo", 0.5); - | ^^^^^^^^^^^^^^^ +1 | a {b: hsl(#123, 0.5)} + | ^^^^^^^^^^^^^^ ' - input.scss 2:6 root stylesheet - -<===> -================================================================================ -<===> alpha/type/input.scss -alpha-type { - x: hsl(#123, "foo"); -} + input.scss 1:7 root stylesheet -<===> alpha/type/error -Error: Missing argument $lightness. - , -2 | x: hsl(#123, "foo"); - | ^^^^^^^^^^^^^^^^ - ' - input.scss 2:6 root stylesheet +<===> error-libsass +Error: Function hsl is missing argument $lightness. + on line 1 of input.scss +>> a {b: hsl(#123, 0.5)} -<===> -================================================================================ -<===> alpha/unit/input.scss -.alpha-unit { - a: hsl(#123, 0.5px); -} - -<===> alpha/unit/error -Error: Missing argument $lightness. - , -2 | a: hsl(#123, 0.5px); - | ^^^^^^^^^^^^^^^^ - ' - input.scss 2:6 root stylesheet + ------^ diff --git a/spec/core_functions/color/hsl/four_args/alpha.hrx b/spec/core_functions/color/hsl/four_args/alpha.hrx new file mode 100644 index 0000000000..6e0db589cd --- /dev/null +++ b/spec/core_functions/color/hsl/four_args/alpha.hrx @@ -0,0 +1,97 @@ +<===> percent/negative/input.scss +a {b: hsl(0, 0, 0, -10%)} + +<===> percent/negative/output.css +a { + b: rgba(0, 0, 0, 0); +} + +<===> +================================================================================ +<===> percent/min/input.scss +a {b: hsl(0, 0, 0, 0%)} + +<===> percent/min/output.css +a { + b: rgba(0, 0, 0, 0); +} + +<===> +================================================================================ +<===> percent/positive/input.scss +a {b: hsl(0, 0, 0, 45.6%)} + +<===> percent/positive/output.css +a { + b: rgba(0, 0, 0, 0.456); +} + +<===> +================================================================================ +<===> percent/max/input.scss +a {b: hsl(0, 0, 0, 100%)} + +<===> percent/max/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> percent/above_max/input.scss +a {b: hsl(0, 0, 0, 250%)} + +<===> percent/above_max/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> unitless/negative/input.scss +a {b: hsl(0, 0, 0, -10)} + +<===> unitless/negative/output.css +a { + b: rgba(0, 0, 0, 0); +} + +<===> +================================================================================ +<===> unitless/min/input.scss +a {b: hsl(0, 0, 0, 0)} + +<===> unitless/min/output.css +a { + b: rgba(0, 0, 0, 0); +} + +<===> +================================================================================ +<===> unitless/positive/input.scss +a {b: hsl(0, 0, 0, 0.456)} + +<===> unitless/positive/output.css +a { + b: rgba(0, 0, 0, 0.456); +} + +<===> +================================================================================ +<===> unitless/max/input.scss +a {b: hsl(0, 0, 0, 1)} + +<===> unitless/max/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> unitless/above_max/input.scss +a {b: hsl(0, 0, 0, 250)} + +<===> unitless/above_max/output.css +a { + b: black; +} diff --git a/spec/core_functions/color/hsl/four_args/alpha_percent.hrx b/spec/core_functions/color/hsl/four_args/alpha_percent.hrx deleted file mode 100644 index 53a66831fa..0000000000 --- a/spec/core_functions/color/hsl/four_args/alpha_percent.hrx +++ /dev/null @@ -1,17 +0,0 @@ -<===> input.scss -.alpha-percent { - negative: hsl(0, 0, 0, -10%); - min: hsl(0, 0, 0, 0%); - positive: hsl(0, 0, 0, 45.6%); - max: hsl(0, 0, 0, 100%); - above-max: hsl(0, 0, 0, 250%); -} - -<===> output.css -.alpha-percent { - negative: rgba(0, 0, 0, 0); - min: rgba(0, 0, 0, 0); - positive: rgba(0, 0, 0, 0.456); - max: black; - above-max: black; -} diff --git a/spec/core_functions/color/hsl/four_args/alpha_unitless.hrx b/spec/core_functions/color/hsl/four_args/alpha_unitless.hrx deleted file mode 100644 index 4697a387fe..0000000000 --- a/spec/core_functions/color/hsl/four_args/alpha_unitless.hrx +++ /dev/null @@ -1,17 +0,0 @@ -<===> input.scss -.alpha-unitless { - negative: hsl(0, 0, 0, -10); - min: hsl(0, 0, 0, 0); - positive: hsl(0, 0, 0, 0.456); - max: hsl(0, 0, 0, 1); - above-max: hsl(0, 0, 0, 250); -} - -<===> output.css -.alpha-unitless { - negative: rgba(0, 0, 0, 0); - min: rgba(0, 0, 0, 0); - positive: rgba(0, 0, 0, 0.456); - max: black; - above-max: black; -} diff --git a/spec/core_functions/color/hsl/four_args/basic.hrx b/spec/core_functions/color/hsl/four_args/basic.hrx deleted file mode 100644 index 6954b4d7be..0000000000 --- a/spec/core_functions/color/hsl/four_args/basic.hrx +++ /dev/null @@ -1,30 +0,0 @@ -<===> input.scss -basic { - transparent: hsl(180, 60%, 50%, 0); - opaque: hsl(180, 60%, 50%, 1); - partial: hsl(180, 60%, 50%, 0.5); - named: hsl($hue: 180, $saturation: 60%, $lightness: 50%, $alpha: 0.4); -} - -// Channels that are out of bounds are clamped within bounds. -clamped { - saturation: hsl(0, -0.1%, 50%, 0.5); - blue: hsl(0, 100%, 9999%, 0.5); - alpha-above: hsl(0, 100%, 50%, 1.1); - alpha-below: rgba(0, 100%, 50%, -0.1); -} - -<===> output.css -basic { - transparent: rgba(51, 204, 204, 0); - opaque: #33cccc; - partial: rgba(51, 204, 204, 0.5); - named: rgba(51, 204, 204, 0.4); -} - -clamped { - saturation: rgba(128, 128, 128, 0.5); - blue: rgba(255, 255, 255, 0.5); - alpha-above: red; - alpha-below: rgba(0, 255, 128, 0); -} diff --git a/spec/core_functions/color/hsl/four_args/clamped.hrx b/spec/core_functions/color/hsl/four_args/clamped.hrx new file mode 100644 index 0000000000..81ce759ab0 --- /dev/null +++ b/spec/core_functions/color/hsl/four_args/clamped.hrx @@ -0,0 +1,43 @@ +<===> README.md +Channels that are out of bounds are clamped within bounds. + +<===> +================================================================================ +<===> saturation/input.scss +a {b: hsl(0, -0.1%, 50%, 0.5)} + +<===> saturation/output.css +a { + b: rgba(128, 128, 128, 0.5); +} + +<===> +================================================================================ +<===> blue/input.scss +a {b: hsl(0, 100%, 9999%, 0.5)} + +<===> blue/output.css +a { + b: rgba(255, 255, 255, 0.5); +} + +<===> +================================================================================ +<===> alpha/above/input.scss +a {b: hsl(0, 100%, 50%, 1.1)} + +<===> alpha/above/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> alpha/below/input.scss +a {b: rgba(0, 100%, 50%, -0.1)} + +<===> alpha/below/output.css +a { + b: rgba(0, 255, 128, 0); +} + diff --git a/spec/core_functions/color/hsl/four_args/in_gamut.hrx b/spec/core_functions/color/hsl/four_args/in_gamut.hrx new file mode 100644 index 0000000000..f5f4e86585 --- /dev/null +++ b/spec/core_functions/color/hsl/four_args/in_gamut.hrx @@ -0,0 +1,37 @@ +<===> transparent/input.scss +a {b: hsl(180, 60%, 50%, 0)} + +<===> transparent/output.css +a { + b: rgba(51, 204, 204, 0); +} + +<===> +================================================================================ +<===> opaque/input.scss +a {b: hsl(180, 60%, 50%, 1)} + +<===> opaque/output.css +a { + b: #33cccc; +} + +<===> +================================================================================ +<===> partial/input.scss +a {b: hsl(180, 60%, 50%, 0.5)} + +<===> partial/output.css +a { + b: rgba(51, 204, 204, 0.5); +} + +<===> +================================================================================ +<===> named/input.scss +a {b: hsl($hue: 180, $saturation: 60%, $lightness: 50%, $alpha: 0.4)} + +<===> named/output.css +a { + b: rgba(51, 204, 204, 0.4); +} diff --git a/spec/core_functions/color/hsl/four_args/special_functions.hrx b/spec/core_functions/color/hsl/four_args/special_functions.hrx index 24c28cff35..581e735d0d 100644 --- a/spec/core_functions/color/hsl/four_args/special_functions.hrx +++ b/spec/core_functions/color/hsl/four_args/special_functions.hrx @@ -4,54 +4,203 @@ - sass/libsass#2726 :ignore_for: -<===> input.scss -a { - calc-1: hsl(calc(1), 2%, 3%, 0.4); - calc-2: hsl(1, calc(2%), 3%, 0.4); - calc-3: hsl(1, 2%, calc(3%), 0.4); - calc-4: hsl(1, 2%, 3%, calc(0.4)); - - var-1: hsl(var(--foo), 2%, 3%, 0.4); - var-2: hsl(1, var(--foo), 3%, 0.4); - var-3: hsl(1, 2%, var(--foo), 0.4); - var-4: hsl(1, 2%, 3%, var(--foo)); - - env-1: hsl(env(--foo), 2%, 3%, 0.4); - env-2: hsl(1, env(--foo), 3%, 0.4); - env-3: hsl(1, 2%, env(--foo), 0.4); - env-4: hsl(1, 2%, 3%, env(--foo)); - - min-1: hsl(min(1), 2%, 3%, 0.4); - min-2: hsl(1, min(2%), 3%, 0.4); - min-3: hsl(1, 2%, min(3%), 0.4); - min-4: hsl(1, 2%, 3%, min(0.4)); - - max-1: hsl(max(1), 2%, 3%, 0.4); - max-2: hsl(1, max(2%), 3%, 0.4); - max-3: hsl(1, 2%, max(3%), 0.4); - max-4: hsl(1, 2%, 3%, max(0.4)); -} - -<===> output.css -a { - calc-1: hsl(calc(1), 2%, 3%, 0.4); - calc-2: hsl(1, calc(2%), 3%, 0.4); - calc-3: hsl(1, 2%, calc(3%), 0.4); - calc-4: hsl(1, 2%, 3%, calc(0.4)); - var-1: hsl(var(--foo), 2%, 3%, 0.4); - var-2: hsl(1, var(--foo), 3%, 0.4); - var-3: hsl(1, 2%, var(--foo), 0.4); - var-4: hsl(1, 2%, 3%, var(--foo)); - env-1: hsl(env(--foo), 2%, 3%, 0.4); - env-2: hsl(1, env(--foo), 3%, 0.4); - env-3: hsl(1, 2%, env(--foo), 0.4); - env-4: hsl(1, 2%, 3%, env(--foo)); - min-1: hsl(min(1), 2%, 3%, 0.4); - min-2: hsl(1, min(2%), 3%, 0.4); - min-3: hsl(1, 2%, min(3%), 0.4); - min-4: hsl(1, 2%, 3%, min(0.4)); - max-1: hsl(max(1), 2%, 3%, 0.4); - max-2: hsl(1, max(2%), 3%, 0.4); - max-3: hsl(1, 2%, max(3%), 0.4); - max-4: hsl(1, 2%, 3%, max(0.4)); +<===> +================================================================================ +<===> calc/arg_1/input.scss +a {b: hsl(calc(1), 2%, 3%, 0.4)} + +<===> calc/arg_1/output.css +a { + b: hsl(calc(1), 2%, 3%, 0.4); +} + +<===> +================================================================================ +<===> calc/arg_2/input.scss +a {b: hsl(1, calc(2%), 3%, 0.4)} + +<===> calc/arg_2/output.css +a { + b: hsl(1, calc(2%), 3%, 0.4); +} + +<===> +================================================================================ +<===> calc/arg_3/input.scss +a {b: hsl(1, 2%, calc(3%), 0.4)} + +<===> calc/arg_3/output.css +a { + b: hsl(1, 2%, calc(3%), 0.4); +} + +<===> +================================================================================ +<===> calc/arg_4/input.scss +a {b: hsl(1, 2%, 3%, calc(0.4))} + +<===> calc/arg_4/output.css +a { + b: hsl(1, 2%, 3%, calc(0.4)); +} + +<===> +================================================================================ +<===> var/arg_1/input.scss +a {b: hsl(var(--foo), 2%, 3%, 0.4)} + +<===> var/arg_1/output.css +a { + b: hsl(var(--foo), 2%, 3%, 0.4); +} + +<===> +================================================================================ +<===> var/arg_2/input.scss +a {b: hsl(1, var(--foo), 3%, 0.4)} + +<===> var/arg_2/output.css +a { + b: hsl(1, var(--foo), 3%, 0.4); +} + +<===> +================================================================================ +<===> var/arg_3/input.scss +a {b: hsl(1, 2%, var(--foo), 0.4)} + +<===> var/arg_3/output.css +a { + b: hsl(1, 2%, var(--foo), 0.4); +} + +<===> +================================================================================ +<===> var/arg_4/input.scss +a {b: hsl(1, 2%, 3%, var(--foo))} + +<===> var/arg_4/output.css +a { + b: hsl(1, 2%, 3%, var(--foo)); } + +<===> +================================================================================ +<===> env/arg_1/input.scss +a {b: hsl(env(--foo), 2%, 3%, 0.4)} + +<===> env/arg_1/output.css +a { + b: hsl(env(--foo), 2%, 3%, 0.4); +} + +<===> +================================================================================ +<===> env/arg_2/input.scss +a {b: hsl(1, env(--foo), 3%, 0.4)} + +<===> env/arg_2/output.css +a { + b: hsl(1, env(--foo), 3%, 0.4); +} + +<===> +================================================================================ +<===> env/arg_3/input.scss +a {b: hsl(1, 2%, env(--foo), 0.4)} + +<===> env/arg_3/output.css +a { + b: hsl(1, 2%, env(--foo), 0.4); +} + +<===> +================================================================================ +<===> env/arg_4/input.scss +a {b: hsl(1, 2%, 3%, env(--foo))} + +<===> env/arg_4/output.css +a { + b: hsl(1, 2%, 3%, env(--foo)); +} + +<===> +================================================================================ +<===> min/arg_1/input.scss +a {b: hsl(min(1), 2%, 3%, 0.4)} + +<===> min/arg_1/output.css +a { + b: hsl(min(1), 2%, 3%, 0.4); +} + +<===> +================================================================================ +<===> min/arg_2/input.scss +a {b: hsl(1, min(2%), 3%, 0.4)} + +<===> min/arg_2/output.css +a { + b: hsl(1, min(2%), 3%, 0.4); +} + +<===> +================================================================================ +<===> min/arg_3/input.scss +a {b: hsl(1, 2%, min(3%), 0.4)} + +<===> min/arg_3/output.css +a { + b: hsl(1, 2%, min(3%), 0.4); +} + +<===> +================================================================================ +<===> min/arg_4/input.scss +a {b: hsl(1, 2%, 3%, min(0.4))} + +<===> min/arg_4/output.css +a { + b: hsl(1, 2%, 3%, min(0.4)); +} + +<===> +================================================================================ +<===> max/arg_1/input.scss +a {b: hsl(max(1), 2%, 3%, 0.4)} + +<===> max/arg_1/output.css +a { + b: hsl(max(1), 2%, 3%, 0.4); +} + +<===> +================================================================================ +<===> max/arg_2/input.scss +a {b: hsl(1, max(2%), 3%, 0.4)} + +<===> max/arg_2/output.css +a { + b: hsl(1, max(2%), 3%, 0.4); +} + +<===> +================================================================================ +<===> max/arg_3/input.scss +a {b: hsl(1, 2%, max(3%), 0.4)} + +<===> max/arg_3/output.css +a { + b: hsl(1, 2%, max(3%), 0.4); +} + +<===> +================================================================================ +<===> max/arg_4/input.scss +a {b: hsl(1, 2%, 3%, max(0.4))} + +<===> max/arg_4/output.css +a { + b: hsl(1, 2%, 3%, max(0.4)); +} + diff --git a/spec/core_functions/color/hsl/multi_argument_var.hrx b/spec/core_functions/color/hsl/multi_argument_var.hrx index 06d7d74e8b..794c084f05 100644 --- a/spec/core_functions/color/hsl/multi_argument_var.hrx +++ b/spec/core_functions/color/hsl/multi_argument_var.hrx @@ -3,23 +3,63 @@ :todo: - libsass -<===> input.scss +<===> +================================================================================ +<===> 1_of_3/input.scss +// var() is substituted before parsing, so it may contain multiple arguments. +a {b: hsl(var(--foo), 3%, 0.4)} + +<===> 1_of_3/output.css a { - // var() is substituted before parsing, so it may contain multiple arguments. b: hsl(var(--foo), 3%, 0.4); - b: hsl(1, var(--foo), 0.4); - b: hsl(1, 2%, var(--foo)); - b: hsl(var(--foo), 0.4); - b: hsl(1, var(--foo)); - b: hsl(var(--foo)); } -<===> output.css +<===> +================================================================================ +<===> 2_of_3/input.scss +a {b: hsl(1, var(--foo), 0.4)} + +<===> 2_of_3/output.css a { - b: hsl(var(--foo), 3%, 0.4); b: hsl(1, var(--foo), 0.4); +} + +<===> +================================================================================ +<===> 3_of_3/input.scss +a {b: hsl(1, 2%, var(--foo))} + +<===> 3_of_3/output.css +a { b: hsl(1, 2%, var(--foo)); +} + +<===> +================================================================================ +<===> 1_of_2/input.scss +a {b: hsl(var(--foo), 0.4)} + +<===> 1_of_2/output.css +a { b: hsl(var(--foo), 0.4); +} + +<===> +================================================================================ +<===> 2_of_2/input.scss +a {b: hsl(1, var(--foo))} + +<===> 2_of_2/output.css +a { b: hsl(1, var(--foo)); +} + +<===> +================================================================================ +<===> 1_of_1/input.scss +a {b: hsl(var(--foo))} + +<===> 1_of_1/output.css +a { b: hsl(var(--foo)); } diff --git a/spec/core_functions/color/hsl/one_arg/alpha.hrx b/spec/core_functions/color/hsl/one_arg/alpha.hrx index 9a77b93fa6..f477e41eea 100644 --- a/spec/core_functions/color/hsl/one_arg/alpha.hrx +++ b/spec/core_functions/color/hsl/one_arg/alpha.hrx @@ -1,33 +1,89 @@ -<===> input.scss -basic { - transparent: hsl(180 60% 50% / 0); - opaque: hsl(180 60% 50% / 1); - partial: hsl(180 60% 50% / 0.5); - named: hsl($channels: 180 60% 50% / 0.4); +<===> in_gamut/transparent/input.scss +a {b: hsl(180 60% 50% / 0)} - // Extra parens shouldn't cause the slash to be forced into division. - parenthesized: (hsl(180 60% 50% / 0.4)); +<===> in_gamut/transparent/output.css +a { + b: rgba(51, 204, 204, 0); } -clamped { - saturation: hsl(0 -0.1% 50% / 0.5); - lightness: hsl(0 100% 9999% / 0.5); - alpha-above: hsl(0 100% 50% / 1.1); - alpha-below: hsl(0 100% 50% / -0.1); +<===> +================================================================================ +<===> in_gamut/opaque/input.scss +a {b: hsl(180 60% 50% / 1)} + +<===> in_gamut/opaque/output.css +a { + b: #33cccc; +} + +<===> +================================================================================ +<===> in_gamut/partial/input.scss +a {b: hsl(180 60% 50% / 0.5)} + +<===> in_gamut/partial/output.css +a { + b: rgba(51, 204, 204, 0.5); +} + +<===> +================================================================================ +<===> in_gamut/named/input.scss +a {b: hsl($channels: 180 60% 50% / 0.4)} + +<===> in_gamut/named/output.css +a { + b: rgba(51, 204, 204, 0.4); } -<===> output.css -basic { - transparent: rgba(51, 204, 204, 0); - opaque: #33cccc; - partial: rgba(51, 204, 204, 0.5); - named: rgba(51, 204, 204, 0.4); - parenthesized: rgba(51, 204, 204, 0.4); +<===> +================================================================================ +<===> in_gamut/parenthesized/input.scss +// Extra parens shouldn't cause the slash to be forced into division. +a {b: (hsl(180 60% 50% / 0.4))} + +<===> in_gamut/parenthesized/output.css +a { + b: rgba(51, 204, 204, 0.4); } -clamped { - saturation: rgba(128, 128, 128, 0.5); - lightness: rgba(255, 255, 255, 0.5); - alpha-above: red; - alpha-below: rgba(255, 0, 0, 0); +<===> +================================================================================ +<===> clamped/saturation/input.scss +a {b: hsl(0 -0.1% 50% / 0.5)} + +<===> clamped/saturation/output.css +a { + b: rgba(128, 128, 128, 0.5); } + +<===> +================================================================================ +<===> clamped/lightness/input.scss +a {b: hsl(0 100% 9999% / 0.5)} + +<===> clamped/lightness/output.css +a { + b: rgba(255, 255, 255, 0.5); +} + +<===> +================================================================================ +<===> clamped/alpha/above/input.scss +a {b: hsl(0 100% 50% / 1.1)} + +<===> clamped/alpha/above/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> clamped/alpha/below/input.scss +a {b: hsl(0 100% 50% / -0.1)} + +<===> clamped/alpha/below/output.css +a { + b: rgba(255, 0, 0, 0); +} + diff --git a/spec/core_functions/color/hsl/one_arg/basic.hrx b/spec/core_functions/color/hsl/one_arg/basic.hrx deleted file mode 100644 index 8397aecf78..0000000000 --- a/spec/core_functions/color/hsl/one_arg/basic.hrx +++ /dev/null @@ -1,48 +0,0 @@ -<===> input.scss -basic { - red: hsl(0 100% 50%); - blue: hsl(240 100% 50%); - grayish-yellow: hsl(60 60% 50%); -} - -clamped { - saturation-above: hsl(0 500% 50%); - saturation-below: hsl(0 -100% 50%); - lightness-above: hsl(0 100% 500%); - lightness-below: hsl(0 100% -100%); -} - -units { - hue-deg: hsl(0deg 100% 50%); - saturation-unitless: hsl(0 50 50%); - lightness-unitless: hsl(0 100% 50); -} - -named { - x: hsl($channels: 0 100% 50%); -} - -<===> output.css -basic { - red: red; - blue: blue; - grayish-yellow: #cccc33; -} - - -clamped { - saturation-above: red; - saturation-below: gray; - lightness-above: white; - lightness-below: black; -} - -units { - hue-deg: red; - saturation-unitless: #bf4040; - lightness-unitless: red; -} - -named { - x: red; -} diff --git a/spec/core_functions/color/hsl/one_arg/no_alpha.hrx b/spec/core_functions/color/hsl/one_arg/no_alpha.hrx new file mode 100644 index 0000000000..2eb1d44c65 --- /dev/null +++ b/spec/core_functions/color/hsl/one_arg/no_alpha.hrx @@ -0,0 +1,108 @@ +<===> in_gamut/red/input.scss +a {b: hsl(0 100% 50%)} + +<===> in_gamut/red/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> in_gamut/blue/input.scss +a {b: hsl(240 100% 50%)} + +<===> in_gamut/blue/output.css +a { + b: blue; +} + +<===> +================================================================================ +<===> in_gamut/grayish/yellow/input.scss +a {b: hsl(60 60% 50%)} + +<===> in_gamut/grayish/yellow/output.css +a { + b: #cccc33; +} + +<===> +================================================================================ +<===> clamped/saturation/above/input.scss +a {b: hsl(0 500% 50%)} + +<===> clamped/saturation/above/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> clamped/saturation/below/input.scss +a {b: hsl(0 -100% 50%)} + +<===> clamped/saturation/below/output.css +a { + b: gray; +} + +<===> +================================================================================ +<===> clamped/lightness/above/input.scss +a {b: hsl(0 100% 500%)} + +<===> clamped/lightness/above/output.css +a { + b: white; +} + +<===> +================================================================================ +<===> clamped/lightness/below/input.scss +a {b: hsl(0 100% -100%)} + +<===> clamped/lightness/below/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> units/hue/deg/input.scss +a {b: hsl(0deg 100% 50%)} + +<===> units/hue/deg/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> units/saturation/unitless/input.scss +a {b: hsl(0 50 50%)} + +<===> units/saturation/unitless/output.css +a { + b: #bf4040; +} + +<===> +================================================================================ +<===> units/lightness/unitless/input.scss +a {b: hsl(0 100% 50)} + +<===> units/lightness/unitless/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> named/input.scss +a {b: hsl($channels: 0 100% 50%)} + +<===> named/output.css +a { + b: red; +} + diff --git a/spec/core_functions/color/hsl/one_arg/special_functions.hrx b/spec/core_functions/color/hsl/one_arg/special_functions.hrx index 965bff7b8b..c7925ad95b 100644 --- a/spec/core_functions/color/hsl/one_arg/special_functions.hrx +++ b/spec/core_functions/color/hsl/one_arg/special_functions.hrx @@ -4,110 +4,414 @@ - sass/libsass#2726 :ignore_for: -<===> input.scss -no-alpha { - calc-1: hsl(calc(1) 2% 3%); - calc-2: hsl(1 calc(2%) 3%); - calc-3: hsl(1 2% calc(3%)); - - var-1: hsl(var(--foo) 2% 3%); - var-2: hsl(1 var(--foo) 3%); - var-3: hsl(1 2% var(--foo)); - - env-1: hsl(env(--foo) 2% 3%); - env-2: hsl(1 env(--foo) 3%); - env-3: hsl(1 2% env(--foo)); - - min-1: hsl(min(1) 2% 3%); - min-2: hsl(1 min(2%) 3%); - min-3: hsl(1 2% min(3%)); - - max-1: hsl(max(1) 2% 3%); - max-2: hsl(1 max(2%) 3%); - max-3: hsl(1 2% max(3%)); - - // var() is substituted before parsing, so it may contain multiple arguments. - multi-argument-var-1-of-2: hsl(var(--foo) 50%); - multi-argument-var-2-of-2: hsl(0 var(--foo)); - multi-argument-var-1-of-1: hsl(var(--foo)); -} - -alpha { - calc-1: hsl(calc(1) 2% 3% / 0.4); - calc-2: hsl(1 calc(2%) 3% / 0.4); - calc-3: hsl(1 2% calc(3%) / 0.4); - calc-4: hsl(1 2% 3% / calc(0.4)); - - var-1: hsl(var(--foo) 2% 3% / 0.4); - var-2: hsl(1 var(--foo) 3% / 0.4); - var-3: hsl(1 2% var(--foo) / 0.4); - var-4: hsl(1 2% 3% / var(--foo)); - - env-1: hsl(env(--foo) 2% 3% / 0.4); - env-2: hsl(1 env(--foo) 3% / 0.4); - env-3: hsl(1 2% env(--foo) / 0.4); - env-4: hsl(1 2% 3% / env(--foo)); - - min-1: hsl(min(1) 2% 3% / 0.4); - min-2: hsl(1 min(2%) 3% / 0.4); - min-3: hsl(1 2% min(3%) / 0.4); - min-4: hsl(1 2% 3% / min(0.4)); - - max-1: hsl(max(1) 2% 3% / 0.4); - max-2: hsl(1 max(2%) 3% / 0.4); - max-3: hsl(1 2% max(3%) / 0.4); - max-4: hsl(1 2% 3% / max(0.4)); - - // var() is substituted before parsing, so it may contain multiple arguments. - multi-argument-var-1-of-2: hsl(var(--foo) 50% / 0.4); - multi-argument-var-2-of-2: hsl(0 var(--foo) / 0.4); - multi-argument-var-1-of-1: hsl(var(--foo) / 0.4); -} - -<===> output.css -no-alpha { - calc-1: hsl(calc(1), 2%, 3%); - calc-2: hsl(1, calc(2%), 3%); - calc-3: hsl(1, 2%, calc(3%)); - var-1: hsl(var(--foo), 2%, 3%); - var-2: hsl(1, var(--foo), 3%); - var-3: hsl(1, 2%, var(--foo)); - env-1: hsl(env(--foo), 2%, 3%); - env-2: hsl(1, env(--foo), 3%); - env-3: hsl(1, 2%, env(--foo)); - min-1: hsl(min(1), 2%, 3%); - min-2: hsl(1, min(2%), 3%); - min-3: hsl(1, 2%, min(3%)); - max-1: hsl(max(1), 2%, 3%); - max-2: hsl(1, max(2%), 3%); - max-3: hsl(1, 2%, max(3%)); - multi-argument-var-1-of-2: hsl(var(--foo) 50%); - multi-argument-var-2-of-2: hsl(0 var(--foo)); - multi-argument-var-1-of-1: hsl(var(--foo)); -} - -alpha { - calc-1: hsl(calc(1), 2%, 3%, 0.4); - calc-2: hsl(1, calc(2%), 3%, 0.4); - calc-3: hsl(1 2% calc(3%)/0.4); - calc-4: hsl(1 2% 3%/calc(0.4)); - var-1: hsl(var(--foo), 2%, 3%, 0.4); - var-2: hsl(1, var(--foo), 3%, 0.4); - var-3: hsl(1 2% var(--foo)/0.4); - var-4: hsl(1 2% 3%/var(--foo)); - env-1: hsl(env(--foo), 2%, 3%, 0.4); - env-2: hsl(1, env(--foo), 3%, 0.4); - env-3: hsl(1 2% env(--foo)/0.4); - env-4: hsl(1 2% 3%/env(--foo)); - min-1: hsl(min(1), 2%, 3%, 0.4); - min-2: hsl(1, min(2%), 3%, 0.4); - min-3: hsl(1 2% min(3%)/0.4); - min-4: hsl(1 2% 3%/min(0.4)); - max-1: hsl(max(1), 2%, 3%, 0.4); - max-2: hsl(1, max(2%), 3%, 0.4); - max-3: hsl(1 2% max(3%)/0.4); - max-4: hsl(1 2% 3%/max(0.4)); - multi-argument-var-1-of-2: hsl(var(--foo) 50%/0.4); - multi-argument-var-2-of-2: hsl(0 var(--foo)/0.4); - multi-argument-var-1-of-1: hsl(var(--foo)/0.4); +<===> +================================================================================ +<===> no_alpha/calc/arg_1/input.scss +a {b: hsl(calc(1) 2% 3%)} + +<===> no_alpha/calc/arg_1/output.css +a { + b: hsl(calc(1), 2%, 3%); +} + +<===> +================================================================================ +<===> no_alpha/calc/arg_2/input.scss +a {b: hsl(1 calc(2%) 3%)} + +<===> no_alpha/calc/arg_2/output.css +a { + b: hsl(1, calc(2%), 3%); +} + +<===> +================================================================================ +<===> no_alpha/calc/arg_3/input.scss +a {b: hsl(1 2% calc(3%))} + +<===> no_alpha/calc/arg_3/output.css +a { + b: hsl(1, 2%, calc(3%)); +} + +<===> +================================================================================ +<===> no_alpha/var/arg_1/input.scss +a {b: hsl(var(--foo) 2% 3%)} + +<===> no_alpha/var/arg_1/output.css +a { + b: hsl(var(--foo), 2%, 3%); +} + +<===> +================================================================================ +<===> no_alpha/var/arg_2/input.scss +a {b: hsl(1 var(--foo) 3%)} + +<===> no_alpha/var/arg_2/output.css +a { + b: hsl(1, var(--foo), 3%); +} + +<===> +================================================================================ +<===> no_alpha/var/arg_3/input.scss +a {b: hsl(1 2% var(--foo))} + +<===> no_alpha/var/arg_3/output.css +a { + b: hsl(1, 2%, var(--foo)); +} + +<===> +================================================================================ +<===> no_alpha/env/arg_1/input.scss +a {b: hsl(env(--foo) 2% 3%)} + +<===> no_alpha/env/arg_1/output.css +a { + b: hsl(env(--foo), 2%, 3%); +} + +<===> +================================================================================ +<===> no_alpha/env/arg_2/input.scss +a {b: hsl(1 env(--foo) 3%)} + +<===> no_alpha/env/arg_2/output.css +a { + b: hsl(1, env(--foo), 3%); +} + +<===> +================================================================================ +<===> no_alpha/env/arg_3/input.scss +a {b: hsl(1 2% env(--foo))} + +<===> no_alpha/env/arg_3/output.css +a { + b: hsl(1, 2%, env(--foo)); +} + +<===> +================================================================================ +<===> no_alpha/min/arg_1/input.scss +a {b: hsl(min(1) 2% 3%)} + +<===> no_alpha/min/arg_1/output.css +a { + b: hsl(min(1), 2%, 3%); +} + +<===> +================================================================================ +<===> no_alpha/min/arg_2/input.scss +a {b: hsl(1 min(2%) 3%)} + +<===> no_alpha/min/arg_2/output.css +a { + b: hsl(1, min(2%), 3%); +} + +<===> +================================================================================ +<===> no_alpha/min/arg_3/input.scss +a {b: hsl(1 2% min(3%))} + +<===> no_alpha/min/arg_3/output.css +a { + b: hsl(1, 2%, min(3%)); +} + +<===> +================================================================================ +<===> no_alpha/max/arg_1/input.scss +a {b: hsl(max(1) 2% 3%)} + +<===> no_alpha/max/arg_1/output.css +a { + b: hsl(max(1), 2%, 3%); +} + +<===> +================================================================================ +<===> no_alpha/max/arg_2/input.scss +a {b: hsl(1 max(2%) 3%)} + +<===> no_alpha/max/arg_2/output.css +a { + b: hsl(1, max(2%), 3%); +} + +<===> +================================================================================ +<===> no_alpha/max/arg_3/input.scss +a {b: hsl(1 2% max(3%))} + +<===> no_alpha/max/arg_3/output.css +a { + b: hsl(1, 2%, max(3%)); +} + +<===> +================================================================================ +<===> no_alpha/multi/argument/var/arg_1/of/arg_2/input.scss +// var() is substituted before parsing, so it may contain multiple arguments. +a {b: hsl(var(--foo) 50%)} + +<===> no_alpha/multi/argument/var/arg_1/of/arg_2/output.css +a { + b: hsl(var(--foo) 50%); +} + +<===> +================================================================================ +<===> no_alpha/multi/argument/var/arg_2/of/arg_2/input.scss +a {b: hsl(0 var(--foo))} + +<===> no_alpha/multi/argument/var/arg_2/of/arg_2/output.css +a { + b: hsl(0 var(--foo)); +} + +<===> +================================================================================ +<===> no_alpha/multi/argument/var/arg_1/of/arg_1/input.scss +a {b: hsl(var(--foo))} + +<===> no_alpha/multi/argument/var/arg_1/of/arg_1/output.css +a { + b: hsl(var(--foo)); +} + +<===> +================================================================================ +<===> alpha/calc/arg_1/input.scss +a {b: hsl(calc(1) 2% 3% / 0.4)} + +<===> alpha/calc/arg_1/output.css +a { + b: hsl(calc(1), 2%, 3%, 0.4); +} + +<===> +================================================================================ +<===> alpha/calc/arg_2/input.scss +a {b: hsl(1 calc(2%) 3% / 0.4)} + +<===> alpha/calc/arg_2/output.css +a { + b: hsl(1, calc(2%), 3%, 0.4); +} + +<===> +================================================================================ +<===> alpha/calc/arg_3/input.scss +a {b: hsl(1 2% calc(3%) / 0.4)} + +<===> alpha/calc/arg_3/output.css +a { + b: hsl(1 2% calc(3%)/0.4); +} + +<===> +================================================================================ +<===> alpha/calc/arg_4/input.scss +a {b: hsl(1 2% 3% / calc(0.4))} + +<===> alpha/calc/arg_4/output.css +a { + b: hsl(1 2% 3%/calc(0.4)); +} + +<===> +================================================================================ +<===> alpha/var/arg_1/input.scss +a {b: hsl(var(--foo) 2% 3% / 0.4)} + +<===> alpha/var/arg_1/output.css +a { + b: hsl(var(--foo), 2%, 3%, 0.4); +} + +<===> +================================================================================ +<===> alpha/var/arg_2/input.scss +a {b: hsl(1 var(--foo) 3% / 0.4)} + +<===> alpha/var/arg_2/output.css +a { + b: hsl(1, var(--foo), 3%, 0.4); +} + +<===> +================================================================================ +<===> alpha/var/arg_3/input.scss +a {b: hsl(1 2% var(--foo) / 0.4)} + +<===> alpha/var/arg_3/output.css +a { + b: hsl(1 2% var(--foo)/0.4); +} + +<===> +================================================================================ +<===> alpha/var/arg_4/input.scss +a {b: hsl(1 2% 3% / var(--foo))} + +<===> alpha/var/arg_4/output.css +a { + b: hsl(1 2% 3%/var(--foo)); +} + +<===> +================================================================================ +<===> alpha/env/arg_1/input.scss +a {b: hsl(env(--foo) 2% 3% / 0.4)} + +<===> alpha/env/arg_1/output.css +a { + b: hsl(env(--foo), 2%, 3%, 0.4); +} + +<===> +================================================================================ +<===> alpha/env/arg_2/input.scss +a {b: hsl(1 env(--foo) 3% / 0.4)} + +<===> alpha/env/arg_2/output.css +a { + b: hsl(1, env(--foo), 3%, 0.4); +} + +<===> +================================================================================ +<===> alpha/env/arg_3/input.scss +a {b: hsl(1 2% env(--foo) / 0.4)} + +<===> alpha/env/arg_3/output.css +a { + b: hsl(1 2% env(--foo)/0.4); +} + +<===> +================================================================================ +<===> alpha/env/arg_4/input.scss +a {b: hsl(1 2% 3% / env(--foo))} + +<===> alpha/env/arg_4/output.css +a { + b: hsl(1 2% 3%/env(--foo)); +} + +<===> +================================================================================ +<===> alpha/min/arg_1/input.scss +a {b: hsl(min(1) 2% 3% / 0.4)} + +<===> alpha/min/arg_1/output.css +a { + b: hsl(min(1), 2%, 3%, 0.4); +} + +<===> +================================================================================ +<===> alpha/min/arg_2/input.scss +a {b: hsl(1 min(2%) 3% / 0.4)} + +<===> alpha/min/arg_2/output.css +a { + b: hsl(1, min(2%), 3%, 0.4); +} + +<===> +================================================================================ +<===> alpha/min/arg_3/input.scss +a {b: hsl(1 2% min(3%) / 0.4)} + +<===> alpha/min/arg_3/output.css +a { + b: hsl(1 2% min(3%)/0.4); +} + +<===> +================================================================================ +<===> alpha/min/arg_4/input.scss +a {b: hsl(1 2% 3% / min(0.4))} + +<===> alpha/min/arg_4/output.css +a { + b: hsl(1 2% 3%/min(0.4)); +} + +<===> +================================================================================ +<===> alpha/max/arg_1/input.scss +a {b: hsl(max(1) 2% 3% / 0.4)} + +<===> alpha/max/arg_1/output.css +a { + b: hsl(max(1), 2%, 3%, 0.4); +} + +<===> +================================================================================ +<===> alpha/max/arg_2/input.scss +a {b: hsl(1 max(2%) 3% / 0.4)} + +<===> alpha/max/arg_2/output.css +a { + b: hsl(1, max(2%), 3%, 0.4); +} + +<===> +================================================================================ +<===> alpha/max/arg_3/input.scss +a {b: hsl(1 2% max(3%) / 0.4)} + +<===> alpha/max/arg_3/output.css +a { + b: hsl(1 2% max(3%)/0.4); +} + +<===> +================================================================================ +<===> alpha/max/arg_4/input.scss +a {b: hsl(1 2% 3% / max(0.4))} + +<===> alpha/max/arg_4/output.css +a { + b: hsl(1 2% 3%/max(0.4)); +} + +<===> +================================================================================ +<===> alpha/multi_argument_var/1_of_2/input.scss +// var() is substituted before parsing, so it may contain multiple arguments. +a {b: hsl(var(--foo) 50% / 0.4)} + +<===> alpha/multi_argument_var/1_of_2/output.css +a { + b: hsl(var(--foo) 50%/0.4); +} + +<===> +================================================================================ +<===> alpha/multi_argument_var/2_of_2/input.scss +a {b: hsl(0 var(--foo) / 0.4)} + +<===> alpha/multi_argument_var/2_of_2/output.css +a { + b: hsl(0 var(--foo)/0.4); +} + +<===> +================================================================================ +<===> alpha/multi_argument_var/1_of_1/input.scss +a {b: hsl(var(--foo) / 0.4)} + +<===> alpha/multi_argument_var/1_of_1/output.css +a { + b: hsl(var(--foo)/0.4); } diff --git a/spec/core_functions/color/hsl/three_args/basic.hrx b/spec/core_functions/color/hsl/three_args/basic.hrx deleted file mode 100644 index e2bc407ec3..0000000000 --- a/spec/core_functions/color/hsl/three_args/basic.hrx +++ /dev/null @@ -1,635 +0,0 @@ -<===> input.scss -// These test cases come from two official W3C test suites: -// -// * https://www.w3.org/Style/CSS/Test/CSS3/Color/20070927/html4/t040204-hsl-h-rotating-b.htm -// * https://www.w3.org/Style/CSS/Test/CSS3/Color/current/html4/t040204-hsl-values-b.htm - -hue { - @mixin test-hues($name, $hues...) { - #{$name} { - @each $hue in $hues { - hue-#{$hue}: hsl($hue, 100%, 50%); - } - } - } - - @include test-hues("red", 0, -360, 260, 6120); - @include test-hues("yellow", 60, -300, 420, -9660); - @include test-hues("green", 120, -240, 480, 99840); - @include test-hues("cyan", 180, -180, 540, -900); - @include test-hues("blue", 240, -120, 600, -104880); - @include test-hues("purple", 300, -60, 660, 2820); -} - -red-to-green { - step-1: hsl(0, 100%, 50%); - step-2: hsl(12, 100%, 50%); - step-3: hsl(24, 100%, 50%); - step-4: hsl(36, 100%, 50%); - step-5: hsl(48, 100%, 50%); - step-6: hsl(60, 100%, 50%); - step-7: hsl(72, 100%, 50%); - step-8: hsl(84, 100%, 50%); - step-9: hsl(96, 100%, 50%); - step-10: hsl(108, 100%, 50%); - step-11: hsl(120, 100%, 50%); -} - -green-to-blue { - step-1: hsl(120, 100%, 50%); - step-2: hsl(132, 100%, 50%); - step-3: hsl(144, 100%, 50%); - step-4: hsl(156, 100%, 50%); - step-5: hsl(168, 100%, 50%); - step-6: hsl(180, 100%, 50%); - step-7: hsl(192, 100%, 50%); - step-8: hsl(204, 100%, 50%); - step-9: hsl(216, 100%, 50%); - step-10: hsl(228, 100%, 50%); - step-11: hsl(240, 100%, 50%); -} - -blue-to-red { - step-1: hsl(240, 100%, 50%); - step-2: hsl(252, 100%, 50%); - step-3: hsl(264, 100%, 50%); - step-4: hsl(276, 100%, 50%); - step-5: hsl(288, 100%, 50%); - step-6: hsl(300, 100%, 50%); - step-7: hsl(312, 100%, 50%); - step-8: hsl(324, 100%, 50%); - step-9: hsl(336, 100%, 50%); - step-10: hsl(348, 100%, 50%); - step-11: hsl(360, 100%, 50%); -} - -gray-to { - red { - step-1: hsl(0, 20%, 50%); - step-2: hsl(0, 60%, 50%); - step-3: hsl(0, 100%, 50%); - } - - yellow { - step-1: hsl(60, 20%, 50%); - step-2: hsl(60, 60%, 50%); - step-3: hsl(60, 100%, 50%); - } - - green { - step-1: hsl(120, 20%, 50%); - step-2: hsl(120, 60%, 50%); - step-3: hsl(120, 100%, 50%); - } - - cyan { - step-1: hsl(180, 20%, 50%); - step-2: hsl(180, 60%, 50%); - step-3: hsl(180, 100%, 50%); - } - - blue { - step-1: hsl(240, 20%, 50%); - step-2: hsl(240, 60%, 50%); - step-3: hsl(240, 100%, 50%); - } - - purple { - step-1: hsl(300, 20%, 50%); - step-2: hsl(300, 60%, 50%); - step-3: hsl(300, 100%, 50%); - } -} - -black-to-white-through { - red { - step-1: hsl(0, 100%, 0%); - step-2: hsl(0, 100%, 10%); - step-3: hsl(0, 100%, 20%); - step-4: hsl(0, 100%, 30%); - step-5: hsl(0, 100%, 40%); - step-6: hsl(0, 100%, 50%); - step-7: hsl(0, 100%, 60%); - step-8: hsl(0, 100%, 70%); - step-9: hsl(0, 100%, 80%); - step-10: hsl(0, 100%, 90%); - step-11: hsl(0, 100%, 100%); - } - - yellow { - step-1: hsl(60, 100%, 0%); - step-2: hsl(60, 100%, 10%); - step-3: hsl(60, 100%, 20%); - step-4: hsl(60, 100%, 30%); - step-5: hsl(60, 100%, 40%); - step-6: hsl(60, 100%, 50%); - step-7: hsl(60, 100%, 60%); - step-8: hsl(60, 100%, 70%); - step-9: hsl(60, 100%, 80%); - step-10: hsl(60, 100%, 90%); - step-11: hsl(60, 100%, 100%); - } - - green { - step-1: hsl(120, 100%, 0%); - step-2: hsl(120, 100%, 10%); - step-3: hsl(120, 100%, 20%); - step-4: hsl(120, 100%, 30%); - step-5: hsl(120, 100%, 40%); - step-6: hsl(120, 100%, 50%); - step-7: hsl(120, 100%, 60%); - step-8: hsl(120, 100%, 70%); - step-9: hsl(120, 100%, 80%); - step-10: hsl(120, 100%, 90%); - step-11: hsl(120, 100%, 100%); - } - - cyan { - step-1: hsl(180, 100%, 0%); - step-2: hsl(180, 100%, 10%); - step-3: hsl(180, 100%, 20%); - step-4: hsl(180, 100%, 30%); - step-5: hsl(180, 100%, 40%); - step-6: hsl(180, 100%, 50%); - step-7: hsl(180, 100%, 60%); - step-8: hsl(180, 100%, 70%); - step-9: hsl(180, 100%, 80%); - step-10: hsl(180, 100%, 90%); - step-11: hsl(180, 100%, 100%); - } - - blue { - step-1: hsl(240, 100%, 0%); - step-2: hsl(240, 100%, 10%); - step-3: hsl(240, 100%, 20%); - step-4: hsl(240, 100%, 30%); - step-5: hsl(240, 100%, 40%); - step-6: hsl(240, 100%, 50%); - step-7: hsl(240, 100%, 60%); - step-8: hsl(240, 100%, 70%); - step-9: hsl(240, 100%, 80%); - step-10: hsl(240, 100%, 90%); - step-11: hsl(240, 100%, 100%); - } - - purple { - step-1: hsl(300, 100%, 0%); - step-2: hsl(300, 100%, 10%); - step-3: hsl(300, 100%, 20%); - step-4: hsl(300, 100%, 30%); - step-5: hsl(300, 100%, 40%); - step-6: hsl(300, 100%, 50%); - step-7: hsl(300, 100%, 60%); - step-8: hsl(300, 100%, 70%); - step-9: hsl(300, 100%, 80%); - step-10: hsl(300, 100%, 90%); - step-11: hsl(300, 100%, 100%); - } -} - -// The W3C tests cover clamped hue, but not clamped saturation or lightness. -clamped { - saturation-above: hsl(0, 500%, 50%); - saturation-below: hsl(0, -100%, 50%); - lightness-above: hsl(0, 100%, 500%); - lightness-below: hsl(0, 100%, -100%); -} - -units { - hue-deg: hsl(0deg, 100%, 50%); - saturation-unitless: hsl(0, 50, 50%); - lightness-unitless: hsl(0, 100%, 50); -} - -named { - x: hsl($hue: 0, $saturation: 100%, $lightness: 50%); -} - -<===> output.css -hue red { - hue-0: red; - hue--360: red; - hue-260: #5500ff; - hue-6120: red; -} -hue yellow { - hue-60: yellow; - hue--300: yellow; - hue-420: yellow; - hue--9660: yellow; -} -hue green { - hue-120: lime; - hue--240: lime; - hue-480: lime; - hue-99840: lime; -} -hue cyan { - hue-180: aqua; - hue--180: aqua; - hue-540: aqua; - hue--900: aqua; -} -hue blue { - hue-240: blue; - hue--120: blue; - hue-600: blue; - hue--104880: blue; -} -hue purple { - hue-300: fuchsia; - hue--60: fuchsia; - hue-660: fuchsia; - hue-2820: fuchsia; -} - -red-to-green { - step-1: red; - step-2: #ff3300; - step-3: #ff6600; - step-4: #ff9900; - step-5: #ffcc00; - step-6: yellow; - step-7: #ccff00; - step-8: #99ff00; - step-9: #66ff00; - step-10: #33ff00; - step-11: lime; -} - -green-to-blue { - step-1: lime; - step-2: #00ff33; - step-3: #00ff66; - step-4: #00ff99; - step-5: #00ffcc; - step-6: aqua; - step-7: #00ccff; - step-8: #0099ff; - step-9: #0066ff; - step-10: #0033ff; - step-11: blue; -} - -blue-to-red { - step-1: blue; - step-2: #3300ff; - step-3: #6600ff; - step-4: #9900ff; - step-5: #cc00ff; - step-6: fuchsia; - step-7: #ff00cc; - step-8: #ff0099; - step-9: #ff0066; - step-10: #ff0033; - step-11: red; -} - -gray-to red { - step-1: #996666; - step-2: #cc3333; - step-3: red; -} -gray-to yellow { - step-1: #999966; - step-2: #cccc33; - step-3: yellow; -} -gray-to green { - step-1: #669966; - step-2: #33cc33; - step-3: lime; -} -gray-to cyan { - step-1: #669999; - step-2: #33cccc; - step-3: aqua; -} -gray-to blue { - step-1: #666699; - step-2: #3333cc; - step-3: blue; -} -gray-to purple { - step-1: #996699; - step-2: #cc33cc; - step-3: fuchsia; -} - -black-to-white-through red { - step-1: black; - step-2: #330000; - step-3: #660000; - step-4: #990000; - step-5: #cc0000; - step-6: red; - step-7: #ff3333; - step-8: #ff6666; - step-9: #ff9999; - step-10: #ffcccc; - step-11: white; -} -black-to-white-through yellow { - step-1: black; - step-2: #333300; - step-3: #666600; - step-4: #999900; - step-5: #cccc00; - step-6: yellow; - step-7: #ffff33; - step-8: #ffff66; - step-9: #ffff99; - step-10: #ffffcc; - step-11: white; -} -black-to-white-through green { - step-1: black; - step-2: #003300; - step-3: #006600; - step-4: #009900; - step-5: #00cc00; - step-6: lime; - step-7: #33ff33; - step-8: #66ff66; - step-9: #99ff99; - step-10: #ccffcc; - step-11: white; -} -black-to-white-through cyan { - step-1: black; - step-2: #003333; - step-3: #006666; - step-4: #009999; - step-5: #00cccc; - step-6: aqua; - step-7: #33ffff; - step-8: #66ffff; - step-9: #99ffff; - step-10: #ccffff; - step-11: white; -} -black-to-white-through blue { - step-1: black; - step-2: #000033; - step-3: #000066; - step-4: #000099; - step-5: #0000cc; - step-6: blue; - step-7: #3333ff; - step-8: #6666ff; - step-9: #9999ff; - step-10: #ccccff; - step-11: white; -} -black-to-white-through purple { - step-1: black; - step-2: #330033; - step-3: #660066; - step-4: #990099; - step-5: #cc00cc; - step-6: fuchsia; - step-7: #ff33ff; - step-8: #ff66ff; - step-9: #ff99ff; - step-10: #ffccff; - step-11: white; -} - -clamped { - saturation-above: red; - saturation-below: gray; - lightness-above: white; - lightness-below: black; -} - -units { - hue-deg: red; - saturation-unitless: #bf4040; - lightness-unitless: red; -} - -named { - x: red; -} - -<===> output-libsass.css -hue red { - hue-0: red; - hue--360: red; - hue-260: #5500ff; - hue-6120: red; -} - -hue yellow { - hue-60: yellow; - hue--300: yellow; - hue-420: yellow; - hue--9660: yellow; -} - -hue green { - hue-120: lime; - hue--240: lime; - hue-480: lime; - hue-99840: lime; -} - -hue cyan { - hue-180: cyan; - hue--180: cyan; - hue-540: cyan; - hue--900: cyan; -} - -hue blue { - hue-240: blue; - hue--120: blue; - hue-600: blue; - hue--104880: blue; -} - -hue purple { - hue-300: magenta; - hue--60: magenta; - hue-660: magenta; - hue-2820: magenta; -} - -red-to-green { - step-1: red; - step-2: #ff3300; - step-3: #ff6600; - step-4: #ff9900; - step-5: #ffcc00; - step-6: yellow; - step-7: #ccff00; - step-8: #99ff00; - step-9: #66ff00; - step-10: #33ff00; - step-11: lime; -} - -green-to-blue { - step-1: lime; - step-2: #00ff33; - step-3: #00ff66; - step-4: #00ff99; - step-5: #00ffcc; - step-6: cyan; - step-7: #00ccff; - step-8: #0099ff; - step-9: #0066ff; - step-10: #0033ff; - step-11: blue; -} - -blue-to-red { - step-1: blue; - step-2: #3300ff; - step-3: #6600ff; - step-4: #9900ff; - step-5: #cc00ff; - step-6: magenta; - step-7: #ff00cc; - step-8: #ff0099; - step-9: #ff0066; - step-10: #ff0033; - step-11: red; -} - -gray-to red { - step-1: #996666; - step-2: #cc3333; - step-3: red; -} - -gray-to yellow { - step-1: #999966; - step-2: #cccc33; - step-3: yellow; -} - -gray-to green { - step-1: #669966; - step-2: #33cc33; - step-3: lime; -} - -gray-to cyan { - step-1: #669999; - step-2: #33cccc; - step-3: cyan; -} - -gray-to blue { - step-1: #666699; - step-2: #3333cc; - step-3: blue; -} - -gray-to purple { - step-1: #996699; - step-2: #cc33cc; - step-3: magenta; -} - -black-to-white-through red { - step-1: black; - step-2: #330000; - step-3: #660000; - step-4: #990000; - step-5: #cc0000; - step-6: red; - step-7: #ff3333; - step-8: #ff6666; - step-9: #ff9999; - step-10: #ffcccc; - step-11: white; -} - -black-to-white-through yellow { - step-1: black; - step-2: #333300; - step-3: #666600; - step-4: #999900; - step-5: #cccc00; - step-6: yellow; - step-7: #ffff33; - step-8: #ffff66; - step-9: #ffff99; - step-10: #ffffcc; - step-11: white; -} - -black-to-white-through green { - step-1: black; - step-2: #003300; - step-3: #006600; - step-4: #009900; - step-5: #00cc00; - step-6: lime; - step-7: #33ff33; - step-8: #66ff66; - step-9: #99ff99; - step-10: #ccffcc; - step-11: white; -} - -black-to-white-through cyan { - step-1: black; - step-2: #003333; - step-3: #006666; - step-4: #009999; - step-5: #00cccc; - step-6: cyan; - step-7: #33ffff; - step-8: #66ffff; - step-9: #99ffff; - step-10: #ccffff; - step-11: white; -} - -black-to-white-through blue { - step-1: black; - step-2: #000033; - step-3: #000066; - step-4: #000099; - step-5: #0000cc; - step-6: blue; - step-7: #3333ff; - step-8: #6666ff; - step-9: #9999ff; - step-10: #ccccff; - step-11: white; -} - -black-to-white-through purple { - step-1: black; - step-2: #330033; - step-3: #660066; - step-4: #990099; - step-5: #cc00cc; - step-6: magenta; - step-7: #ff33ff; - step-8: #ff66ff; - step-9: #ff99ff; - step-10: #ffccff; - step-11: white; -} - -clamped { - saturation-above: red; - saturation-below: gray; - lightness-above: white; - lightness-below: black; -} - -units { - hue-deg: red; - saturation-unitless: #bf4040; - lightness-unitless: red; -} - -named { - x: red; -} diff --git a/spec/core_functions/color/hsl/three_args/clamped.hrx b/spec/core_functions/color/hsl/three_args/clamped.hrx new file mode 100644 index 0000000000..0a408bcf84 --- /dev/null +++ b/spec/core_functions/color/hsl/three_args/clamped.hrx @@ -0,0 +1,42 @@ +<===> README.md +The W3C tests cover clamped hue, but not clamped saturation or lightness. + +<===> +================================================================================ +<===> saturation/above/input.scss +a {b: hsl(0, 500%, 50%)} + +<===> saturation/above/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> saturation/below/input.scss +a {b: hsl(0, -100%, 50%)} + +<===> saturation/below/output.css +a { + b: gray; +} + +<===> +================================================================================ +<===> lightness/above/input.scss +a {b: hsl(0, 100%, 500%)} + +<===> lightness/above/output.css +a { + b: white; +} + +<===> +================================================================================ +<===> lightness/below/input.scss +a {b: hsl(0, 100%, -100%)} + +<===> lightness/below/output.css +a { + b: black; +} diff --git a/spec/core_functions/color/hsl/three_args/named.hrx b/spec/core_functions/color/hsl/three_args/named.hrx new file mode 100644 index 0000000000..adb0914b4e --- /dev/null +++ b/spec/core_functions/color/hsl/three_args/named.hrx @@ -0,0 +1,8 @@ +<===> input.scss +a {b: hsl($hue: 0, $saturation: 100%, $lightness: 50%)} + +<===> output.css +a { + b: red; +} + diff --git a/spec/core_functions/color/hsl/three_args/units.hrx b/spec/core_functions/color/hsl/three_args/units.hrx new file mode 100644 index 0000000000..7d7a0c2763 --- /dev/null +++ b/spec/core_functions/color/hsl/three_args/units.hrx @@ -0,0 +1,27 @@ +<===> hue/deg/input.scss +a {b: hsl(0deg, 100%, 50%)} + +<===> hue/deg/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> saturation/unitless/input.scss +a {b: hsl(0, 50, 50%)} + +<===> saturation/unitless/output.css +a { + b: #bf4040; +} + +<===> +================================================================================ +<===> lightness/unitless/input.scss +a {b: hsl(0, 100%, 50)} + +<===> lightness/unitless/output.css +a { + b: red; +} diff --git a/spec/core_functions/color/hsl/three_args/w3c.hrx b/spec/core_functions/color/hsl/three_args/w3c.hrx new file mode 100644 index 0000000000..00f024e794 --- /dev/null +++ b/spec/core_functions/color/hsl/three_args/w3c.hrx @@ -0,0 +1,571 @@ +<===> README.md +These test cases come from two official W3C test suites: + +* https://www.w3.org/Style/CSS/Test/CSS3/Color/20070927/html4/t040204-hsl-h-rotating-b.htm +* https://www.w3.org/Style/CSS/Test/CSS3/Color/current/html4/t040204-hsl-values-b.htm + +Because these spces have so many repetitive cases, they violate the normal +one-test-case-per-suite rule. + +<===> +================================================================================ +<===> hue/input.scss +@mixin test-hues($name, $hues...) { + #{$name} { + @each $hue in $hues { + hue-#{$hue}: hsl($hue, 100%, 50%); + } + } +} + +@include test-hues("red", 0, -360, 360, 6120); +@include test-hues("yellow", 60, -300, 420, -9660); +@include test-hues("green", 120, -240, 480, 99840); +@include test-hues("cyan", 180, -180, 540, -900); +@include test-hues("blue", 240, -120, 600, -104880); +@include test-hues("purple", 300, -60, 660, 2820); + +<===> hue/output.css +red { + hue-0: red; + hue--360: red; + hue-360: red; + hue-6120: red; +} + +yellow { + hue-60: yellow; + hue--300: yellow; + hue-420: yellow; + hue--9660: yellow; +} + +green { + hue-120: lime; + hue--240: lime; + hue-480: lime; + hue-99840: lime; +} + +cyan { + hue-180: aqua; + hue--180: aqua; + hue-540: aqua; + hue--900: aqua; +} + +blue { + hue-240: blue; + hue--120: blue; + hue-600: blue; + hue--104880: blue; +} + +purple { + hue-300: fuchsia; + hue--60: fuchsia; + hue-660: fuchsia; + hue-2820: fuchsia; +} + +<===> hue/output-libsass.css +red { + hue-0: red; + hue--360: red; + hue-360: red; + hue-6120: red; +} + +yellow { + hue-60: yellow; + hue--300: yellow; + hue-420: yellow; + hue--9660: yellow; +} + +green { + hue-120: lime; + hue--240: lime; + hue-480: lime; + hue-99840: lime; +} + +cyan { + hue-180: cyan; + hue--180: cyan; + hue-540: cyan; + hue--900: cyan; +} + +blue { + hue-240: blue; + hue--120: blue; + hue-600: blue; + hue--104880: blue; +} + +purple { + hue-300: magenta; + hue--60: magenta; + hue-660: magenta; + hue-2820: magenta; +} + +<===> +================================================================================ +<===> red_to_green/input.scss +a { + step-1: hsl(0, 100%, 50%); + step-2: hsl(12, 100%, 50%); + step-3: hsl(24, 100%, 50%); + step-4: hsl(36, 100%, 50%); + step-5: hsl(48, 100%, 50%); + step-6: hsl(60, 100%, 50%); + step-7: hsl(72, 100%, 50%); + step-8: hsl(84, 100%, 50%); + step-9: hsl(96, 100%, 50%); + step-10: hsl(108, 100%, 50%); + step-11: hsl(120, 100%, 50%); +} + +<===> red_to_green/output.css +a { + step-1: red; + step-2: #ff3300; + step-3: #ff6600; + step-4: #ff9900; + step-5: #ffcc00; + step-6: yellow; + step-7: #ccff00; + step-8: #99ff00; + step-9: #66ff00; + step-10: #33ff00; + step-11: lime; +} + +<===> +================================================================================ +<===> green_to_blue/input.scss +a { + step-1: hsl(120, 100%, 50%); + step-2: hsl(132, 100%, 50%); + step-3: hsl(144, 100%, 50%); + step-4: hsl(156, 100%, 50%); + step-5: hsl(168, 100%, 50%); + step-6: hsl(180, 100%, 50%); + step-7: hsl(192, 100%, 50%); + step-8: hsl(204, 100%, 50%); + step-9: hsl(216, 100%, 50%); + step-10: hsl(228, 100%, 50%); + step-11: hsl(240, 100%, 50%); +} + +<===> green_to_blue/output.css +a { + step-1: lime; + step-2: #00ff33; + step-3: #00ff66; + step-4: #00ff99; + step-5: #00ffcc; + step-6: aqua; + step-7: #00ccff; + step-8: #0099ff; + step-9: #0066ff; + step-10: #0033ff; + step-11: blue; +} + +<===> green_to_blue/output-libsass.css +a { + step-1: lime; + step-2: #00ff33; + step-3: #00ff66; + step-4: #00ff99; + step-5: #00ffcc; + step-6: cyan; + step-7: #00ccff; + step-8: #0099ff; + step-9: #0066ff; + step-10: #0033ff; + step-11: blue; +} + +<===> +================================================================================ +<===> blue_to_red/input.scss +a { + step-1: hsl(240, 100%, 50%); + step-2: hsl(252, 100%, 50%); + step-3: hsl(264, 100%, 50%); + step-4: hsl(276, 100%, 50%); + step-5: hsl(288, 100%, 50%); + step-6: hsl(300, 100%, 50%); + step-7: hsl(312, 100%, 50%); + step-8: hsl(324, 100%, 50%); + step-9: hsl(336, 100%, 50%); + step-10: hsl(348, 100%, 50%); + step-11: hsl(360, 100%, 50%); +} + +<===> blue_to_red/output.css +a { + step-1: blue; + step-2: #3300ff; + step-3: #6600ff; + step-4: #9900ff; + step-5: #cc00ff; + step-6: fuchsia; + step-7: #ff00cc; + step-8: #ff0099; + step-9: #ff0066; + step-10: #ff0033; + step-11: red; +} + +<===> blue_to_red/output-libsass.css +a { + step-1: blue; + step-2: #3300ff; + step-3: #6600ff; + step-4: #9900ff; + step-5: #cc00ff; + step-6: magenta; + step-7: #ff00cc; + step-8: #ff0099; + step-9: #ff0066; + step-10: #ff0033; + step-11: red; +} + +<===> +================================================================================ +<===> gray_to/red/input.scss +a { + step-1: hsl(0, 20%, 50%); + step-2: hsl(0, 60%, 50%); + step-3: hsl(0, 100%, 50%); +} + +<===> gray_to/red/output.css +a { + step-1: #996666; + step-2: #cc3333; + step-3: red; +} + +<===> +================================================================================ +<===> gray_to/yellow/input.scss +a { + step-1: hsl(60, 20%, 50%); + step-2: hsl(60, 60%, 50%); + step-3: hsl(60, 100%, 50%); +} + +<===> gray_to/yellow/output.css +a { + step-1: #999966; + step-2: #cccc33; + step-3: yellow; +} + +<===> +================================================================================ +<===> gray_to/green/input.scss +a { + step-1: hsl(120, 20%, 50%); + step-2: hsl(120, 60%, 50%); + step-3: hsl(120, 100%, 50%); +} + +<===> gray_to/green/output.css +a { + step-1: #669966; + step-2: #33cc33; + step-3: lime; +} + +<===> +================================================================================ +<===> gray_to/cyan/input.scss +a { + step-1: hsl(180, 20%, 50%); + step-2: hsl(180, 60%, 50%); + step-3: hsl(180, 100%, 50%); +} + +<===> gray_to/cyan/output.css +a { + step-1: #669999; + step-2: #33cccc; + step-3: aqua; +} + +<===> gray_to/cyan/output-libsass.css +a { + step-1: #669999; + step-2: #33cccc; + step-3: cyan; +} + +<===> +================================================================================ +<===> gray_to/blue/input.scss +a { + step-1: hsl(240, 20%, 50%); + step-2: hsl(240, 60%, 50%); + step-3: hsl(240, 100%, 50%); +} + +<===> gray_to/blue/output.css +a { + step-1: #666699; + step-2: #3333cc; + step-3: blue; +} + +<===> +================================================================================ +<===> gray_to/purple/input.scss +a { + step-1: hsl(300, 20%, 50%); + step-2: hsl(300, 60%, 50%); + step-3: hsl(300, 100%, 50%); +} + +<===> gray_to/purple/output.css +a { + step-1: #996699; + step-2: #cc33cc; + step-3: fuchsia; +} + +<===> gray_to/purple/output-libsass.css +a { + step-1: #996699; + step-2: #cc33cc; + step-3: magenta; +} + +<===> +================================================================================ +<===> black_to_white_through/red/input.scss +a { + step-1: hsl(0, 100%, 0%); + step-2: hsl(0, 100%, 10%); + step-3: hsl(0, 100%, 20%); + step-4: hsl(0, 100%, 30%); + step-5: hsl(0, 100%, 40%); + step-6: hsl(0, 100%, 50%); + step-7: hsl(0, 100%, 60%); + step-8: hsl(0, 100%, 70%); + step-9: hsl(0, 100%, 80%); + step-10: hsl(0, 100%, 90%); + step-11: hsl(0, 100%, 100%); +} + +<===> black_to_white_through/red/output.css +a { + step-1: black; + step-2: #330000; + step-3: #660000; + step-4: #990000; + step-5: #cc0000; + step-6: red; + step-7: #ff3333; + step-8: #ff6666; + step-9: #ff9999; + step-10: #ffcccc; + step-11: white; +} + +<===> +================================================================================ +<===> black_to_white_through/yellow/input.scss +a { + step-1: hsl(60, 100%, 0%); + step-2: hsl(60, 100%, 10%); + step-3: hsl(60, 100%, 20%); + step-4: hsl(60, 100%, 30%); + step-5: hsl(60, 100%, 40%); + step-6: hsl(60, 100%, 50%); + step-7: hsl(60, 100%, 60%); + step-8: hsl(60, 100%, 70%); + step-9: hsl(60, 100%, 80%); + step-10: hsl(60, 100%, 90%); + step-11: hsl(60, 100%, 100%); +} + +<===> black_to_white_through/yellow/output.css +a { + step-1: black; + step-2: #333300; + step-3: #666600; + step-4: #999900; + step-5: #cccc00; + step-6: yellow; + step-7: #ffff33; + step-8: #ffff66; + step-9: #ffff99; + step-10: #ffffcc; + step-11: white; +} + +<===> +================================================================================ +<===> black_to_white_through/green/input.scss +a { + step-1: hsl(120, 100%, 0%); + step-2: hsl(120, 100%, 10%); + step-3: hsl(120, 100%, 20%); + step-4: hsl(120, 100%, 30%); + step-5: hsl(120, 100%, 40%); + step-6: hsl(120, 100%, 50%); + step-7: hsl(120, 100%, 60%); + step-8: hsl(120, 100%, 70%); + step-9: hsl(120, 100%, 80%); + step-10: hsl(120, 100%, 90%); + step-11: hsl(120, 100%, 100%); +} + +<===> black_to_white_through/green/output.css +a { + step-1: black; + step-2: #003300; + step-3: #006600; + step-4: #009900; + step-5: #00cc00; + step-6: lime; + step-7: #33ff33; + step-8: #66ff66; + step-9: #99ff99; + step-10: #ccffcc; + step-11: white; +} + +<===> +================================================================================ +<===> black_to_white_through/cyan/input.scss +a { + step-1: hsl(180, 100%, 0%); + step-2: hsl(180, 100%, 10%); + step-3: hsl(180, 100%, 20%); + step-4: hsl(180, 100%, 30%); + step-5: hsl(180, 100%, 40%); + step-6: hsl(180, 100%, 50%); + step-7: hsl(180, 100%, 60%); + step-8: hsl(180, 100%, 70%); + step-9: hsl(180, 100%, 80%); + step-10: hsl(180, 100%, 90%); + step-11: hsl(180, 100%, 100%); +} + +<===> black_to_white_through/cyan/output.css +a { + step-1: black; + step-2: #003333; + step-3: #006666; + step-4: #009999; + step-5: #00cccc; + step-6: aqua; + step-7: #33ffff; + step-8: #66ffff; + step-9: #99ffff; + step-10: #ccffff; + step-11: white; +} + +<===> black_to_white_through/cyan/output-libsass.css +a { + step-1: black; + step-2: #003333; + step-3: #006666; + step-4: #009999; + step-5: #00cccc; + step-6: cyan; + step-7: #33ffff; + step-8: #66ffff; + step-9: #99ffff; + step-10: #ccffff; + step-11: white; +} + +<===> +================================================================================ +<===> black_to_white_through/blue/input.scss +a { + step-1: hsl(240, 100%, 0%); + step-2: hsl(240, 100%, 10%); + step-3: hsl(240, 100%, 20%); + step-4: hsl(240, 100%, 30%); + step-5: hsl(240, 100%, 40%); + step-6: hsl(240, 100%, 50%); + step-7: hsl(240, 100%, 60%); + step-8: hsl(240, 100%, 70%); + step-9: hsl(240, 100%, 80%); + step-10: hsl(240, 100%, 90%); + step-11: hsl(240, 100%, 100%); +} + +<===> black_to_white_through/blue/output.css +a { + step-1: black; + step-2: #000033; + step-3: #000066; + step-4: #000099; + step-5: #0000cc; + step-6: blue; + step-7: #3333ff; + step-8: #6666ff; + step-9: #9999ff; + step-10: #ccccff; + step-11: white; +} + +<===> +================================================================================ +<===> black_to_white_through/purple/input.scss +a { + step-1: hsl(300, 100%, 0%); + step-2: hsl(300, 100%, 10%); + step-3: hsl(300, 100%, 20%); + step-4: hsl(300, 100%, 30%); + step-5: hsl(300, 100%, 40%); + step-6: hsl(300, 100%, 50%); + step-7: hsl(300, 100%, 60%); + step-8: hsl(300, 100%, 70%); + step-9: hsl(300, 100%, 80%); + step-10: hsl(300, 100%, 90%); + step-11: hsl(300, 100%, 100%); +} + +<===> black_to_white_through/purple/output.css +a { + step-1: black; + step-2: #330033; + step-3: #660066; + step-4: #990099; + step-5: #cc00cc; + step-6: fuchsia; + step-7: #ff33ff; + step-8: #ff66ff; + step-9: #ff99ff; + step-10: #ffccff; + step-11: white; +} + + +<===> black_to_white_through/purple/output-libsass.css +a { + step-1: black; + step-2: #330033; + step-3: #660066; + step-4: #990099; + step-5: #cc00cc; + step-6: magenta; + step-7: #ff33ff; + step-8: #ff66ff; + step-9: #ff99ff; + step-10: #ffccff; + step-11: white; +} diff --git a/spec/core_functions/color/hsl/two_args.hrx b/spec/core_functions/color/hsl/two_args.hrx deleted file mode 100644 index 9f1bb1f4cb..0000000000 --- a/spec/core_functions/color/hsl/two_args.hrx +++ /dev/null @@ -1,41 +0,0 @@ -<===> options.yml ---- -:todo: -- libsass - -<===> input.scss -opaque-to { - opaque: hsl(#123, 1); - partial: hsl(#123, 0.5); - transparent: hsl(#123, 0); -} - -partial-to { - $color: hsl(0, 0, 255, 0.3); - opaque: hsl($color, 1); - partial: hsl($color, 0.5); - transparent: hsl($color, 0); -} - -transparent-to { - opaque: hsl(transparent, 1); - partial: hsl(transparent, 0.5); - transparent: hsl(transparent, 0); -} - -clamped { - opaque: hsl(#123, 1.1); - transparent: hsl(#123, -0.1); -} - -named { - x: hsl($color: #123, $alpha: 0.5); -} - -<===> error -Error: Missing argument $lightness. - , -2 | opaque: hsl(#123, 1); - | ^^^^^^^^^^^^ - ' - input.scss 2:11 root stylesheet diff --git a/spec/core_functions/color/hsla/error/two_args.hrx b/spec/core_functions/color/hsla/error/two_args.hrx index 9bd5593acf..33241bddba 100644 --- a/spec/core_functions/color/hsla/error/two_args.hrx +++ b/spec/core_functions/color/hsla/error/two_args.hrx @@ -1,18 +1,17 @@ <===> input.scss -one-arg { - x: hsla(0, 100%); -} +a {b: hsla(#123, 0.5)} <===> error Error: Missing argument $lightness. , -2 | x: hsla(0, 100%); - | ^^^^^^^^^^^^^ +1 | a {b: hsla(#123, 0.5)} + | ^^^^^^^^^^^^^^^ ' - input.scss 2:6 root stylesheet + input.scss 1:7 root stylesheet <===> error-libsass Error: Function hsla is missing argument $lightness. - on line 2 of one_arg/input.scss ->> x: hsla(0, 100%); - -----^ + on line 1 of input.scss +>> a {b: hsla(#123, 0.5)} + + ------^ diff --git a/spec/core_functions/color/hsla/four_args/alpha.hrx b/spec/core_functions/color/hsla/four_args/alpha.hrx new file mode 100644 index 0000000000..78993442e3 --- /dev/null +++ b/spec/core_functions/color/hsla/four_args/alpha.hrx @@ -0,0 +1,105 @@ +<===> percent/options.yml +--- +:todo: +- sass/libsass#2719 + +<===> +================================================================================ +<===> percent/negative/input.scss +a {b: hsla(0, 0, 0, -10%)} + +<===> percent/negative/output.css +a { + b: rgba(0, 0, 0, 0); +} + +<===> +================================================================================ +<===> percent/min/input.scss +a {b: hsla(0, 0, 0, 0%)} + +<===> percent/min/output.css +a { + b: rgba(0, 0, 0, 0); +} + +<===> +================================================================================ +<===> percent/positive/input.scss +a {b: hsla(0, 0, 0, 45.6%)} + +<===> percent/positive/output.css +a { + b: rgba(0, 0, 0, 0.456); +} + +<===> +================================================================================ +<===> percent/max/input.scss +a {b: hsla(0, 0, 0, 100%)} + +<===> percent/max/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> percent/above_max/input.scss +a {b: hsla(0, 0, 0, 250%)} + +<===> percent/above_max/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> unitless/negative/input.scss +a {b: hsla(0, 0, 0, -10)} + +<===> unitless/negative/output.css +a { + b: rgba(0, 0, 0, 0); +} + +<===> +================================================================================ +<===> unitless/min/input.scss +a {b: hsla(0, 0, 0, 0)} + +<===> unitless/min/output.css +a { + b: rgba(0, 0, 0, 0); +} + +<===> +================================================================================ +<===> unitless/positive/input.scss +a {b: hsla(0, 0, 0, 0.456)} + +<===> unitless/positive/output.css +a { + b: rgba(0, 0, 0, 0.456); +} + +<===> +================================================================================ +<===> unitless/max/input.scss +a {b: hsla(0, 0, 0, 1)} + +<===> unitless/max/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> unitless/above_max/input.scss +a {b: hsla(0, 0, 0, 250)} + +<===> unitless/above_max/output.css +a { + b: black; +} + diff --git a/spec/core_functions/color/hsla/four_args/alpha_percent.hrx b/spec/core_functions/color/hsla/four_args/alpha_percent.hrx deleted file mode 100644 index 2882243204..0000000000 --- a/spec/core_functions/color/hsla/four_args/alpha_percent.hrx +++ /dev/null @@ -1,22 +0,0 @@ -<===> options.yml ---- -:todo: -- sass/libsass#2719 - -<===> input.scss -.alpha-percent { - negative: hsla(0, 0, 0, -10%); - min: hsla(0, 0, 0, 0%); - positive: hsla(0, 0, 0, 45.6%); - max: hsla(0, 0, 0, 100%); - above-max: hsla(0, 0, 0, 250%); -} - -<===> output.css -.alpha-percent { - negative: rgba(0, 0, 0, 0); - min: rgba(0, 0, 0, 0); - positive: rgba(0, 0, 0, 0.456); - max: black; - above-max: black; -} diff --git a/spec/core_functions/color/hsla/four_args/alpha_unitless.hrx b/spec/core_functions/color/hsla/four_args/alpha_unitless.hrx deleted file mode 100644 index 35430ee7e7..0000000000 --- a/spec/core_functions/color/hsla/four_args/alpha_unitless.hrx +++ /dev/null @@ -1,17 +0,0 @@ -<===> input.scss -.alpha-unitless { - negative: hsla(0, 0, 0, -10); - min: hsla(0, 0, 0, 0); - positive: hsla(0, 0, 0, 0.456); - max: hsla(0, 0, 0, 1); - above-max: hsla(0, 0, 0, 250); -} - -<===> output.css -.alpha-unitless { - negative: rgba(0, 0, 0, 0); - min: rgba(0, 0, 0, 0); - positive: rgba(0, 0, 0, 0.456); - max: black; - above-max: black; -} diff --git a/spec/core_functions/color/hsla/four_args/basic.hrx b/spec/core_functions/color/hsla/four_args/basic.hrx deleted file mode 100644 index a5543d889d..0000000000 --- a/spec/core_functions/color/hsla/four_args/basic.hrx +++ /dev/null @@ -1,30 +0,0 @@ -<===> input.scss -basic { - transparent: hsla(180, 60%, 50%, 0); - opaque: hsla(180, 60%, 50%, 1); - partial: hsla(180, 60%, 50%, 0.5); - named: hsla($hue: 180, $saturation: 60%, $lightness: 50%, $alpha: 0.4); -} - -// Channels that are out of bounds are clamped within bounds. -clamped { - saturation: hsla(0, -0.1%, 50%, 0.5); - blue: hsla(0, 100%, 9999%, 0.5); - alpha-above: hsla(0, 100%, 50%, 1.1); - alpha-below: rgba(0, 100%, 50%, -0.1); -} - -<===> output.css -basic { - transparent: rgba(51, 204, 204, 0); - opaque: #33cccc; - partial: rgba(51, 204, 204, 0.5); - named: rgba(51, 204, 204, 0.4); -} - -clamped { - saturation: rgba(128, 128, 128, 0.5); - blue: rgba(255, 255, 255, 0.5); - alpha-above: red; - alpha-below: rgba(0, 255, 128, 0); -} diff --git a/spec/core_functions/color/hsla/four_args/clamped.hrx b/spec/core_functions/color/hsla/four_args/clamped.hrx new file mode 100644 index 0000000000..4b651628ef --- /dev/null +++ b/spec/core_functions/color/hsla/four_args/clamped.hrx @@ -0,0 +1,43 @@ +<===> README.md +Channels that are out of bounds are clamped within bounds. + +<===> +================================================================================ +<===> saturation/input.scss +a {b: hsla(0, -0.1%, 50%, 0.5)} + +<===> saturation/output.css +a { + b: rgba(128, 128, 128, 0.5); +} + +<===> +================================================================================ +<===> lightness/input.scss +a {b: hsla(0, 100%, 9999%, 0.5)} + +<===> lightness/output.css +a { + b: rgba(255, 255, 255, 0.5); +} + +<===> +================================================================================ +<===> alpha/above/input.scss +a {b: hsla(0, 100%, 50%, 1.1)} + +<===> alpha/above/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> alpha/below/input.scss +a {b: rgba(0, 100%, 50%, -0.1)} + +<===> alpha/below/output.css +a { + b: rgba(0, 255, 128, 0); +} + diff --git a/spec/core_functions/color/hsla/four_args/in_gamut.hrx b/spec/core_functions/color/hsla/four_args/in_gamut.hrx new file mode 100644 index 0000000000..39d0533a16 --- /dev/null +++ b/spec/core_functions/color/hsla/four_args/in_gamut.hrx @@ -0,0 +1,37 @@ +<===> transparent/input.scss +a {b: hsla(180, 60%, 50%, 0)} + +<===> transparent/output.css +a { + b: rgba(51, 204, 204, 0); +} + +<===> +================================================================================ +<===> opaque/input.scss +a {b: hsla(180, 60%, 50%, 1)} + +<===> opaque/output.css +a { + b: #33cccc; +} + +<===> +================================================================================ +<===> partial/input.scss +a {b: hsla(180, 60%, 50%, 0.5)} + +<===> partial/output.css +a { + b: rgba(51, 204, 204, 0.5); +} + +<===> +================================================================================ +<===> named/input.scss +a {b: hsla($hue: 180, $saturation: 60%, $lightness: 50%, $alpha: 0.4)} + +<===> named/output.css +a { + b: rgba(51, 204, 204, 0.4); +} diff --git a/spec/core_functions/color/hsla/four_args/special_functions.hrx b/spec/core_functions/color/hsla/four_args/special_functions.hrx index 0343179141..c707eddb3f 100644 --- a/spec/core_functions/color/hsla/four_args/special_functions.hrx +++ b/spec/core_functions/color/hsla/four_args/special_functions.hrx @@ -3,54 +3,203 @@ :todo: - sass/libsass#2726 -<===> input.scss -a { - calc-1: hsla(calc(1), 2%, 3%, 0.4); - calc-2: hsla(1, calc(2%), 3%, 0.4); - calc-3: hsla(1, 2%, calc(3%), 0.4); - calc-4: hsla(1, 2%, 3%, calc(0.4)); - - var-1: hsla(var(--foo), 2%, 3%, 0.4); - var-2: hsla(1, var(--foo), 3%, 0.4); - var-3: hsla(1, 2%, var(--foo), 0.4); - var-4: hsla(1, 2%, 3%, var(--foo)); - - env-1: hsla(env(--foo), 2%, 3%, 0.4); - env-2: hsla(1, env(--foo), 3%, 0.4); - env-3: hsla(1, 2%, env(--foo), 0.4); - env-4: hsla(1, 2%, 3%, env(--foo)); - - min-1: hsla(min(1), 2%, 3%, 0.4); - min-2: hsla(1, min(2%), 3%, 0.4); - min-3: hsla(1, 2%, min(3%), 0.4); - min-4: hsla(1, 2%, 3%, min(0.4)); - - max-1: hsla(max(1), 2%, 3%, 0.4); - max-2: hsla(1, max(2%), 3%, 0.4); - max-3: hsla(1, 2%, max(3%), 0.4); - max-4: hsla(1, 2%, 3%, max(0.4)); -} - -<===> output.css -a { - calc-1: hsla(calc(1), 2%, 3%, 0.4); - calc-2: hsla(1, calc(2%), 3%, 0.4); - calc-3: hsla(1, 2%, calc(3%), 0.4); - calc-4: hsla(1, 2%, 3%, calc(0.4)); - var-1: hsla(var(--foo), 2%, 3%, 0.4); - var-2: hsla(1, var(--foo), 3%, 0.4); - var-3: hsla(1, 2%, var(--foo), 0.4); - var-4: hsla(1, 2%, 3%, var(--foo)); - env-1: hsla(env(--foo), 2%, 3%, 0.4); - env-2: hsla(1, env(--foo), 3%, 0.4); - env-3: hsla(1, 2%, env(--foo), 0.4); - env-4: hsla(1, 2%, 3%, env(--foo)); - min-1: hsla(min(1), 2%, 3%, 0.4); - min-2: hsla(1, min(2%), 3%, 0.4); - min-3: hsla(1, 2%, min(3%), 0.4); - min-4: hsla(1, 2%, 3%, min(0.4)); - max-1: hsla(max(1), 2%, 3%, 0.4); - max-2: hsla(1, max(2%), 3%, 0.4); - max-3: hsla(1, 2%, max(3%), 0.4); - max-4: hsla(1, 2%, 3%, max(0.4)); +<===> +================================================================================ +<===> calc/arg_1/input.scss +a {b: hsla(calc(1), 2%, 3%, 0.4)} + +<===> calc/arg_1/output.css +a { + b: hsla(calc(1), 2%, 3%, 0.4); +} + +<===> +================================================================================ +<===> calc/arg_2/input.scss +a {b: hsla(1, calc(2%), 3%, 0.4)} + +<===> calc/arg_2/output.css +a { + b: hsla(1, calc(2%), 3%, 0.4); +} + +<===> +================================================================================ +<===> calc/arg_3/input.scss +a {b: hsla(1, 2%, calc(3%), 0.4)} + +<===> calc/arg_3/output.css +a { + b: hsla(1, 2%, calc(3%), 0.4); +} + +<===> +================================================================================ +<===> calc/arg_4/input.scss +a {b: hsla(1, 2%, 3%, calc(0.4))} + +<===> calc/arg_4/output.css +a { + b: hsla(1, 2%, 3%, calc(0.4)); +} + +<===> +================================================================================ +<===> var/arg_1/input.scss +a {b: hsla(var(--foo), 2%, 3%, 0.4)} + +<===> var/arg_1/output.css +a { + b: hsla(var(--foo), 2%, 3%, 0.4); +} + +<===> +================================================================================ +<===> var/arg_2/input.scss +a {b: hsla(1, var(--foo), 3%, 0.4)} + +<===> var/arg_2/output.css +a { + b: hsla(1, var(--foo), 3%, 0.4); +} + +<===> +================================================================================ +<===> var/arg_3/input.scss +a {b: hsla(1, 2%, var(--foo), 0.4)} + +<===> var/arg_3/output.css +a { + b: hsla(1, 2%, var(--foo), 0.4); +} + +<===> +================================================================================ +<===> var/arg_4/input.scss +a {b: hsla(1, 2%, 3%, var(--foo))} + +<===> var/arg_4/output.css +a { + b: hsla(1, 2%, 3%, var(--foo)); } + +<===> +================================================================================ +<===> env/arg_1/input.scss +a {b: hsla(env(--foo), 2%, 3%, 0.4)} + +<===> env/arg_1/output.css +a { + b: hsla(env(--foo), 2%, 3%, 0.4); +} + +<===> +================================================================================ +<===> env/arg_2/input.scss +a {b: hsla(1, env(--foo), 3%, 0.4)} + +<===> env/arg_2/output.css +a { + b: hsla(1, env(--foo), 3%, 0.4); +} + +<===> +================================================================================ +<===> env/arg_3/input.scss +a {b: hsla(1, 2%, env(--foo), 0.4)} + +<===> env/arg_3/output.css +a { + b: hsla(1, 2%, env(--foo), 0.4); +} + +<===> +================================================================================ +<===> env/arg_4/input.scss +a {b: hsla(1, 2%, 3%, env(--foo))} + +<===> env/arg_4/output.css +a { + b: hsla(1, 2%, 3%, env(--foo)); +} + +<===> +================================================================================ +<===> min/arg_1/input.scss +a {b: hsla(min(1), 2%, 3%, 0.4)} + +<===> min/arg_1/output.css +a { + b: hsla(min(1), 2%, 3%, 0.4); +} + +<===> +================================================================================ +<===> min/arg_2/input.scss +a {b: hsla(1, min(2%), 3%, 0.4)} + +<===> min/arg_2/output.css +a { + b: hsla(1, min(2%), 3%, 0.4); +} + +<===> +================================================================================ +<===> min/arg_3/input.scss +a {b: hsla(1, 2%, min(3%), 0.4)} + +<===> min/arg_3/output.css +a { + b: hsla(1, 2%, min(3%), 0.4); +} + +<===> +================================================================================ +<===> min/arg_4/input.scss +a {b: hsla(1, 2%, 3%, min(0.4))} + +<===> min/arg_4/output.css +a { + b: hsla(1, 2%, 3%, min(0.4)); +} + +<===> +================================================================================ +<===> max/arg_1/input.scss +a {b: hsla(max(1), 2%, 3%, 0.4)} + +<===> max/arg_1/output.css +a { + b: hsla(max(1), 2%, 3%, 0.4); +} + +<===> +================================================================================ +<===> max/arg_2/input.scss +a {b: hsla(1, max(2%), 3%, 0.4)} + +<===> max/arg_2/output.css +a { + b: hsla(1, max(2%), 3%, 0.4); +} + +<===> +================================================================================ +<===> max/arg_3/input.scss +a {b: hsla(1, 2%, max(3%), 0.4)} + +<===> max/arg_3/output.css +a { + b: hsla(1, 2%, max(3%), 0.4); +} + +<===> +================================================================================ +<===> max/arg_4/input.scss +a {b: hsla(1, 2%, 3%, max(0.4))} + +<===> max/arg_4/output.css +a { + b: hsla(1, 2%, 3%, max(0.4)); +} + diff --git a/spec/core_functions/color/hsla/multi_argument_var.hrx b/spec/core_functions/color/hsla/multi_argument_var.hrx index 91b69a46bd..5dca1e0706 100644 --- a/spec/core_functions/color/hsla/multi_argument_var.hrx +++ b/spec/core_functions/color/hsla/multi_argument_var.hrx @@ -3,23 +3,64 @@ :todo: - libsass -<===> input.scss +<===> +================================================================================ +<===> 1_of_3/input.scss +// var() is substituted before parsing, so it may contain multiple arguments. +a {b: hsla(var(--foo), 3%, 0.4)} + +<===> 1_of_3/output.css a { - // var() is substituted before parsing, so it may contain multiple arguments. b: hsla(var(--foo), 3%, 0.4); - b: hsla(1, var(--foo), 0.4); - b: hsla(1, 2%, var(--foo)); - b: hsla(var(--foo), 0.4); - b: hsla(1, var(--foo)); - b: hsla(var(--foo)); } -<===> output.css +<===> +================================================================================ +<===> 2_of_3/input.scss +a {b: hsla(1, var(--foo), 0.4)} + +<===> 2_of_3/output.css a { - b: hsla(var(--foo), 3%, 0.4); b: hsla(1, var(--foo), 0.4); +} + +<===> +================================================================================ +<===> 3_of_3/input.scss +a {b: hsla(1, 2%, var(--foo))} + +<===> 3_of_3/output.css +a { b: hsla(1, 2%, var(--foo)); +} + +<===> +================================================================================ +<===> 1_of_2/input.scss +a {b: hsla(var(--foo), 0.4)} + +<===> 1_of_2/output.css +a { b: hsla(var(--foo), 0.4); +} + +<===> +================================================================================ +<===> 2_of_2/input.scss +a {b: hsla(1, var(--foo))} + +<===> 2_of_2/output.css +a { b: hsla(1, var(--foo)); +} + +<===> +================================================================================ +<===> 1_of_1/input.scss +a {b: hsla(var(--foo))} + +<===> 1_of_1/output.css +a { b: hsla(var(--foo)); } + diff --git a/spec/core_functions/color/hsla/one_arg/alpha.hrx b/spec/core_functions/color/hsla/one_arg/alpha.hrx index 9bb3ecc368..b8c6f16346 100644 --- a/spec/core_functions/color/hsla/one_arg/alpha.hrx +++ b/spec/core_functions/color/hsla/one_arg/alpha.hrx @@ -1,33 +1,89 @@ -<===> input.scss -basic { - transparent: hsla(180 60% 50% / 0); - opaque: hsla(180 60% 50% / 1); - partial: hsla(180 60% 50% / 0.5); - named: hsla($channels: 180 60% 50% / 0.4); +<===> in_gamut/transparent/input.scss +a {b: hsla(180 60% 50% / 0)} - // Extra parens shouldn't cause the slash to be forced into division. - parenthesized: (hsl(180 60% 50% / 0.4)); +<===> in_gamut/transparent/output.css +a { + b: rgba(51, 204, 204, 0); } -clamped { - saturation: hsla(0 -0.1% 50% / 0.5); - lightness: hsla(0 100% 9999% / 0.5); - alpha-above: hsla(0 100% 50% / 1.1); - alpha-below: hsla(0 100% 50% / -0.1); +<===> +================================================================================ +<===> in_gamut/opaque/input.scss +a {b: hsla(180 60% 50% / 1)} + +<===> in_gamut/opaque/output.css +a { + b: #33cccc; +} + +<===> +================================================================================ +<===> in_gamut/partial/input.scss +a {b: hsla(180 60% 50% / 0.5)} + +<===> in_gamut/partial/output.css +a { + b: rgba(51, 204, 204, 0.5); +} + +<===> +================================================================================ +<===> in_gamut/named/input.scss +a {b: hsla($channels: 180 60% 50% / 0.4)} + +<===> in_gamut/named/output.css +a { + b: rgba(51, 204, 204, 0.4); } -<===> output.css -basic { - transparent: rgba(51, 204, 204, 0); - opaque: #33cccc; - partial: rgba(51, 204, 204, 0.5); - named: rgba(51, 204, 204, 0.4); - parenthesized: rgba(51, 204, 204, 0.4); +<===> +================================================================================ +<===> in_gamut/parenthesized/input.scss +// Extra parens shouldn't cause the slash to be forced into division. +a {b: hsl(180 60% 50% / 0.4)} + +<===> in_gamut/parenthesized/output.css +a { + b: rgba(51, 204, 204, 0.4); } -clamped { - saturation: rgba(128, 128, 128, 0.5); - lightness: rgba(255, 255, 255, 0.5); - alpha-above: red; - alpha-below: rgba(255, 0, 0, 0); +<===> +================================================================================ +<===> clamped/saturation/input.scss +a {b: hsla(0 -0.1% 50% / 0.5)} + +<===> clamped/saturation/output.css +a { + b: rgba(128, 128, 128, 0.5); } + +<===> +================================================================================ +<===> clamped/lightness/input.scss +a {b: hsla(0 100% 9999% / 0.5)} + +<===> clamped/lightness/output.css +a { + b: rgba(255, 255, 255, 0.5); +} + +<===> +================================================================================ +<===> clamped/alpha/above/input.scss +a {b: hsla(0 100% 50% / 1.1)} + +<===> clamped/alpha/above/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> clamped/alpha/below/input.scss +a {b: hsla(0 100% 50% / -0.1)} + +<===> clamped/alpha/below/output.css +a { + b: rgba(255, 0, 0, 0); +} + diff --git a/spec/core_functions/color/hsla/one_arg/basic.hrx b/spec/core_functions/color/hsla/one_arg/basic.hrx deleted file mode 100644 index ff4ec87339..0000000000 --- a/spec/core_functions/color/hsla/one_arg/basic.hrx +++ /dev/null @@ -1,48 +0,0 @@ -<===> input.scss -basic { - red: hsla(0 100% 50%); - blue: hsla(240 100% 50%); - grayish-yellow: hsla(60 60% 50%); -} - -clamped { - saturation-above: hsla(0 500% 50%); - saturation-below: hsla(0 -100% 50%); - lightness-above: hsla(0 100% 500%); - lightness-below: hsla(0 100% -100%); -} - -units { - hue-deg: hsla(0deg 100% 50%); - saturation-unitless: hsla(0 50 50%); - lightness-unitless: hsla(0 100% 50); -} - -named { - x: hsla($channels: 0 100% 50%); -} - -<===> output.css -basic { - red: red; - blue: blue; - grayish-yellow: #cccc33; -} - - -clamped { - saturation-above: red; - saturation-below: gray; - lightness-above: white; - lightness-below: black; -} - -units { - hue-deg: red; - saturation-unitless: #bf4040; - lightness-unitless: red; -} - -named { - x: red; -} diff --git a/spec/core_functions/color/hsla/one_arg/no_alpha.hrx b/spec/core_functions/color/hsla/one_arg/no_alpha.hrx new file mode 100644 index 0000000000..4a4eecfb97 --- /dev/null +++ b/spec/core_functions/color/hsla/one_arg/no_alpha.hrx @@ -0,0 +1,108 @@ +<===> in_gamut/red/input.scss +a {b: hsla(0 100% 50%)} + +<===> in_gamut/red/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> in_gamut/blue/input.scss +a {b: hsla(240 100% 50%)} + +<===> in_gamut/blue/output.css +a { + b: blue; +} + +<===> +================================================================================ +<===> in_gamut/grayish/yellow/input.scss +a {b: hsla(60 60% 50%)} + +<===> in_gamut/grayish/yellow/output.css +a { + b: #cccc33; +} + +<===> +================================================================================ +<===> clamped/saturation/above/input.scss +a {b: hsla(0 500% 50%)} + +<===> clamped/saturation/above/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> clamped/saturation/below/input.scss +a {b: hsla(0 -100% 50%)} + +<===> clamped/saturation/below/output.css +a { + b: gray; +} + +<===> +================================================================================ +<===> clamped/lightness/above/input.scss +a {b: hsla(0 100% 500%)} + +<===> clamped/lightness/above/output.css +a { + b: white; +} + +<===> +================================================================================ +<===> clamped/lightness/below/input.scss +a {b: hsla(0 100% -100%)} + +<===> clamped/lightness/below/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> units/hue/deg/input.scss +a {b: hsla(0deg 100% 50%)} + +<===> units/hue/deg/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> units/saturation/unitless/input.scss +a {b: hsla(0 50 50%)} + +<===> units/saturation/unitless/output.css +a { + b: #bf4040; +} + +<===> +================================================================================ +<===> units/lightness/unitless/input.scss +a {b: hsla(0 100% 50)} + +<===> units/lightness/unitless/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> named/input.scss +a {b: hsla($channels: 0 100% 50%)} + +<===> named/output.css +a { + b: red; +} + diff --git a/spec/core_functions/color/hsla/one_arg/special_functions.hrx b/spec/core_functions/color/hsla/one_arg/special_functions.hrx index 9ee48ffe28..eb84858bbd 100644 --- a/spec/core_functions/color/hsla/one_arg/special_functions.hrx +++ b/spec/core_functions/color/hsla/one_arg/special_functions.hrx @@ -3,110 +3,414 @@ :todo: - sass/libsass#2726 -<===> input.scss -no-alpha { - calc-1: hsla(calc(1) 2% 3%); - calc-2: hsla(1 calc(2%) 3%); - calc-3: hsla(1 2% calc(3%)); - - var-1: hsla(var(--foo) 2% 3%); - var-2: hsla(1 var(--foo) 3%); - var-3: hsla(1 2% var(--foo)); - - env-1: hsla(env(--foo) 2% 3%); - env-2: hsla(1 env(--foo) 3%); - env-3: hsla(1 2% env(--foo)); - - min-1: hsla(min(1) 2% 3%); - min-2: hsla(1 min(2%) 3%); - min-3: hsla(1 2% min(3%)); - - max-1: hsla(max(1) 2% 3%); - max-2: hsla(1 max(2%) 3%); - max-3: hsla(1 2% max(3%)); - - // var() is substituted before parsing, so it may contain multiple arguments. - multi-argument-var-1-of-2: hsla(var(--foo) 50%); - multi-argument-var-2-of-2: hsla(0 var(--foo)); - multi-argument-var-1-of-1: hsla(var(--foo)); -} - -alpha { - calc-1: hsla(calc(1) 2% 3% / 0.4); - calc-2: hsla(1 calc(2%) 3% / 0.4); - calc-3: hsla(1 2% calc(3%) / 0.4); - calc-4: hsla(1 2% 3% / calc(0.4)); - - var-1: hsla(var(--foo) 2% 3% / 0.4); - var-2: hsla(1 var(--foo) 3% / 0.4); - var-3: hsla(1 2% var(--foo) / 0.4); - var-4: hsla(1 2% 3% / var(--foo)); - - env-1: hsla(env(--foo) 2% 3% / 0.4); - env-2: hsla(1 env(--foo) 3% / 0.4); - env-3: hsla(1 2% env(--foo) / 0.4); - env-4: hsla(1 2% 3% / env(--foo)); - - min-1: hsla(min(1) 2% 3% / 0.4); - min-2: hsla(1 min(2%) 3% / 0.4); - min-3: hsla(1 2% min(3%) / 0.4); - min-4: hsla(1 2% 3% / min(0.4)); - - max-1: hsla(max(1) 2% 3% / 0.4); - max-2: hsla(1 max(2%) 3% / 0.4); - max-3: hsla(1 2% max(3%) / 0.4); - max-4: hsla(1 2% 3% / max(0.4)); - - // var() is substituted before parsing, so it may contain multiple arguments. - multi-argument-var-1-of-2: hsla(var(--foo) 50% / 0.4); - multi-argument-var-2-of-2: hsla(0 var(--foo) / 0.4); - multi-argument-var-1-of-1: hsla(var(--foo) / 0.4); -} - -<===> output.css -no-alpha { - calc-1: hsla(calc(1), 2%, 3%); - calc-2: hsla(1, calc(2%), 3%); - calc-3: hsla(1, 2%, calc(3%)); - var-1: hsla(var(--foo), 2%, 3%); - var-2: hsla(1, var(--foo), 3%); - var-3: hsla(1, 2%, var(--foo)); - env-1: hsla(env(--foo), 2%, 3%); - env-2: hsla(1, env(--foo), 3%); - env-3: hsla(1, 2%, env(--foo)); - min-1: hsla(min(1), 2%, 3%); - min-2: hsla(1, min(2%), 3%); - min-3: hsla(1, 2%, min(3%)); - max-1: hsla(max(1), 2%, 3%); - max-2: hsla(1, max(2%), 3%); - max-3: hsla(1, 2%, max(3%)); - multi-argument-var-1-of-2: hsla(var(--foo) 50%); - multi-argument-var-2-of-2: hsla(0 var(--foo)); - multi-argument-var-1-of-1: hsla(var(--foo)); -} - -alpha { - calc-1: hsla(calc(1), 2%, 3%, 0.4); - calc-2: hsla(1, calc(2%), 3%, 0.4); - calc-3: hsla(1 2% calc(3%)/0.4); - calc-4: hsla(1 2% 3%/calc(0.4)); - var-1: hsla(var(--foo), 2%, 3%, 0.4); - var-2: hsla(1, var(--foo), 3%, 0.4); - var-3: hsla(1 2% var(--foo)/0.4); - var-4: hsla(1 2% 3%/var(--foo)); - env-1: hsla(env(--foo), 2%, 3%, 0.4); - env-2: hsla(1, env(--foo), 3%, 0.4); - env-3: hsla(1 2% env(--foo)/0.4); - env-4: hsla(1 2% 3%/env(--foo)); - min-1: hsla(min(1), 2%, 3%, 0.4); - min-2: hsla(1, min(2%), 3%, 0.4); - min-3: hsla(1 2% min(3%)/0.4); - min-4: hsla(1 2% 3%/min(0.4)); - max-1: hsla(max(1), 2%, 3%, 0.4); - max-2: hsla(1, max(2%), 3%, 0.4); - max-3: hsla(1 2% max(3%)/0.4); - max-4: hsla(1 2% 3%/max(0.4)); - multi-argument-var-1-of-2: hsla(var(--foo) 50%/0.4); - multi-argument-var-2-of-2: hsla(0 var(--foo)/0.4); - multi-argument-var-1-of-1: hsla(var(--foo)/0.4); +<===> +================================================================================ +<===> no_alpha/calc/arg_1/input.scss +a {b: hsla(calc(1) 2% 3%)} + +<===> no_alpha/calc/arg_1/output.css +a { + b: hsla(calc(1), 2%, 3%); +} + +<===> +================================================================================ +<===> no_alpha/calc/arg_2/input.scss +a {b: hsla(1 calc(2%) 3%)} + +<===> no_alpha/calc/arg_2/output.css +a { + b: hsla(1, calc(2%), 3%); +} + +<===> +================================================================================ +<===> no_alpha/calc/arg_3/input.scss +a {b: hsla(1 2% calc(3%))} + +<===> no_alpha/calc/arg_3/output.css +a { + b: hsla(1, 2%, calc(3%)); +} + +<===> +================================================================================ +<===> no_alpha/var/arg_1/input.scss +a {b: hsla(var(--foo) 2% 3%)} + +<===> no_alpha/var/arg_1/output.css +a { + b: hsla(var(--foo), 2%, 3%); +} + +<===> +================================================================================ +<===> no_alpha/var/arg_2/input.scss +a {b: hsla(1 var(--foo) 3%)} + +<===> no_alpha/var/arg_2/output.css +a { + b: hsla(1, var(--foo), 3%); +} + +<===> +================================================================================ +<===> no_alpha/var/arg_3/input.scss +a {b: hsla(1 2% var(--foo))} + +<===> no_alpha/var/arg_3/output.css +a { + b: hsla(1, 2%, var(--foo)); +} + +<===> +================================================================================ +<===> no_alpha/env/arg_1/input.scss +a {b: hsla(env(--foo) 2% 3%)} + +<===> no_alpha/env/arg_1/output.css +a { + b: hsla(env(--foo), 2%, 3%); +} + +<===> +================================================================================ +<===> no_alpha/env/arg_2/input.scss +a {b: hsla(1 env(--foo) 3%)} + +<===> no_alpha/env/arg_2/output.css +a { + b: hsla(1, env(--foo), 3%); +} + +<===> +================================================================================ +<===> no_alpha/env/arg_3/input.scss +a {b: hsla(1 2% env(--foo))} + +<===> no_alpha/env/arg_3/output.css +a { + b: hsla(1, 2%, env(--foo)); +} + +<===> +================================================================================ +<===> no_alpha/min/arg_1/input.scss +a {b: hsla(min(1) 2% 3%)} + +<===> no_alpha/min/arg_1/output.css +a { + b: hsla(min(1), 2%, 3%); +} + +<===> +================================================================================ +<===> no_alpha/min/arg_2/input.scss +a {b: hsla(1 min(2%) 3%)} + +<===> no_alpha/min/arg_2/output.css +a { + b: hsla(1, min(2%), 3%); +} + +<===> +================================================================================ +<===> no_alpha/min/arg_3/input.scss +a {b: hsla(1 2% min(3%))} + +<===> no_alpha/min/arg_3/output.css +a { + b: hsla(1, 2%, min(3%)); +} + +<===> +================================================================================ +<===> no_alpha/max/arg_1/input.scss +a {b: hsla(max(1) 2% 3%)} + +<===> no_alpha/max/arg_1/output.css +a { + b: hsla(max(1), 2%, 3%); +} + +<===> +================================================================================ +<===> no_alpha/max/arg_2/input.scss +a {b: hsla(1 max(2%) 3%)} + +<===> no_alpha/max/arg_2/output.css +a { + b: hsla(1, max(2%), 3%); +} + +<===> +================================================================================ +<===> no_alpha/max/arg_3/input.scss +a {b: hsla(1 2% max(3%))} + +<===> no_alpha/max/arg_3/output.css +a { + b: hsla(1, 2%, max(3%)); +} + +<===> +================================================================================ +<===> no_alpha/multi_argument_var/1_of_2/input.scss +// var() is substituted before parsing, so it may contain multiple arguments. +a {b: hsla(var(--foo) 50%)} + +<===> no_alpha/multi_argument_var/1_of_2/output.css +a { + b: hsla(var(--foo) 50%); +} + +<===> +================================================================================ +<===> no_alpha/multi_argument_var/2_of_2/input.scss +a {b: hsla(0 var(--foo))} + +<===> no_alpha/multi_argument_var/2_of_2/output.css +a { + b: hsla(0 var(--foo)); +} + +<===> +================================================================================ +<===> no_alpha/multi_argument_var/1_of_1/input.scss +a {b: hsla(var(--foo))} + +<===> no_alpha/multi_argument_var/1_of_1/output.css +a { + b: hsla(var(--foo)); +} + +<===> +================================================================================ +<===> alpha/calc/arg_1/input.scss +a {b: hsla(calc(1) 2% 3% / 0.4)} + +<===> alpha/calc/arg_1/output.css +a { + b: hsla(calc(1), 2%, 3%, 0.4); +} + +<===> +================================================================================ +<===> alpha/calc/arg_2/input.scss +a {b: hsla(1 calc(2%) 3% / 0.4)} + +<===> alpha/calc/arg_2/output.css +a { + b: hsla(1, calc(2%), 3%, 0.4); +} + +<===> +================================================================================ +<===> alpha/calc/arg_3/input.scss +a {b: hsla(1 2% calc(3%) / 0.4)} + +<===> alpha/calc/arg_3/output.css +a { + b: hsla(1 2% calc(3%)/0.4); +} + +<===> +================================================================================ +<===> alpha/calc/arg_4/input.scss +a {b: hsla(1 2% 3% / calc(0.4))} + +<===> alpha/calc/arg_4/output.css +a { + b: hsla(1 2% 3%/calc(0.4)); +} + +<===> +================================================================================ +<===> alpha/var/arg_1/input.scss +a {b: hsla(var(--foo) 2% 3% / 0.4)} + +<===> alpha/var/arg_1/output.css +a { + b: hsla(var(--foo), 2%, 3%, 0.4); +} + +<===> +================================================================================ +<===> alpha/var/arg_2/input.scss +a {b: hsla(1 var(--foo) 3% / 0.4)} + +<===> alpha/var/arg_2/output.css +a { + b: hsla(1, var(--foo), 3%, 0.4); +} + +<===> +================================================================================ +<===> alpha/var/arg_3/input.scss +a {b: hsla(1 2% var(--foo) / 0.4)} + +<===> alpha/var/arg_3/output.css +a { + b: hsla(1 2% var(--foo)/0.4); +} + +<===> +================================================================================ +<===> alpha/var/arg_4/input.scss +a {b: hsla(1 2% 3% / var(--foo))} + +<===> alpha/var/arg_4/output.css +a { + b: hsla(1 2% 3%/var(--foo)); +} + +<===> +================================================================================ +<===> alpha/env/arg_1/input.scss +a {b: hsla(env(--foo) 2% 3% / 0.4)} + +<===> alpha/env/arg_1/output.css +a { + b: hsla(env(--foo), 2%, 3%, 0.4); +} + +<===> +================================================================================ +<===> alpha/env/arg_2/input.scss +a {b: hsla(1 env(--foo) 3% / 0.4)} + +<===> alpha/env/arg_2/output.css +a { + b: hsla(1, env(--foo), 3%, 0.4); +} + +<===> +================================================================================ +<===> alpha/env/arg_3/input.scss +a {b: hsla(1 2% env(--foo) / 0.4)} + +<===> alpha/env/arg_3/output.css +a { + b: hsla(1 2% env(--foo)/0.4); +} + +<===> +================================================================================ +<===> alpha/env/arg_4/input.scss +a {b: hsla(1 2% 3% / env(--foo))} + +<===> alpha/env/arg_4/output.css +a { + b: hsla(1 2% 3%/env(--foo)); +} + +<===> +================================================================================ +<===> alpha/min/arg_1/input.scss +a {b: hsla(min(1) 2% 3% / 0.4)} + +<===> alpha/min/arg_1/output.css +a { + b: hsla(min(1), 2%, 3%, 0.4); +} + +<===> +================================================================================ +<===> alpha/min/arg_2/input.scss +a {b: hsla(1 min(2%) 3% / 0.4)} + +<===> alpha/min/arg_2/output.css +a { + b: hsla(1, min(2%), 3%, 0.4); +} + +<===> +================================================================================ +<===> alpha/min/arg_3/input.scss +a {b: hsla(1 2% min(3%) / 0.4)} + +<===> alpha/min/arg_3/output.css +a { + b: hsla(1 2% min(3%)/0.4); +} + +<===> +================================================================================ +<===> alpha/min/arg_4/input.scss +a {b: hsla(1 2% 3% / min(0.4))} + +<===> alpha/min/arg_4/output.css +a { + b: hsla(1 2% 3%/min(0.4)); +} + +<===> +================================================================================ +<===> alpha/max/arg_1/input.scss +a {b: hsla(max(1) 2% 3% / 0.4)} + +<===> alpha/max/arg_1/output.css +a { + b: hsla(max(1), 2%, 3%, 0.4); +} + +<===> +================================================================================ +<===> alpha/max/arg_2/input.scss +a {b: hsla(1 max(2%) 3% / 0.4)} + +<===> alpha/max/arg_2/output.css +a { + b: hsla(1, max(2%), 3%, 0.4); +} + +<===> +================================================================================ +<===> alpha/max/arg_3/input.scss +a {b: hsla(1 2% max(3%) / 0.4)} + +<===> alpha/max/arg_3/output.css +a { + b: hsla(1 2% max(3%)/0.4); +} + +<===> +================================================================================ +<===> alpha/max/arg_4/input.scss +a {b: hsla(1 2% 3% / max(0.4))} + +<===> alpha/max/arg_4/output.css +a { + b: hsla(1 2% 3%/max(0.4)); +} + +<===> +================================================================================ +<===> alpha/multi_argument_var/1_of_2/input.scss +// var() is substituted before parsing, so it may contain multiple arguments. +a {b: hsla(var(--foo) 50% / 0.4)} + +<===> alpha/multi_argument_var/1_of_2/output.css +a { + b: hsla(var(--foo) 50%/0.4); +} + +<===> +================================================================================ +<===> alpha/multi_argument_var/2_of_2/input.scss +a {b: hsla(0 var(--foo) / 0.4)} + +<===> alpha/multi_argument_var/2_of_2/output.css +a { + b: hsla(0 var(--foo)/0.4); +} + +<===> +================================================================================ +<===> alpha/multi_argument_var/1_of_1/input.scss +a {b: hsla(var(--foo) / 0.4)} + +<===> alpha/multi_argument_var/1_of_1/output.css +a { + b: hsla(var(--foo)/0.4); } diff --git a/spec/core_functions/color/hsla/three_args/basic.hrx b/spec/core_functions/color/hsla/three_args/basic.hrx deleted file mode 100644 index 462f47878d..0000000000 --- a/spec/core_functions/color/hsla/three_args/basic.hrx +++ /dev/null @@ -1,635 +0,0 @@ -<===> input.scss -// These test cases come from two official W3C test suites: -// -// * https://www.w3.org/Style/CSS/Test/CSS3/Color/20070927/html4/t040204-hsl-h-rotating-b.htm -// * https://www.w3.org/Style/CSS/Test/CSS3/Color/current/html4/t040204-hsl-values-b.htm - -hue { - @mixin test-hues($name, $hues...) { - #{$name} { - @each $hue in $hues { - hue-#{$hue}: hsla($hue, 100%, 50%); - } - } - } - - @include test-hues("red", 0, -360, 260, 6120); - @include test-hues("yellow", 60, -300, 420, -9660); - @include test-hues("green", 120, -240, 480, 99840); - @include test-hues("cyan", 180, -180, 540, -900); - @include test-hues("blue", 240, -120, 600, -104880); - @include test-hues("purple", 300, -60, 660, 2820); -} - -red-to-green { - step-1: hsla(0, 100%, 50%); - step-2: hsla(12, 100%, 50%); - step-3: hsla(24, 100%, 50%); - step-4: hsla(36, 100%, 50%); - step-5: hsla(48, 100%, 50%); - step-6: hsla(60, 100%, 50%); - step-7: hsla(72, 100%, 50%); - step-8: hsla(84, 100%, 50%); - step-9: hsla(96, 100%, 50%); - step-10: hsla(108, 100%, 50%); - step-11: hsla(120, 100%, 50%); -} - -green-to-blue { - step-1: hsla(120, 100%, 50%); - step-2: hsla(132, 100%, 50%); - step-3: hsla(144, 100%, 50%); - step-4: hsla(156, 100%, 50%); - step-5: hsla(168, 100%, 50%); - step-6: hsla(180, 100%, 50%); - step-7: hsla(192, 100%, 50%); - step-8: hsla(204, 100%, 50%); - step-9: hsla(216, 100%, 50%); - step-10: hsla(228, 100%, 50%); - step-11: hsla(240, 100%, 50%); -} - -blue-to-red { - step-1: hsla(240, 100%, 50%); - step-2: hsla(252, 100%, 50%); - step-3: hsla(264, 100%, 50%); - step-4: hsla(276, 100%, 50%); - step-5: hsla(288, 100%, 50%); - step-6: hsla(300, 100%, 50%); - step-7: hsla(312, 100%, 50%); - step-8: hsla(324, 100%, 50%); - step-9: hsla(336, 100%, 50%); - step-10: hsla(348, 100%, 50%); - step-11: hsla(360, 100%, 50%); -} - -gray-to { - red { - step-1: hsla(0, 20%, 50%); - step-2: hsla(0, 60%, 50%); - step-3: hsla(0, 100%, 50%); - } - - yellow { - step-1: hsla(60, 20%, 50%); - step-2: hsla(60, 60%, 50%); - step-3: hsla(60, 100%, 50%); - } - - green { - step-1: hsla(120, 20%, 50%); - step-2: hsla(120, 60%, 50%); - step-3: hsla(120, 100%, 50%); - } - - cyan { - step-1: hsla(180, 20%, 50%); - step-2: hsla(180, 60%, 50%); - step-3: hsla(180, 100%, 50%); - } - - blue { - step-1: hsla(240, 20%, 50%); - step-2: hsla(240, 60%, 50%); - step-3: hsla(240, 100%, 50%); - } - - purple { - step-1: hsla(300, 20%, 50%); - step-2: hsla(300, 60%, 50%); - step-3: hsla(300, 100%, 50%); - } -} - -black-to-white-through { - red { - step-1: hsla(0, 100%, 0%); - step-2: hsla(0, 100%, 10%); - step-3: hsla(0, 100%, 20%); - step-4: hsla(0, 100%, 30%); - step-5: hsla(0, 100%, 40%); - step-6: hsla(0, 100%, 50%); - step-7: hsla(0, 100%, 60%); - step-8: hsla(0, 100%, 70%); - step-9: hsla(0, 100%, 80%); - step-10: hsla(0, 100%, 90%); - step-11: hsla(0, 100%, 100%); - } - - yellow { - step-1: hsla(60, 100%, 0%); - step-2: hsla(60, 100%, 10%); - step-3: hsla(60, 100%, 20%); - step-4: hsla(60, 100%, 30%); - step-5: hsla(60, 100%, 40%); - step-6: hsla(60, 100%, 50%); - step-7: hsla(60, 100%, 60%); - step-8: hsla(60, 100%, 70%); - step-9: hsla(60, 100%, 80%); - step-10: hsla(60, 100%, 90%); - step-11: hsla(60, 100%, 100%); - } - - green { - step-1: hsla(120, 100%, 0%); - step-2: hsla(120, 100%, 10%); - step-3: hsla(120, 100%, 20%); - step-4: hsla(120, 100%, 30%); - step-5: hsla(120, 100%, 40%); - step-6: hsla(120, 100%, 50%); - step-7: hsla(120, 100%, 60%); - step-8: hsla(120, 100%, 70%); - step-9: hsla(120, 100%, 80%); - step-10: hsla(120, 100%, 90%); - step-11: hsla(120, 100%, 100%); - } - - cyan { - step-1: hsla(180, 100%, 0%); - step-2: hsla(180, 100%, 10%); - step-3: hsla(180, 100%, 20%); - step-4: hsla(180, 100%, 30%); - step-5: hsla(180, 100%, 40%); - step-6: hsla(180, 100%, 50%); - step-7: hsla(180, 100%, 60%); - step-8: hsla(180, 100%, 70%); - step-9: hsla(180, 100%, 80%); - step-10: hsla(180, 100%, 90%); - step-11: hsla(180, 100%, 100%); - } - - blue { - step-1: hsla(240, 100%, 0%); - step-2: hsla(240, 100%, 10%); - step-3: hsla(240, 100%, 20%); - step-4: hsla(240, 100%, 30%); - step-5: hsla(240, 100%, 40%); - step-6: hsla(240, 100%, 50%); - step-7: hsla(240, 100%, 60%); - step-8: hsla(240, 100%, 70%); - step-9: hsla(240, 100%, 80%); - step-10: hsla(240, 100%, 90%); - step-11: hsla(240, 100%, 100%); - } - - purple { - step-1: hsla(300, 100%, 0%); - step-2: hsla(300, 100%, 10%); - step-3: hsla(300, 100%, 20%); - step-4: hsla(300, 100%, 30%); - step-5: hsla(300, 100%, 40%); - step-6: hsla(300, 100%, 50%); - step-7: hsla(300, 100%, 60%); - step-8: hsla(300, 100%, 70%); - step-9: hsla(300, 100%, 80%); - step-10: hsla(300, 100%, 90%); - step-11: hsla(300, 100%, 100%); - } -} - -// The W3C tests cover clamped hue, but not clamped saturation or lightness. -clamped { - saturation-above: hsla(0, 500%, 50%); - saturation-below: hsla(0, -100%, 50%); - lightness-above: hsla(0, 100%, 500%); - lightness-below: hsla(0, 100%, -100%); -} - -units { - hue-deg: hsla(0deg, 100%, 50%); - saturation-unitless: hsla(0, 50, 50%); - lightness-unitless: hsla(0, 100%, 50); -} - -named { - x: hsla($hue: 0, $saturation: 100%, $lightness: 50%); -} - -<===> output.css -hue red { - hue-0: red; - hue--360: red; - hue-260: #5500ff; - hue-6120: red; -} -hue yellow { - hue-60: yellow; - hue--300: yellow; - hue-420: yellow; - hue--9660: yellow; -} -hue green { - hue-120: lime; - hue--240: lime; - hue-480: lime; - hue-99840: lime; -} -hue cyan { - hue-180: aqua; - hue--180: aqua; - hue-540: aqua; - hue--900: aqua; -} -hue blue { - hue-240: blue; - hue--120: blue; - hue-600: blue; - hue--104880: blue; -} -hue purple { - hue-300: fuchsia; - hue--60: fuchsia; - hue-660: fuchsia; - hue-2820: fuchsia; -} - -red-to-green { - step-1: red; - step-2: #ff3300; - step-3: #ff6600; - step-4: #ff9900; - step-5: #ffcc00; - step-6: yellow; - step-7: #ccff00; - step-8: #99ff00; - step-9: #66ff00; - step-10: #33ff00; - step-11: lime; -} - -green-to-blue { - step-1: lime; - step-2: #00ff33; - step-3: #00ff66; - step-4: #00ff99; - step-5: #00ffcc; - step-6: aqua; - step-7: #00ccff; - step-8: #0099ff; - step-9: #0066ff; - step-10: #0033ff; - step-11: blue; -} - -blue-to-red { - step-1: blue; - step-2: #3300ff; - step-3: #6600ff; - step-4: #9900ff; - step-5: #cc00ff; - step-6: fuchsia; - step-7: #ff00cc; - step-8: #ff0099; - step-9: #ff0066; - step-10: #ff0033; - step-11: red; -} - -gray-to red { - step-1: #996666; - step-2: #cc3333; - step-3: red; -} -gray-to yellow { - step-1: #999966; - step-2: #cccc33; - step-3: yellow; -} -gray-to green { - step-1: #669966; - step-2: #33cc33; - step-3: lime; -} -gray-to cyan { - step-1: #669999; - step-2: #33cccc; - step-3: aqua; -} -gray-to blue { - step-1: #666699; - step-2: #3333cc; - step-3: blue; -} -gray-to purple { - step-1: #996699; - step-2: #cc33cc; - step-3: fuchsia; -} - -black-to-white-through red { - step-1: black; - step-2: #330000; - step-3: #660000; - step-4: #990000; - step-5: #cc0000; - step-6: red; - step-7: #ff3333; - step-8: #ff6666; - step-9: #ff9999; - step-10: #ffcccc; - step-11: white; -} -black-to-white-through yellow { - step-1: black; - step-2: #333300; - step-3: #666600; - step-4: #999900; - step-5: #cccc00; - step-6: yellow; - step-7: #ffff33; - step-8: #ffff66; - step-9: #ffff99; - step-10: #ffffcc; - step-11: white; -} -black-to-white-through green { - step-1: black; - step-2: #003300; - step-3: #006600; - step-4: #009900; - step-5: #00cc00; - step-6: lime; - step-7: #33ff33; - step-8: #66ff66; - step-9: #99ff99; - step-10: #ccffcc; - step-11: white; -} -black-to-white-through cyan { - step-1: black; - step-2: #003333; - step-3: #006666; - step-4: #009999; - step-5: #00cccc; - step-6: aqua; - step-7: #33ffff; - step-8: #66ffff; - step-9: #99ffff; - step-10: #ccffff; - step-11: white; -} -black-to-white-through blue { - step-1: black; - step-2: #000033; - step-3: #000066; - step-4: #000099; - step-5: #0000cc; - step-6: blue; - step-7: #3333ff; - step-8: #6666ff; - step-9: #9999ff; - step-10: #ccccff; - step-11: white; -} -black-to-white-through purple { - step-1: black; - step-2: #330033; - step-3: #660066; - step-4: #990099; - step-5: #cc00cc; - step-6: fuchsia; - step-7: #ff33ff; - step-8: #ff66ff; - step-9: #ff99ff; - step-10: #ffccff; - step-11: white; -} - -clamped { - saturation-above: red; - saturation-below: gray; - lightness-above: white; - lightness-below: black; -} - -units { - hue-deg: red; - saturation-unitless: #bf4040; - lightness-unitless: red; -} - -named { - x: red; -} - -<===> output-libsass.css -hue red { - hue-0: red; - hue--360: red; - hue-260: #5500ff; - hue-6120: red; -} - -hue yellow { - hue-60: yellow; - hue--300: yellow; - hue-420: yellow; - hue--9660: yellow; -} - -hue green { - hue-120: lime; - hue--240: lime; - hue-480: lime; - hue-99840: lime; -} - -hue cyan { - hue-180: cyan; - hue--180: cyan; - hue-540: cyan; - hue--900: cyan; -} - -hue blue { - hue-240: blue; - hue--120: blue; - hue-600: blue; - hue--104880: blue; -} - -hue purple { - hue-300: magenta; - hue--60: magenta; - hue-660: magenta; - hue-2820: magenta; -} - -red-to-green { - step-1: red; - step-2: #ff3300; - step-3: #ff6600; - step-4: #ff9900; - step-5: #ffcc00; - step-6: yellow; - step-7: #ccff00; - step-8: #99ff00; - step-9: #66ff00; - step-10: #33ff00; - step-11: lime; -} - -green-to-blue { - step-1: lime; - step-2: #00ff33; - step-3: #00ff66; - step-4: #00ff99; - step-5: #00ffcc; - step-6: cyan; - step-7: #00ccff; - step-8: #0099ff; - step-9: #0066ff; - step-10: #0033ff; - step-11: blue; -} - -blue-to-red { - step-1: blue; - step-2: #3300ff; - step-3: #6600ff; - step-4: #9900ff; - step-5: #cc00ff; - step-6: magenta; - step-7: #ff00cc; - step-8: #ff0099; - step-9: #ff0066; - step-10: #ff0033; - step-11: red; -} - -gray-to red { - step-1: #996666; - step-2: #cc3333; - step-3: red; -} - -gray-to yellow { - step-1: #999966; - step-2: #cccc33; - step-3: yellow; -} - -gray-to green { - step-1: #669966; - step-2: #33cc33; - step-3: lime; -} - -gray-to cyan { - step-1: #669999; - step-2: #33cccc; - step-3: cyan; -} - -gray-to blue { - step-1: #666699; - step-2: #3333cc; - step-3: blue; -} - -gray-to purple { - step-1: #996699; - step-2: #cc33cc; - step-3: magenta; -} - -black-to-white-through red { - step-1: black; - step-2: #330000; - step-3: #660000; - step-4: #990000; - step-5: #cc0000; - step-6: red; - step-7: #ff3333; - step-8: #ff6666; - step-9: #ff9999; - step-10: #ffcccc; - step-11: white; -} - -black-to-white-through yellow { - step-1: black; - step-2: #333300; - step-3: #666600; - step-4: #999900; - step-5: #cccc00; - step-6: yellow; - step-7: #ffff33; - step-8: #ffff66; - step-9: #ffff99; - step-10: #ffffcc; - step-11: white; -} - -black-to-white-through green { - step-1: black; - step-2: #003300; - step-3: #006600; - step-4: #009900; - step-5: #00cc00; - step-6: lime; - step-7: #33ff33; - step-8: #66ff66; - step-9: #99ff99; - step-10: #ccffcc; - step-11: white; -} - -black-to-white-through cyan { - step-1: black; - step-2: #003333; - step-3: #006666; - step-4: #009999; - step-5: #00cccc; - step-6: cyan; - step-7: #33ffff; - step-8: #66ffff; - step-9: #99ffff; - step-10: #ccffff; - step-11: white; -} - -black-to-white-through blue { - step-1: black; - step-2: #000033; - step-3: #000066; - step-4: #000099; - step-5: #0000cc; - step-6: blue; - step-7: #3333ff; - step-8: #6666ff; - step-9: #9999ff; - step-10: #ccccff; - step-11: white; -} - -black-to-white-through purple { - step-1: black; - step-2: #330033; - step-3: #660066; - step-4: #990099; - step-5: #cc00cc; - step-6: magenta; - step-7: #ff33ff; - step-8: #ff66ff; - step-9: #ff99ff; - step-10: #ffccff; - step-11: white; -} - -clamped { - saturation-above: red; - saturation-below: gray; - lightness-above: white; - lightness-below: black; -} - -units { - hue-deg: red; - saturation-unitless: #bf4040; - lightness-unitless: red; -} - -named { - x: red; -} diff --git a/spec/core_functions/color/hsla/three_args/clamped.hrx b/spec/core_functions/color/hsla/three_args/clamped.hrx new file mode 100644 index 0000000000..dc638d6820 --- /dev/null +++ b/spec/core_functions/color/hsla/three_args/clamped.hrx @@ -0,0 +1,42 @@ +<===> README.md +The W3C tests cover clamped hue, but not clamped saturation or lightness. + +<===> +================================================================================ +<===> saturation/above/input.scss +a {b: hsla(0, 500%, 50%)} + +<===> saturation/above/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> saturation/below/input.scss +a {b: hsla(0, -100%, 50%)} + +<===> saturation/below/output.css +a { + b: gray; +} + +<===> +================================================================================ +<===> lightness/above/input.scss +a {b: hsla(0, 100%, 500%)} + +<===> lightness/above/output.css +a { + b: white; +} + +<===> +================================================================================ +<===> lightness/below/input.scss +a {b: hsla(0, 100%, -100%)} + +<===> lightness/below/output.css +a { + b: black; +} diff --git a/spec/core_functions/color/hsla/three_args/named.hrx b/spec/core_functions/color/hsla/three_args/named.hrx new file mode 100644 index 0000000000..33d0fa15ab --- /dev/null +++ b/spec/core_functions/color/hsla/three_args/named.hrx @@ -0,0 +1,10 @@ +<===> +================================================================================ +<===> input.scss +a {b: hsla($hue: 0, $saturation: 100%, $lightness: 50%)} + +<===> output.css +a { + b: red; +} + diff --git a/spec/core_functions/color/hsla/three_args/units.hrx b/spec/core_functions/color/hsla/three_args/units.hrx new file mode 100644 index 0000000000..72dd178790 --- /dev/null +++ b/spec/core_functions/color/hsla/three_args/units.hrx @@ -0,0 +1,29 @@ +<===> +================================================================================ +<===> hue/deg/input.scss +a {b: hsla(0deg, 100%, 50%)} + +<===> hue/deg/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> saturation/unitless/input.scss +a {b: hsla(0, 50, 50%)} + +<===> saturation/unitless/output.css +a { + b: #bf4040; +} + +<===> +================================================================================ +<===> lightness/unitless/input.scss +a {b: hsla(0, 100%, 50)} + +<===> lightness/unitless/output.css +a { + b: red; +} diff --git a/spec/core_functions/color/hsla/three_args/w3c.hrx b/spec/core_functions/color/hsla/three_args/w3c.hrx new file mode 100644 index 0000000000..b188635710 --- /dev/null +++ b/spec/core_functions/color/hsla/three_args/w3c.hrx @@ -0,0 +1,454 @@ +<===> README.md +These test cases come from two official W3C test suites: + +* https://www.w3.org/Style/CSS/Test/CSS3/Color/20070927/html4/t040204-hsl-h-rotating-b.htm +* https://www.w3.org/Style/CSS/Test/CSS3/Color/current/html4/t040204-hsl-values-b.htm + +Because these spces have so many repetitive cases, they violate the normal +one-test-case-per-suite rule. + +<===> +================================================================================ +<===> hue/input.scss +@mixin test-hues($name, $hues...) { + #{$name} { + @each $hue in $hues { + hue-#{$hue}: hsla($hue, 100%, 50%); + } + } +} + +@include test-hues("red", 0, -360, 360, 6120); +@include test-hues("yellow", 60, -300, 420, -9660); +@include test-hues("green", 120, -240, 480, 99840); +@include test-hues("cyan", 180, -180, 540, -900); +@include test-hues("blue", 240, -120, 600, -104880); +@include test-hues("purple", 300, -60, 660, 2820); + +<===> hue/output.css +red { + hue-0: red; + hue--360: red; + hue-360: red; + hue-6120: red; +} + +yellow { + hue-60: yellow; + hue--300: yellow; + hue-420: yellow; + hue--9660: yellow; +} + +green { + hue-120: lime; + hue--240: lime; + hue-480: lime; + hue-99840: lime; +} + +cyan { + hue-180: aqua; + hue--180: aqua; + hue-540: aqua; + hue--900: aqua; +} + +blue { + hue-240: blue; + hue--120: blue; + hue-600: blue; + hue--104880: blue; +} + +purple { + hue-300: fuchsia; + hue--60: fuchsia; + hue-660: fuchsia; + hue-2820: fuchsia; +} + +<===> +================================================================================ +<===> red_to_green/input.scss +a { + step-1: hsla(0, 100%, 50%); + step-2: hsla(12, 100%, 50%); + step-3: hsla(24, 100%, 50%); + step-4: hsla(36, 100%, 50%); + step-5: hsla(48, 100%, 50%); + step-6: hsla(60, 100%, 50%); + step-7: hsla(72, 100%, 50%); + step-8: hsla(84, 100%, 50%); + step-9: hsla(96, 100%, 50%); + step-10: hsla(108, 100%, 50%); + step-11: hsla(120, 100%, 50%); +} + +<===> red_to_green/output.css +a { + step-1: red; + step-2: #ff3300; + step-3: #ff6600; + step-4: #ff9900; + step-5: #ffcc00; + step-6: yellow; + step-7: #ccff00; + step-8: #99ff00; + step-9: #66ff00; + step-10: #33ff00; + step-11: lime; +} + +<===> +================================================================================ +<===> green_to_blue/input.scss +a { + step-1: hsla(120, 100%, 50%); + step-2: hsla(132, 100%, 50%); + step-3: hsla(144, 100%, 50%); + step-4: hsla(156, 100%, 50%); + step-5: hsla(168, 100%, 50%); + step-6: hsla(180, 100%, 50%); + step-7: hsla(192, 100%, 50%); + step-8: hsla(204, 100%, 50%); + step-9: hsla(216, 100%, 50%); + step-10: hsla(228, 100%, 50%); + step-11: hsla(240, 100%, 50%); +} + +<===> green_to_blue/output.css +a { + step-1: lime; + step-2: #00ff33; + step-3: #00ff66; + step-4: #00ff99; + step-5: #00ffcc; + step-6: aqua; + step-7: #00ccff; + step-8: #0099ff; + step-9: #0066ff; + step-10: #0033ff; + step-11: blue; +} + +<===> +================================================================================ +<===> blue_to_red/input.scss +a { + step-1: hsla(240, 100%, 50%); + step-2: hsla(252, 100%, 50%); + step-3: hsla(264, 100%, 50%); + step-4: hsla(276, 100%, 50%); + step-5: hsla(288, 100%, 50%); + step-6: hsla(300, 100%, 50%); + step-7: hsla(312, 100%, 50%); + step-8: hsla(324, 100%, 50%); + step-9: hsla(336, 100%, 50%); + step-10: hsla(348, 100%, 50%); + step-11: hsla(360, 100%, 50%); +} + +<===> blue_to_red/output.css +a { + step-1: blue; + step-2: #3300ff; + step-3: #6600ff; + step-4: #9900ff; + step-5: #cc00ff; + step-6: fuchsia; + step-7: #ff00cc; + step-8: #ff0099; + step-9: #ff0066; + step-10: #ff0033; + step-11: red; +} + +<===> +================================================================================ +<===> gray_to/red/input.scss +a { + step-1: hsla(0, 20%, 50%); + step-2: hsla(0, 60%, 50%); + step-3: hsla(0, 100%, 50%); +} + +<===> gray_to/red/output.css +a { + step-1: #996666; + step-2: #cc3333; + step-3: red; +} + +<===> +================================================================================ +<===> gray_to/yellow/input.scss +a { + step-1: hsla(60, 20%, 50%); + step-2: hsla(60, 60%, 50%); + step-3: hsla(60, 100%, 50%); +} + +<===> gray_to/yellow/output.css +a { + step-1: #999966; + step-2: #cccc33; + step-3: yellow; +} + +<===> +================================================================================ +<===> gray_to/green/input.scss +a { + step-1: hsla(120, 20%, 50%); + step-2: hsla(120, 60%, 50%); + step-3: hsla(120, 100%, 50%); +} + +<===> gray_to/green/output.css +a { + step-1: #669966; + step-2: #33cc33; + step-3: lime; +} + +<===> +================================================================================ +<===> gray_to/cyan/input.scss +a { + step-1: hsla(180, 20%, 50%); + step-2: hsla(180, 60%, 50%); + step-3: hsla(180, 100%, 50%); +} + +<===> gray_to/cyan/output.css +a { + step-1: #669999; + step-2: #33cccc; + step-3: aqua; +} + +<===> +================================================================================ +<===> gray_to/blue/input.scss +a { + step-1: hsla(240, 20%, 50%); + step-2: hsla(240, 60%, 50%); + step-3: hsla(240, 100%, 50%); +} + +<===> gray_to/blue/output.css +a { + step-1: #666699; + step-2: #3333cc; + step-3: blue; +} + +<===> +================================================================================ +<===> gray_to/purple/input.scss +a { + step-1: hsla(300, 20%, 50%); + step-2: hsla(300, 60%, 50%); + step-3: hsla(300, 100%, 50%); +} + +<===> gray_to/purple/output.css +a { + step-1: #996699; + step-2: #cc33cc; + step-3: fuchsia; +} + +<===> +================================================================================ +<===> black_to_white_through/red/input.scss +a { + step-1: hsla(0, 100%, 0%); + step-2: hsla(0, 100%, 10%); + step-3: hsla(0, 100%, 20%); + step-4: hsla(0, 100%, 30%); + step-5: hsla(0, 100%, 40%); + step-6: hsla(0, 100%, 50%); + step-7: hsla(0, 100%, 60%); + step-8: hsla(0, 100%, 70%); + step-9: hsla(0, 100%, 80%); + step-10: hsla(0, 100%, 90%); + step-11: hsla(0, 100%, 100%); +} + +<===> black_to_white_through/red/output.css +a { + step-1: black; + step-2: #330000; + step-3: #660000; + step-4: #990000; + step-5: #cc0000; + step-6: red; + step-7: #ff3333; + step-8: #ff6666; + step-9: #ff9999; + step-10: #ffcccc; + step-11: white; +} + +<===> +================================================================================ +<===> black_to_white_through/yellow/input.scss +a { + step-1: hsla(60, 100%, 0%); + step-2: hsla(60, 100%, 10%); + step-3: hsla(60, 100%, 20%); + step-4: hsla(60, 100%, 30%); + step-5: hsla(60, 100%, 40%); + step-6: hsla(60, 100%, 50%); + step-7: hsla(60, 100%, 60%); + step-8: hsla(60, 100%, 70%); + step-9: hsla(60, 100%, 80%); + step-10: hsla(60, 100%, 90%); + step-11: hsla(60, 100%, 100%); +} + +<===> black_to_white_through/yellow/output.css +a { + step-1: black; + step-2: #333300; + step-3: #666600; + step-4: #999900; + step-5: #cccc00; + step-6: yellow; + step-7: #ffff33; + step-8: #ffff66; + step-9: #ffff99; + step-10: #ffffcc; + step-11: white; +} + +<===> +================================================================================ +<===> black_to_white_through/green/input.scss +a { + step-1: hsla(120, 100%, 0%); + step-2: hsla(120, 100%, 10%); + step-3: hsla(120, 100%, 20%); + step-4: hsla(120, 100%, 30%); + step-5: hsla(120, 100%, 40%); + step-6: hsla(120, 100%, 50%); + step-7: hsla(120, 100%, 60%); + step-8: hsla(120, 100%, 70%); + step-9: hsla(120, 100%, 80%); + step-10: hsla(120, 100%, 90%); + step-11: hsla(120, 100%, 100%); +} + +<===> black_to_white_through/green/output.css +a { + step-1: black; + step-2: #003300; + step-3: #006600; + step-4: #009900; + step-5: #00cc00; + step-6: lime; + step-7: #33ff33; + step-8: #66ff66; + step-9: #99ff99; + step-10: #ccffcc; + step-11: white; +} + +<===> +================================================================================ +<===> black_to_white_through/cyan/input.scss +a { + step-1: hsla(180, 100%, 0%); + step-2: hsla(180, 100%, 10%); + step-3: hsla(180, 100%, 20%); + step-4: hsla(180, 100%, 30%); + step-5: hsla(180, 100%, 40%); + step-6: hsla(180, 100%, 50%); + step-7: hsla(180, 100%, 60%); + step-8: hsla(180, 100%, 70%); + step-9: hsla(180, 100%, 80%); + step-10: hsla(180, 100%, 90%); + step-11: hsla(180, 100%, 100%); +} + +<===> black_to_white_through/cyan/output.css +a { + step-1: black; + step-2: #003333; + step-3: #006666; + step-4: #009999; + step-5: #00cccc; + step-6: aqua; + step-7: #33ffff; + step-8: #66ffff; + step-9: #99ffff; + step-10: #ccffff; + step-11: white; +} + +<===> +================================================================================ +<===> black_to_white_through/blue/input.scss +a { + step-1: hsla(240, 100%, 0%); + step-2: hsla(240, 100%, 10%); + step-3: hsla(240, 100%, 20%); + step-4: hsla(240, 100%, 30%); + step-5: hsla(240, 100%, 40%); + step-6: hsla(240, 100%, 50%); + step-7: hsla(240, 100%, 60%); + step-8: hsla(240, 100%, 70%); + step-9: hsla(240, 100%, 80%); + step-10: hsla(240, 100%, 90%); + step-11: hsla(240, 100%, 100%); +} + +<===> black_to_white_through/blue/output.css +a { + step-1: black; + step-2: #000033; + step-3: #000066; + step-4: #000099; + step-5: #0000cc; + step-6: blue; + step-7: #3333ff; + step-8: #6666ff; + step-9: #9999ff; + step-10: #ccccff; + step-11: white; +} + +<===> +================================================================================ +<===> black_to_white_through/purple/input.scss +a { + step-1: hsla(300, 100%, 0%); + step-2: hsla(300, 100%, 10%); + step-3: hsla(300, 100%, 20%); + step-4: hsla(300, 100%, 30%); + step-5: hsla(300, 100%, 40%); + step-6: hsla(300, 100%, 50%); + step-7: hsla(300, 100%, 60%); + step-8: hsla(300, 100%, 70%); + step-9: hsla(300, 100%, 80%); + step-10: hsla(300, 100%, 90%); + step-11: hsla(300, 100%, 100%); +} + +<===> black_to_white_through/purple/output.css +a { + step-1: black; + step-2: #330033; + step-3: #660066; + step-4: #990099; + step-5: #cc00cc; + step-6: fuchsia; + step-7: #ff33ff; + step-8: #ff66ff; + step-9: #ff99ff; + step-10: #ffccff; + step-11: white; +} + diff --git a/spec/core_functions/color/hsla/two_args.hrx b/spec/core_functions/color/hsla/two_args.hrx deleted file mode 100644 index cc2e3b48d7..0000000000 --- a/spec/core_functions/color/hsla/two_args.hrx +++ /dev/null @@ -1,43 +0,0 @@ -<===> input.scss -opaque-to { - opaque: hsla(#123, 1); - partial: hsla(#123, 0.5); - transparent: hsla(#123, 0); -} - -partial-to { - $color: hsla(0, 0, 255, 0.3); - opaque: hsla($color, 1); - partial: hsla($color, 0.5); - transparent: hsla($color, 0); -} - -transparent-to { - opaque: hsla(transparent, 1); - partial: hsla(transparent, 0.5); - transparent: hsla(transparent, 0); -} - -clamped { - opaque: hsla(#123, 1.1); - transparent: hsla(#123, -0.1); -} - -named { - x: hsla($color: #123, $alpha: 0.5); -} - -<===> error -Error: Missing argument $lightness. - , -2 | opaque: hsla(#123, 1); - | ^^^^^^^^^^^^^ - ' - input.scss 2:11 root stylesheet - -<===> error-libsass -Error: Function hsla is missing argument $lightness. - on line 2 of /sass/spec/core_functions/color/hsla/with_color/input.scss ->> opaque: hsla(#123, 1); - - ----------^ diff --git a/spec/core_functions/color/rgb/four_args/alpha.hrx b/spec/core_functions/color/rgb/four_args/alpha.hrx new file mode 100644 index 0000000000..c13f983753 --- /dev/null +++ b/spec/core_functions/color/rgb/four_args/alpha.hrx @@ -0,0 +1,98 @@ +<===> percent/negative/input.scss +a {b: rgb(0, 0, 0, -10%)} + +<===> percent/negative/output.css +a { + b: rgba(0, 0, 0, 0); +} + +<===> +================================================================================ +<===> percent/min/input.scss +a {b: rgb(0, 0, 0, 0%)} + +<===> percent/min/output.css +a { + b: rgba(0, 0, 0, 0); +} + +<===> +================================================================================ +<===> percent/positive/input.scss +a {b: rgb(0, 0, 0, 45.6%)} + +<===> percent/positive/output.css +a { + b: rgba(0, 0, 0, 0.456); +} + +<===> +================================================================================ +<===> percent/max/input.scss +a {b: rgb(0, 0, 0, 100%)} + +<===> percent/max/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> percent/above/max/input.scss +a {b: rgb(0, 0, 0, 250%)} + +<===> percent/above/max/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> unitless/negative/input.scss +a {b: rgb(0, 0, 0, -10)} + +<===> unitless/negative/output.css +a { + b: rgba(0, 0, 0, 0); +} + +<===> +================================================================================ +<===> unitless/min/input.scss +a {b: rgb(0, 0, 0, 0)} + +<===> unitless/min/output.css +a { + b: rgba(0, 0, 0, 0); +} + +<===> +================================================================================ +<===> unitless/positive/input.scss +a {b: rgb(0, 0, 0, 0.456)} + +<===> unitless/positive/output.css +a { + b: rgba(0, 0, 0, 0.456); +} + +<===> +================================================================================ +<===> unitless/max/input.scss +a {b: rgb(0, 0, 0, 1)} + +<===> unitless/max/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> unitless/above/max/input.scss +a {b: rgb(0, 0, 0, 250)} + +<===> unitless/above/max/output.css +a { + b: black; +} + diff --git a/spec/core_functions/color/rgb/four_args/alpha_percent.hrx b/spec/core_functions/color/rgb/four_args/alpha_percent.hrx deleted file mode 100644 index f3c22b2ee4..0000000000 --- a/spec/core_functions/color/rgb/four_args/alpha_percent.hrx +++ /dev/null @@ -1,17 +0,0 @@ -<===> input.scss -.alpha-percent { - negative: rgb(0, 0, 0, -10%); - min: rgb(0, 0, 0, 0%); - positive: rgb(0, 0, 0, 45.6%); - max: rgb(0, 0, 0, 100%); - above-max: rgb(0, 0, 0, 250%); -} - -<===> output.css -.alpha-percent { - negative: rgba(0, 0, 0, 0); - min: rgba(0, 0, 0, 0); - positive: rgba(0, 0, 0, 0.456); - max: black; - above-max: black; -} diff --git a/spec/core_functions/color/rgb/four_args/alpha_unitless.hrx b/spec/core_functions/color/rgb/four_args/alpha_unitless.hrx deleted file mode 100644 index 403b27aa5e..0000000000 --- a/spec/core_functions/color/rgb/four_args/alpha_unitless.hrx +++ /dev/null @@ -1,17 +0,0 @@ -<===> input.scss -.alpha-unitless { - negative: rgb(0, 0, 0, -10); - min: rgb(0, 0, 0, 0); - positive: rgb(0, 0, 0, 0.456); - max: rgb(0, 0, 0, 1); - above-max: rgb(0, 0, 0, 250); -} - -<===> output.css -.alpha-unitless { - negative: rgba(0, 0, 0, 0); - min: rgba(0, 0, 0, 0); - positive: rgba(0, 0, 0, 0.456); - max: black; - above-max: black; -} diff --git a/spec/core_functions/color/rgb/four_args/basic.hrx b/spec/core_functions/color/rgb/four_args/basic.hrx deleted file mode 100644 index 6c263fb6fb..0000000000 --- a/spec/core_functions/color/rgb/four_args/basic.hrx +++ /dev/null @@ -1,32 +0,0 @@ -<===> input.scss -basic { - transparent: rgb(0, 255, 127, 0); - opaque: rgb(190, 173, 237, 1); - partial: rgb(18, 52, 86, 0.5); - named: rgb($red: 0, $green: 255, $blue: 127, $alpha: 0.3); -} - -// Channels that are out of bounds are clamped within bounds. -clamped { - red: rgb(256, 0, 0, 0.5); - green: rgb(0, -1, 0, 0.5); - blue: rgb(0, 0, 9999, 0.5); - alpha-above: rgb(0, 0, 0, 1.1); - alpha-below: rgb(0, 0, 0, -0.1); -} - -<===> output.css -basic { - transparent: rgba(0, 255, 127, 0); - opaque: #beaded; - partial: rgba(18, 52, 86, 0.5); - named: rgba(0, 255, 127, 0.3); -} - -clamped { - red: rgba(255, 0, 0, 0.5); - green: rgba(0, 0, 0, 0.5); - blue: rgba(0, 0, 255, 0.5); - alpha-above: black; - alpha-below: rgba(0, 0, 0, 0); -} diff --git a/spec/core_functions/color/rgb/four_args/clamped.hrx b/spec/core_functions/color/rgb/four_args/clamped.hrx new file mode 100644 index 0000000000..17ae727ddd --- /dev/null +++ b/spec/core_functions/color/rgb/four_args/clamped.hrx @@ -0,0 +1,53 @@ +<===> README.md +Channels that are out of bounds are clamped within bounds. + +<===> +================================================================================ +<===> red/input.scss +a {b: rgb(256, 0, 0, 0.5)} + +<===> red/output.css +a { + b: rgba(255, 0, 0, 0.5); +} + +<===> +================================================================================ +<===> green/input.scss +a {b: rgb(0, -1, 0, 0.5)} + +<===> green/output.css +a { + b: rgba(0, 0, 0, 0.5); +} + +<===> +================================================================================ +<===> blue/input.scss +a {b: rgb(0, 0, 9999, 0.5)} + +<===> blue/output.css +a { + b: rgba(0, 0, 255, 0.5); +} + +<===> +================================================================================ +<===> alpha/above/input.scss +a {b: rgb(0, 0, 0, 1.1)} + +<===> alpha/above/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> alpha/below/input.scss +a {b: rgb(0, 0, 0, -0.1)} + +<===> alpha/below/output.css +a { + b: rgba(0, 0, 0, 0); +} + diff --git a/spec/core_functions/color/rgb/four_args/in_gamut.hrx b/spec/core_functions/color/rgb/four_args/in_gamut.hrx new file mode 100644 index 0000000000..671e2d4630 --- /dev/null +++ b/spec/core_functions/color/rgb/four_args/in_gamut.hrx @@ -0,0 +1,37 @@ +<===> transparent/input.scss +a {b: rgb(0, 255, 127, 0)} + +<===> transparent/output.css +a { + b: rgba(0, 255, 127, 0); +} + +<===> +================================================================================ +<===> opaque/input.scss +a {b: rgb(190, 173, 237, 1)} + +<===> opaque/output.css +a { + b: #beaded; +} + +<===> +================================================================================ +<===> partial/input.scss +a {b: rgb(18, 52, 86, 0.5)} + +<===> partial/output.css +a { + b: rgba(18, 52, 86, 0.5); +} + +<===> +================================================================================ +<===> named/input.scss +a {b: rgb($red: 0, $green: 255, $blue: 127, $alpha: 0.3)} + +<===> named/output.css +a { + b: rgba(0, 255, 127, 0.3); +} diff --git a/spec/core_functions/color/rgb/four_args/special_functions.hrx b/spec/core_functions/color/rgb/four_args/special_functions.hrx index 7cd69f2441..c23e57c2a1 100644 --- a/spec/core_functions/color/rgb/four_args/special_functions.hrx +++ b/spec/core_functions/color/rgb/four_args/special_functions.hrx @@ -3,63 +3,243 @@ :todo: - sass/libsass#2726 -<===> input.scss -a { - calc-1: rgb(calc(1), 2, 3, 0.4); - calc-2: rgb(1, calc(2), 3, 0.4); - calc-3: rgb(1, 2, calc(3), 0.4); - calc-4: rgb(1, 2, 3, calc(0.4)); - - var-1: rgb(var(--foo), 2, 3, 0.4); - var-2: rgb(1, var(--foo), 3, 0.4); - var-3: rgb(1, 2, var(--foo), 0.4); - var-4: rgb(1, 2, 3, var(--foo)); - - env-1: rgb(env(--foo), 2, 3, 0.4); - env-2: rgb(1, env(--foo), 3, 0.4); - env-3: rgb(1, 2, env(--foo), 0.4); - env-4: rgb(1, 2, 3, env(--foo)); - - min-1: rgb(min(1), 2, 3, 0.4); - min-2: rgb(1, min(2), 3, 0.4); - min-3: rgb(1, 2, min(3), 0.4); - min-4: rgb(1, 2, 3, min(0.4)); - - max-1: rgb(max(1), 2, 3, 0.4); - max-2: rgb(1, max(2), 3, 0.4); - max-3: rgb(1, 2, max(3), 0.4); - max-4: rgb(1, 2, 3, max(0.4)); - - calc-2-args: rgb(blue, calc(0.4)); - var-2-args-alpha: rgb(blue, var(--foo)); - var-2-args-color: rgb(var(--foo), 0.4); - var-2-args-both: rgb(var(--foo), var(--foo)); -} - -<===> output.css -a { - calc-1: rgb(calc(1), 2, 3, 0.4); - calc-2: rgb(1, calc(2), 3, 0.4); - calc-3: rgb(1, 2, calc(3), 0.4); - calc-4: rgb(1, 2, 3, calc(0.4)); - var-1: rgb(var(--foo), 2, 3, 0.4); - var-2: rgb(1, var(--foo), 3, 0.4); - var-3: rgb(1, 2, var(--foo), 0.4); - var-4: rgb(1, 2, 3, var(--foo)); - env-1: rgb(env(--foo), 2, 3, 0.4); - env-2: rgb(1, env(--foo), 3, 0.4); - env-3: rgb(1, 2, env(--foo), 0.4); - env-4: rgb(1, 2, 3, env(--foo)); - min-1: rgb(min(1), 2, 3, 0.4); - min-2: rgb(1, min(2), 3, 0.4); - min-3: rgb(1, 2, min(3), 0.4); - min-4: rgb(1, 2, 3, min(0.4)); - max-1: rgb(max(1), 2, 3, 0.4); - max-2: rgb(1, max(2), 3, 0.4); - max-3: rgb(1, 2, max(3), 0.4); - max-4: rgb(1, 2, 3, max(0.4)); - calc-2-args: rgb(0, 0, 255, calc(0.4)); - var-2-args-alpha: rgb(0, 0, 255, var(--foo)); - var-2-args-color: rgb(var(--foo), 0.4); - var-2-args-both: rgb(var(--foo), var(--foo)); +<===> +================================================================================ +<===> calc/arg_1/input.scss +a {b: rgb(calc(1), 2, 3, 0.4)} + +<===> calc/arg_1/output.css +a { + b: rgb(calc(1), 2, 3, 0.4); +} + +<===> +================================================================================ +<===> calc/arg_2/input.scss +a {b: rgb(1, calc(2), 3, 0.4)} + +<===> calc/arg_2/output.css +a { + b: rgb(1, calc(2), 3, 0.4); +} + +<===> +================================================================================ +<===> calc/arg_3/input.scss +a {b: rgb(1, 2, calc(3), 0.4)} + +<===> calc/arg_3/output.css +a { + b: rgb(1, 2, calc(3), 0.4); +} + +<===> +================================================================================ +<===> calc/arg_4/input.scss +a {b: rgb(1, 2, 3, calc(0.4))} + +<===> calc/arg_4/output.css +a { + b: rgb(1, 2, 3, calc(0.4)); +} + +<===> +================================================================================ +<===> var/arg_1/input.scss +a {b: rgb(var(--foo), 2, 3, 0.4)} + +<===> var/arg_1/output.css +a { + b: rgb(var(--foo), 2, 3, 0.4); +} + +<===> +================================================================================ +<===> var/arg_2/input.scss +a {b: rgb(1, var(--foo), 3, 0.4)} + +<===> var/arg_2/output.css +a { + b: rgb(1, var(--foo), 3, 0.4); +} + +<===> +================================================================================ +<===> var/arg_3/input.scss +a {b: rgb(1, 2, var(--foo), 0.4)} + +<===> var/arg_3/output.css +a { + b: rgb(1, 2, var(--foo), 0.4); +} + +<===> +================================================================================ +<===> var/arg_4/input.scss +a {b: rgb(1, 2, 3, var(--foo))} + +<===> var/arg_4/output.css +a { + b: rgb(1, 2, 3, var(--foo)); +} + +<===> +================================================================================ +<===> env/arg_1/input.scss +a {b: rgb(env(--foo), 2, 3, 0.4)} + +<===> env/arg_1/output.css +a { + b: rgb(env(--foo), 2, 3, 0.4); +} + +<===> +================================================================================ +<===> env/arg_2/input.scss +a {b: rgb(1, env(--foo), 3, 0.4)} + +<===> env/arg_2/output.css +a { + b: rgb(1, env(--foo), 3, 0.4); +} + +<===> +================================================================================ +<===> env/arg_3/input.scss +a {b: rgb(1, 2, env(--foo), 0.4)} + +<===> env/arg_3/output.css +a { + b: rgb(1, 2, env(--foo), 0.4); } + +<===> +================================================================================ +<===> env/arg_4/input.scss +a {b: rgb(1, 2, 3, env(--foo))} + +<===> env/arg_4/output.css +a { + b: rgb(1, 2, 3, env(--foo)); +} + +<===> +================================================================================ +<===> min/arg_1/input.scss +a {b: rgb(min(1), 2, 3, 0.4)} + +<===> min/arg_1/output.css +a { + b: rgb(min(1), 2, 3, 0.4); +} + +<===> +================================================================================ +<===> min/arg_2/input.scss +a {b: rgb(1, min(2), 3, 0.4)} + +<===> min/arg_2/output.css +a { + b: rgb(1, min(2), 3, 0.4); +} + +<===> +================================================================================ +<===> min/arg_3/input.scss +a {b: rgb(1, 2, min(3), 0.4)} + +<===> min/arg_3/output.css +a { + b: rgb(1, 2, min(3), 0.4); +} + +<===> +================================================================================ +<===> min/arg_4/input.scss +a {b: rgb(1, 2, 3, min(0.4))} + +<===> min/arg_4/output.css +a { + b: rgb(1, 2, 3, min(0.4)); +} + +<===> +================================================================================ +<===> max/arg_1/input.scss +a {b: rgb(max(1), 2, 3, 0.4)} + +<===> max/arg_1/output.css +a { + b: rgb(max(1), 2, 3, 0.4); +} + +<===> +================================================================================ +<===> max/arg_2/input.scss +a {b: rgb(1, max(2), 3, 0.4)} + +<===> max/arg_2/output.css +a { + b: rgb(1, max(2), 3, 0.4); +} + +<===> +================================================================================ +<===> max/arg_3/input.scss +a {b: rgb(1, 2, max(3), 0.4)} + +<===> max/arg_3/output.css +a { + b: rgb(1, 2, max(3), 0.4); +} + +<===> +================================================================================ +<===> max/arg_4/input.scss +a {b: rgb(1, 2, 3, max(0.4))} + +<===> max/arg_4/output.css +a { + b: rgb(1, 2, 3, max(0.4)); +} + +<===> +================================================================================ +<===> calc/arg_2/args/input.scss +a {b: rgb(blue, calc(0.4))} + +<===> calc/arg_2/args/output.css +a { + b: rgb(0, 0, 255, calc(0.4)); +} + +<===> +================================================================================ +<===> var/arg_2/args/alpha/input.scss +a {b: rgb(blue, var(--foo))} + +<===> var/arg_2/args/alpha/output.css +a { + b: rgb(0, 0, 255, var(--foo)); +} + +<===> +================================================================================ +<===> var/arg_2/args/color/input.scss +a {b: rgb(var(--foo), 0.4)} + +<===> var/arg_2/args/color/output.css +a { + b: rgb(var(--foo), 0.4); +} + +<===> +================================================================================ +<===> var/arg_2/args/both/input.scss +a {b: rgb(var(--foo), var(--foo))} + +<===> var/arg_2/args/both/output.css +a { + b: rgb(var(--foo), var(--foo)); +} + diff --git a/spec/core_functions/color/rgb/multi_argument_var.hrx b/spec/core_functions/color/rgb/multi_argument_var.hrx index 01c41d4ed9..814e7c0505 100644 --- a/spec/core_functions/color/rgb/multi_argument_var.hrx +++ b/spec/core_functions/color/rgb/multi_argument_var.hrx @@ -3,23 +3,64 @@ :todo: - libsass -<===> input.scss +<===> +================================================================================ +<===> 1_of_3/input.scss +// var() is substituted before parsing, so it may contain multiple arguments. +a {b: rgb(var(--foo), 3, 0.4)} + +<===> 1_of_3/output.css a { - // var() is substituted before parsing, so it may contain multiple arguments. b: rgb(var(--foo), 3, 0.4); - b: rgb(1, var(--foo), 0.4); - b: rgb(1, 2, var(--foo)); - b: rgb(var(--foo), 0.4); - b: rgb(1, var(--foo)); - b: rgb(var(--foo)); } -<===> output.css +<===> +================================================================================ +<===> 2_of_3/input.scss +a {b: rgb(1, var(--foo), 0.4)} + +<===> 2_of_3/output.css a { - b: rgb(var(--foo), 3, 0.4); b: rgb(1, var(--foo), 0.4); +} + +<===> +================================================================================ +<===> 3_of_3/input.scss +a {b: rgb(1, 2, var(--foo))} + +<===> 3_of_3/output.css +a { b: rgb(1, 2, var(--foo)); +} + +<===> +================================================================================ +<===> 1_of_2/input.scss +a {b: rgb(var(--foo), 0.4)} + +<===> 1_of_2/output.css +a { b: rgb(var(--foo), 0.4); +} + +<===> +================================================================================ +<===> 2_of_2/input.scss +a {b: rgb(1, var(--foo))} + +<===> 2_of_2/output.css +a { b: rgb(1, var(--foo)); +} + +<===> +================================================================================ +<===> 1_of_1/input.scss +a {b: rgb(var(--foo))} + +<===> 1_of_1/output.css +a { b: rgb(var(--foo)); } + diff --git a/spec/core_functions/color/rgb/one_arg/alpha.hrx b/spec/core_functions/color/rgb/one_arg/alpha.hrx index 2134d07060..6b6001bc21 100644 --- a/spec/core_functions/color/rgb/one_arg/alpha.hrx +++ b/spec/core_functions/color/rgb/one_arg/alpha.hrx @@ -1,42 +1,134 @@ -<===> input.scss -basic { - transparent: rgb(0 255 127 / 0); - opaque: rgb(190 173 237 / 1); - partial: rgb(18 52 86 / 0.5); - percent: rgb(18 52 86 / 50%); - named: rgb($channels: 0 255 127 / 0.3); - - // Extra parens shouldn't cause the slash to be forced into division. - parenthesized: (rgb(0 255 127 / 0.3)); -} - -// Channels that are out of bounds are clamped within bounds. -clamped { - red: rgb(256 0 0 / 0.5); - green: rgb(0 -1 0 / 0.5); - blue: rgb(0 0 9999 / 0.5); - alpha-above: rgb(0 0 0 / 1.1); - alpha-below: rgb(0 0 0 / -0.1); - alpha-above-percent: rgb(0 0 0 / 250%); - alpha-below-percent: rgb(0 0 0 / -10%); -} - -<===> output.css -basic { - transparent: rgba(0, 255, 127, 0); - opaque: #beaded; - partial: rgba(18, 52, 86, 0.5); - percent: rgba(18, 52, 86, 0.5); - named: rgba(0, 255, 127, 0.3); - parenthesized: rgba(0, 255, 127, 0.3); -} - -clamped { - red: rgba(255, 0, 0, 0.5); - green: rgba(0, 0, 0, 0.5); - blue: rgba(0, 0, 255, 0.5); - alpha-above: black; - alpha-below: rgba(0, 0, 0, 0); - alpha-above-percent: black; - alpha-below-percent: rgba(0, 0, 0, 0); +<===> in_gamut/transparent/input.scss +a {b: rgb(0 255 127 / 0)} + +<===> in_gamut/transparent/output.css +a { + b: rgba(0, 255, 127, 0); +} + +<===> +================================================================================ +<===> in_gamut/opaque/input.scss +a {b: rgb(190 173 237 / 1)} + +<===> in_gamut/opaque/output.css +a { + b: #beaded; +} + +<===> +================================================================================ +<===> in_gamut/partial/input.scss +a {b: rgb(18 52 86 / 0.5)} + +<===> in_gamut/partial/output.css +a { + b: rgba(18, 52, 86, 0.5); +} + +<===> +================================================================================ +<===> in_gamut/percent/input.scss +a {b: rgb(18 52 86 / 50%)} + +<===> in_gamut/percent/output.css +a { + b: rgba(18, 52, 86, 0.5); +} + +<===> +================================================================================ +<===> in_gamut/named/input.scss +a {b: rgb($channels: 0 255 127 / 0.3)} + +<===> in_gamut/named/output.css +a { + b: rgba(0, 255, 127, 0.3); +} + +<===> +================================================================================ +<===> in_gamut/parenthesized/input.scss +// Extra parens shouldn't cause the slash to be forced into division. +a {b: rgb(0 255 127 / 0.3)} + +<===> in_gamut/parenthesized/output.css +a { + b: rgba(0, 255, 127, 0.3); +} + +<===> +================================================================================ +<===> clamped/README.md +Channels that are out of bounds are clamped within bounds. + +<===> +================================================================================ +<===> clamped/red/input.scss +a {b: rgb(256 0 0 / 0.5)} + +<===> clamped/red/output.css +a { + b: rgba(255, 0, 0, 0.5); } + +<===> +================================================================================ +<===> clamped/green/input.scss +a {b: rgb(0 -1 0 / 0.5)} + +<===> clamped/green/output.css +a { + b: rgba(0, 0, 0, 0.5); +} + +<===> +================================================================================ +<===> clamped/blue/input.scss +a {b: rgb(0 0 9999 / 0.5)} + +<===> clamped/blue/output.css +a { + b: rgba(0, 0, 255, 0.5); +} + +<===> +================================================================================ +<===> clamped/alpha/above/input.scss +a {b: rgb(0 0 0 / 1.1)} + +<===> clamped/alpha/above/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> clamped/alpha/below/input.scss +a {b: rgb(0 0 0 / -0.1)} + +<===> clamped/alpha/below/output.css +a { + b: rgba(0, 0, 0, 0); +} + +<===> +================================================================================ +<===> clamped/alpha/above/percent/input.scss +a {b: rgb(0 0 0 / 250%)} + +<===> clamped/alpha/above/percent/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> clamped/alpha/below/percent/input.scss +a {b: rgb(0 0 0 / -10%)} + +<===> clamped/alpha/below/percent/output.css +a { + b: rgba(0, 0, 0, 0); +} + diff --git a/spec/core_functions/color/rgb/one_arg/basic.hrx b/spec/core_functions/color/rgb/one_arg/basic.hrx deleted file mode 100644 index acfa0c7e01..0000000000 --- a/spec/core_functions/color/rgb/one_arg/basic.hrx +++ /dev/null @@ -1,56 +0,0 @@ -<===> input.scss -// Channels may be specified as unitless numbers between 0 and 255. -unitless { - numbers: rgb(18 52 86); - beaded: rgb(190 173 237); - springgreen: rgb(0 255 127); - named: rgb($channels: 0 255 127); - - // Channels that are out of bounds are clamped within bounds. - clamped { - red: rgb(256 0 0); - green: rgb(0 -1 0); - blue: rgb(0 0 9999); - } -} - -// Channels may also be specified as percents between 0% and 100%, which may be -// mixed with unitless numbers. -percents { - all-percent: rgb(7.1% 20.4% 33.9%); - unitless-green: rgb(74.7% 173 93%); - percent-green: rgb(190 68% 237); - boundaries: rgb(0% 100% 50%); - - // Channels that are out of bounds are clamped within bounds. - clamped { - red: rgb(100.1% 0 0); - green: rgb(0 -0.1% 0); - blue: rgb(0 0 200%); - } -} - -<===> output.css -unitless { - numbers: #123456; - beaded: #beaded; - springgreen: springgreen; - named: springgreen; -} -unitless clamped { - red: red; - green: black; - blue: blue; -} - -percents { - all-percent: #123456; - unitless-green: #beaded; - percent-green: #beaded; - boundaries: #00ff80; -} -percents clamped { - red: red; - green: black; - blue: blue; -} diff --git a/spec/core_functions/color/rgb/one_arg/no_alpha.hrx b/spec/core_functions/color/rgb/one_arg/no_alpha.hrx new file mode 100644 index 0000000000..b5a89725f3 --- /dev/null +++ b/spec/core_functions/color/rgb/one_arg/no_alpha.hrx @@ -0,0 +1,159 @@ +<===> unitless/README.md +Channels may be specified as unitless numbers between 0 and 255. + +<===> +================================================================================ +<===> unitless/numbers/input.scss +a {b: rgb(18 52 86)} + +<===> unitless/numbers/output.css +a { + b: #123456; +} + +<===> +================================================================================ +<===> unitless/beaded/input.scss +a {b: rgb(190 173 237)} + +<===> unitless/beaded/output.css +a { + b: #beaded; +} + +<===> +================================================================================ +<===> unitless/springgreen/input.scss +a {b: rgb(0 255 127)} + +<===> unitless/springgreen/output.css +a { + b: springgreen; +} + +<===> +================================================================================ +<===> unitless/named/input.scss +a {b: rgb($channels: 0 255 127)} + +<===> unitless/named/output.css +a { + b: springgreen; +} + +<===> +================================================================================ +<===> unitless/clamped/README.md +Channels that are out of bounds are clamped within bounds. + +<===> +================================================================================ +<===> unitless/clamped/red/input.scss +a {b: rgb(256 0 0)} + +<===> unitless/clamped/red/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> unitless/clamped/green/input.scss +a {b: rgb(0 -1 0)} + +<===> unitless/clamped/green/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> unitless/clamped/blue/input.scss +a {b: rgb(0 0 9999)} + +<===> unitless/clamped/blue/output.css +a { + b: blue; +} + +<===> +================================================================================ +<===> percents/README.md +Channels may also be specified as percents between 0% and 100%, which may be +// mixed with unitless numbers. + +<===> +================================================================================ +<===> percents/all/percent/input.scss +a {b: rgb(7.1% 20.4% 33.9%)} + +<===> percents/all/percent/output.css +a { + b: #123456; +} + +<===> +================================================================================ +<===> percents/unitless/green/input.scss +a {b: rgb(74.7% 173 93%)} + +<===> percents/unitless/green/output.css +a { + b: #beaded; +} + +<===> +================================================================================ +<===> percents/percent/green/input.scss +a {b: rgb(190 68% 237)} + +<===> percents/percent/green/output.css +a { + b: #beaded; +} + +<===> +================================================================================ +<===> percents/boundaries/input.scss +a {b: rgb(0% 100% 50%)} + +<===> percents/boundaries/output.css +a { + b: #00ff80; +} + +<===> +================================================================================ +<===> percents/clamped/README.md +Channels that are out of bounds are clamped within bounds. + +<===> +================================================================================ +<===> percents/clamped/red/input.scss +a {b: rgb(100.1% 0 0)} + +<===> percents/clamped/red/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> percents/clamped/green/input.scss +a {b: rgb(0 -0.1% 0)} + +<===> percents/clamped/green/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> percents/clamped/blue/input.scss +a {b: rgb(0 0 200%)} + +<===> percents/clamped/blue/output.css +a { + b: blue; +} + diff --git a/spec/core_functions/color/rgb/one_arg/special_functions.hrx b/spec/core_functions/color/rgb/one_arg/special_functions.hrx index 8b4d7fe0ef..bb4be2a8b5 100644 --- a/spec/core_functions/color/rgb/one_arg/special_functions.hrx +++ b/spec/core_functions/color/rgb/one_arg/special_functions.hrx @@ -3,110 +3,414 @@ :todo: - sass/libsass#2726 -<===> input.scss -no-alpha { - calc-1: rgb(calc(1) 2 3); - calc-2: rgb(1 calc(2) 3); - calc-3: rgb(1 2 calc(3)); - - var-1: rgb(var(--foo) 2 3); - var-2: rgb(1 var(--foo) 3); - var-3: rgb(1 2 var(--foo)); - - env-1: rgb(env(--foo) 2 3); - env-2: rgb(1 env(--foo) 3); - env-3: rgb(1 2 env(--foo)); - - min-1: rgb(min(1) 2 3); - min-2: rgb(1 min(2) 3); - min-3: rgb(1 2 min(3)); - - max-1: rgb(max(1) 2 3); - max-2: rgb(1 max(2) 3); - max-3: rgb(1 2 max(3)); - - // var() is substituted before parsing, so it may contain multiple arguments. - multi-argument-var-1-of-2: rgb(var(--foo) 2); - multi-argument-var-2-of-2: rgb(1 var(--foo)); - multi-argument-var-1-of-1: rgb(var(--foo)); -} - -alpha { - calc-1: rgb(calc(1) 2 3 / 0.4); - calc-2: rgb(1 calc(2) 3 / 0.4); - calc-3: rgb(1 2 calc(3) / 0.4); - calc-4: rgb(1 2 3 / calc(0.4)); - - var-1: rgb(var(--foo) 2 3 / 0.4); - var-2: rgb(1 var(--foo) 3 / 0.4); - var-3: rgb(1 2 var(--foo) / 0.4); - var-4: rgb(1 2 3 / var(--foo)); - - env-1: rgb(env(--foo) 2 3 / 0.4); - env-2: rgb(1 env(--foo) 3 / 0.4); - env-3: rgb(1 2 env(--foo) / 0.4); - env-4: rgb(1 2 3 / env(--foo)); - - min-1: rgb(min(1) 2 3 / 0.4); - min-2: rgb(1 min(2) 3 / 0.4); - min-3: rgb(1 2 min(3) / 0.4); - min-4: rgb(1 2 3 / min(0.4)); - - max-1: rgb(max(1) 2 3 / 0.4); - max-2: rgb(1 max(2) 3 / 0.4); - max-3: rgb(1 2 max(3) / 0.4); - max-4: rgb(1 2 3 / max(0.4)); - - // var() is substituted before parsing, so it may contain multiple arguments. - multi-argument-var-1-of-2: rgb(var(--foo) 2 / 0.4); - multi-argument-var-2-of-2: rgb(1 var(--foo) / 0.4); - multi-argument-var-1-of-1: rgb(var(--foo) / 0.4); -} - -<===> output.css -no-alpha { - calc-1: rgb(calc(1), 2, 3); - calc-2: rgb(1, calc(2), 3); - calc-3: rgb(1, 2, calc(3)); - var-1: rgb(var(--foo), 2, 3); - var-2: rgb(1, var(--foo), 3); - var-3: rgb(1, 2, var(--foo)); - env-1: rgb(env(--foo), 2, 3); - env-2: rgb(1, env(--foo), 3); - env-3: rgb(1, 2, env(--foo)); - min-1: rgb(min(1), 2, 3); - min-2: rgb(1, min(2), 3); - min-3: rgb(1, 2, min(3)); - max-1: rgb(max(1), 2, 3); - max-2: rgb(1, max(2), 3); - max-3: rgb(1, 2, max(3)); - multi-argument-var-1-of-2: rgb(var(--foo) 2); - multi-argument-var-2-of-2: rgb(1 var(--foo)); - multi-argument-var-1-of-1: rgb(var(--foo)); -} - -alpha { - calc-1: rgb(calc(1), 2, 3, 0.4); - calc-2: rgb(1, calc(2), 3, 0.4); - calc-3: rgb(1 2 calc(3)/0.4); - calc-4: rgb(1 2 3/calc(0.4)); - var-1: rgb(var(--foo), 2, 3, 0.4); - var-2: rgb(1, var(--foo), 3, 0.4); - var-3: rgb(1 2 var(--foo)/0.4); - var-4: rgb(1 2 3/var(--foo)); - env-1: rgb(env(--foo), 2, 3, 0.4); - env-2: rgb(1, env(--foo), 3, 0.4); - env-3: rgb(1 2 env(--foo)/0.4); - env-4: rgb(1 2 3/env(--foo)); - min-1: rgb(min(1), 2, 3, 0.4); - min-2: rgb(1, min(2), 3, 0.4); - min-3: rgb(1 2 min(3)/0.4); - min-4: rgb(1 2 3/min(0.4)); - max-1: rgb(max(1), 2, 3, 0.4); - max-2: rgb(1, max(2), 3, 0.4); - max-3: rgb(1 2 max(3)/0.4); - max-4: rgb(1 2 3/max(0.4)); - multi-argument-var-1-of-2: rgb(var(--foo) 2/0.4); - multi-argument-var-2-of-2: rgb(1 var(--foo)/0.4); - multi-argument-var-1-of-1: rgb(var(--foo)/0.4); +<===> +================================================================================ +<===> no_alpha/calc/arg_1/input.scss +a {b: rgb(calc(1) 2 3)} + +<===> no_alpha/calc/arg_1/output.css +a { + b: rgb(calc(1), 2, 3); +} + +<===> +================================================================================ +<===> no_alpha/calc/arg_2/input.scss +a {b: rgb(1 calc(2) 3)} + +<===> no_alpha/calc/arg_2/output.css +a { + b: rgb(1, calc(2), 3); +} + +<===> +================================================================================ +<===> no_alpha/calc/arg_3/input.scss +a {b: rgb(1 2 calc(3))} + +<===> no_alpha/calc/arg_3/output.css +a { + b: rgb(1, 2, calc(3)); +} + +<===> +================================================================================ +<===> no_alpha/var/arg_1/input.scss +a {b: rgb(var(--foo) 2 3)} + +<===> no_alpha/var/arg_1/output.css +a { + b: rgb(var(--foo), 2, 3); +} + +<===> +================================================================================ +<===> no_alpha/var/arg_2/input.scss +a {b: rgb(1 var(--foo) 3)} + +<===> no_alpha/var/arg_2/output.css +a { + b: rgb(1, var(--foo), 3); +} + +<===> +================================================================================ +<===> no_alpha/var/arg_3/input.scss +a {b: rgb(1 2 var(--foo))} + +<===> no_alpha/var/arg_3/output.css +a { + b: rgb(1, 2, var(--foo)); +} + +<===> +================================================================================ +<===> no_alpha/env/arg_1/input.scss +a {b: rgb(env(--foo) 2 3)} + +<===> no_alpha/env/arg_1/output.css +a { + b: rgb(env(--foo), 2, 3); +} + +<===> +================================================================================ +<===> no_alpha/env/arg_2/input.scss +a {b: rgb(1 env(--foo) 3)} + +<===> no_alpha/env/arg_2/output.css +a { + b: rgb(1, env(--foo), 3); +} + +<===> +================================================================================ +<===> no_alpha/env/arg_3/input.scss +a {b: rgb(1 2 env(--foo))} + +<===> no_alpha/env/arg_3/output.css +a { + b: rgb(1, 2, env(--foo)); +} + +<===> +================================================================================ +<===> no_alpha/min/arg_1/input.scss +a {b: rgb(min(1) 2 3)} + +<===> no_alpha/min/arg_1/output.css +a { + b: rgb(min(1), 2, 3); +} + +<===> +================================================================================ +<===> no_alpha/min/arg_2/input.scss +a {b: rgb(1 min(2) 3)} + +<===> no_alpha/min/arg_2/output.css +a { + b: rgb(1, min(2), 3); +} + +<===> +================================================================================ +<===> no_alpha/min/arg_3/input.scss +a {b: rgb(1 2 min(3))} + +<===> no_alpha/min/arg_3/output.css +a { + b: rgb(1, 2, min(3)); +} + +<===> +================================================================================ +<===> no_alpha/max/arg_1/input.scss +a {b: rgb(max(1) 2 3)} + +<===> no_alpha/max/arg_1/output.css +a { + b: rgb(max(1), 2, 3); +} + +<===> +================================================================================ +<===> no_alpha/max/arg_2/input.scss +a {b: rgb(1 max(2) 3)} + +<===> no_alpha/max/arg_2/output.css +a { + b: rgb(1, max(2), 3); +} + +<===> +================================================================================ +<===> no_alpha/max/arg_3/input.scss +a {b: rgb(1 2 max(3))} + +<===> no_alpha/max/arg_3/output.css +a { + b: rgb(1, 2, max(3)); +} + +<===> +================================================================================ +<===> no_alpha/multi_argument_var/1_of_2/input.scss +// var() is substituted before parsing, so it may contain multiple arguments. +a {b: rgb(var(--foo) 2)} + +<===> no_alpha/multi_argument_var/1_of_2/output.css +a { + b: rgb(var(--foo) 2); +} + +<===> +================================================================================ +<===> no_alpha/multi_argument_var/2_of_2/input.scss +a {b: rgb(1 var(--foo))} + +<===> no_alpha/multi_argument_var/2_of_2/output.css +a { + b: rgb(1 var(--foo)); +} + +<===> +================================================================================ +<===> no_alpha/multi_argument_var/1_of_1/input.scss +a {b: rgb(var(--foo))} + +<===> no_alpha/multi_argument_var/1_of_1/output.css +a { + b: rgb(var(--foo)); +} + +<===> +================================================================================ +<===> alpha/calc/arg_1/input.scss +a {b: rgb(calc(1) 2 3 / 0.4)} + +<===> alpha/calc/arg_1/output.css +a { + b: rgb(calc(1), 2, 3, 0.4); +} + +<===> +================================================================================ +<===> alpha/calc/arg_2/input.scss +a {b: rgb(1 calc(2) 3 / 0.4)} + +<===> alpha/calc/arg_2/output.css +a { + b: rgb(1, calc(2), 3, 0.4); +} + +<===> +================================================================================ +<===> alpha/calc/arg_3/input.scss +a {b: rgb(1 2 calc(3) / 0.4)} + +<===> alpha/calc/arg_3/output.css +a { + b: rgb(1 2 calc(3)/0.4); +} + +<===> +================================================================================ +<===> alpha/calc/arg_4/input.scss +a {b: rgb(1 2 3 / calc(0.4))} + +<===> alpha/calc/arg_4/output.css +a { + b: rgb(1 2 3/calc(0.4)); +} + +<===> +================================================================================ +<===> alpha/var/arg_1/input.scss +a {b: rgb(var(--foo) 2 3 / 0.4)} + +<===> alpha/var/arg_1/output.css +a { + b: rgb(var(--foo), 2, 3, 0.4); +} + +<===> +================================================================================ +<===> alpha/var/arg_2/input.scss +a {b: rgb(1 var(--foo) 3 / 0.4)} + +<===> alpha/var/arg_2/output.css +a { + b: rgb(1, var(--foo), 3, 0.4); +} + +<===> +================================================================================ +<===> alpha/var/arg_3/input.scss +a {b: rgb(1 2 var(--foo) / 0.4)} + +<===> alpha/var/arg_3/output.css +a { + b: rgb(1 2 var(--foo)/0.4); +} + +<===> +================================================================================ +<===> alpha/var/arg_4/input.scss +a {b: rgb(1 2 3 / var(--foo))} + +<===> alpha/var/arg_4/output.css +a { + b: rgb(1 2 3/var(--foo)); +} + +<===> +================================================================================ +<===> alpha/env/arg_1/input.scss +a {b: rgb(env(--foo) 2 3 / 0.4)} + +<===> alpha/env/arg_1/output.css +a { + b: rgb(env(--foo), 2, 3, 0.4); +} + +<===> +================================================================================ +<===> alpha/env/arg_2/input.scss +a {b: rgb(1 env(--foo) 3 / 0.4)} + +<===> alpha/env/arg_2/output.css +a { + b: rgb(1, env(--foo), 3, 0.4); +} + +<===> +================================================================================ +<===> alpha/env/arg_3/input.scss +a {b: rgb(1 2 env(--foo) / 0.4)} + +<===> alpha/env/arg_3/output.css +a { + b: rgb(1 2 env(--foo)/0.4); +} + +<===> +================================================================================ +<===> alpha/env/arg_4/input.scss +a {b: rgb(1 2 3 / env(--foo))} + +<===> alpha/env/arg_4/output.css +a { + b: rgb(1 2 3/env(--foo)); +} + +<===> +================================================================================ +<===> alpha/min/arg_1/input.scss +a {b: rgb(min(1) 2 3 / 0.4)} + +<===> alpha/min/arg_1/output.css +a { + b: rgb(min(1), 2, 3, 0.4); +} + +<===> +================================================================================ +<===> alpha/min/arg_2/input.scss +a {b: rgb(1 min(2) 3 / 0.4)} + +<===> alpha/min/arg_2/output.css +a { + b: rgb(1, min(2), 3, 0.4); +} + +<===> +================================================================================ +<===> alpha/min/arg_3/input.scss +a {b: rgb(1 2 min(3) / 0.4)} + +<===> alpha/min/arg_3/output.css +a { + b: rgb(1 2 min(3)/0.4); +} + +<===> +================================================================================ +<===> alpha/min/arg_4/input.scss +a {b: rgb(1 2 3 / min(0.4))} + +<===> alpha/min/arg_4/output.css +a { + b: rgb(1 2 3/min(0.4)); +} + +<===> +================================================================================ +<===> alpha/max/arg_1/input.scss +a {b: rgb(max(1) 2 3 / 0.4)} + +<===> alpha/max/arg_1/output.css +a { + b: rgb(max(1), 2, 3, 0.4); +} + +<===> +================================================================================ +<===> alpha/max/arg_2/input.scss +a {b: rgb(1 max(2) 3 / 0.4)} + +<===> alpha/max/arg_2/output.css +a { + b: rgb(1, max(2), 3, 0.4); +} + +<===> +================================================================================ +<===> alpha/max/arg_3/input.scss +a {b: rgb(1 2 max(3) / 0.4)} + +<===> alpha/max/arg_3/output.css +a { + b: rgb(1 2 max(3)/0.4); +} + +<===> +================================================================================ +<===> alpha/max/arg_4/input.scss +a {b: rgb(1 2 3 / max(0.4))} + +<===> alpha/max/arg_4/output.css +a { + b: rgb(1 2 3/max(0.4)); +} + +<===> +================================================================================ +<===> alpha/multi_argument_var/1_of_2/input.scss +// var() is substituted before parsing, so it may contain multiple arguments. +a {b: rgb(var(--foo) 2 / 0.4)} + +<===> alpha/multi_argument_var/1_of_2/output.css +a { + b: rgb(var(--foo) 2/0.4); +} + +<===> +================================================================================ +<===> alpha/multi_argument_var/2_of_2/input.scss +a {b: rgb(1 var(--foo) / 0.4)} + +<===> alpha/multi_argument_var/2_of_2/output.css +a { + b: rgb(1 var(--foo)/0.4); +} + +<===> +================================================================================ +<===> alpha/multi_argument_var/1_of_1/input.scss +a {b: rgb(var(--foo) / 0.4)} + +<===> alpha/multi_argument_var/1_of_1/output.css +a { + b: rgb(var(--foo)/0.4); } diff --git a/spec/core_functions/color/rgb/three_args/basic.hrx b/spec/core_functions/color/rgb/three_args/basic.hrx deleted file mode 100644 index 2d1bdde72d..0000000000 --- a/spec/core_functions/color/rgb/three_args/basic.hrx +++ /dev/null @@ -1,56 +0,0 @@ -<===> input.scss -// Channels may be specified as unitless numbers between 0 and 255. -unitless { - numbers: rgb(18, 52, 86); - beaded: rgb(190, 173, 237); - springgreen: rgb(0, 255, 127); - named: rgb($red: 0, $green: 255, $blue: 127); - - // Channels that are out of bounds are clamped within bounds. - clamped { - red: rgb(256, 0, 0); - green: rgb(0, -1, 0); - blue: rgb(0, 0, 9999); - } -} - -// Channels may also be specified as percents between 0% and 100%, which may be -// mixed with unitless numbers. -percents { - all-percent: rgb(7.1%, 20.4%, 33.9%); - unitless-green: rgb(74.7%, 173, 93%); - percent-green: rgb(190, 68%, 237); - boundaries: rgb(0%, 100%, 50%); - - // Channels that are out of bounds are clamped within bounds. - clamped { - red: rgb(100.1%, 0, 0); - green: rgb(0, -0.1%, 0); - blue: rgb(0, 0, 200%); - } -} - -<===> output.css -unitless { - numbers: #123456; - beaded: #beaded; - springgreen: springgreen; - named: springgreen; -} -unitless clamped { - red: red; - green: black; - blue: blue; -} - -percents { - all-percent: #123456; - unitless-green: #beaded; - percent-green: #beaded; - boundaries: #00ff80; -} -percents clamped { - red: red; - green: black; - blue: blue; -} diff --git a/spec/core_functions/color/rgb/three_args/percents.hrx b/spec/core_functions/color/rgb/three_args/percents.hrx new file mode 100644 index 0000000000..41a29c3251 --- /dev/null +++ b/spec/core_functions/color/rgb/three_args/percents.hrx @@ -0,0 +1,81 @@ +<===> +================================================================================ +<===> README.md +Channels may also be specified as percents between 0% and 100%, which may be +mixed with unitless numbers. + +<===> +================================================================================ +<===> all/percent/input.scss +a {b: rgb(7.1%, 20.4%, 33.9%)} + +<===> all/percent/output.css +a { + b: #123456; +} + +<===> +================================================================================ +<===> unitless/green/input.scss +a {b: rgb(74.7%, 173, 93%)} + +<===> unitless/green/output.css +a { + b: #beaded; +} + +<===> +================================================================================ +<===> percent/green/input.scss +a {b: rgb(190, 68%, 237)} + +<===> percent/green/output.css +a { + b: #beaded; +} + +<===> +================================================================================ +<===> boundaries/input.scss +a {b: rgb(0%, 100%, 50%)} + +<===> boundaries/output.css +a { + b: #00ff80; +} + +<===> +================================================================================ +<===> clamped/README.md +Channels that are out of bounds are clamped within bounds. + +<===> +================================================================================ +<===> clamped/red/input.scss +a {b: rgb(100.1%, 0, 0)} + +<===> clamped/red/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> clamped/green/input.scss +a {b: rgb(0, -0.1%, 0)} + +<===> clamped/green/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> clamped/blue/input.scss +a {b: rgb(0, 0, 200%)} + +<===> clamped/blue/output.css +a { + b: blue; +} + diff --git a/spec/core_functions/color/rgb/three_args/special_functions.hrx b/spec/core_functions/color/rgb/three_args/special_functions.hrx index d21533022a..73a1581ec8 100644 --- a/spec/core_functions/color/rgb/three_args/special_functions.hrx +++ b/spec/core_functions/color/rgb/three_args/special_functions.hrx @@ -3,44 +3,153 @@ :todo: - sass/libsass#2726 -<===> input.scss -a { - calc-1: rgb(calc(1), 2, 3); - calc-2: rgb(1, calc(2), 3); - calc-3: rgb(1, 2, calc(3)); - - var-1: rgb(var(--foo), 2, 3); - var-2: rgb(1, var(--foo), 3); - var-3: rgb(1, 2, var(--foo)); - - env-1: rgb(env(--foo), 2, 3); - env-2: rgb(1, env(--foo), 3); - env-3: rgb(1, 2, env(--foo)); - - min-1: rgb(min(1), 2, 3); - min-2: rgb(1, min(2), 3); - min-3: rgb(1, 2, min(3)); - - max-1: rgb(max(1), 2, 3); - max-2: rgb(1, max(2), 3); - max-3: rgb(1, 2, max(3)); -} - -<===> output.css -a { - calc-1: rgb(calc(1), 2, 3); - calc-2: rgb(1, calc(2), 3); - calc-3: rgb(1, 2, calc(3)); - var-1: rgb(var(--foo), 2, 3); - var-2: rgb(1, var(--foo), 3); - var-3: rgb(1, 2, var(--foo)); - env-1: rgb(env(--foo), 2, 3); - env-2: rgb(1, env(--foo), 3); - env-3: rgb(1, 2, env(--foo)); - min-1: rgb(min(1), 2, 3); - min-2: rgb(1, min(2), 3); - min-3: rgb(1, 2, min(3)); - max-1: rgb(max(1), 2, 3); - max-2: rgb(1, max(2), 3); - max-3: rgb(1, 2, max(3)); +<===> +================================================================================ +<===> calc/arg_1/input.scss +a {b: rgb(calc(1), 2, 3)} + +<===> calc/arg_1/output.css +a { + b: rgb(calc(1), 2, 3); +} + +<===> +================================================================================ +<===> calc/arg_2/input.scss +a {b: rgb(1, calc(2), 3)} + +<===> calc/arg_2/output.css +a { + b: rgb(1, calc(2), 3); +} + +<===> +================================================================================ +<===> calc/arg_3/input.scss +a {b: rgb(1, 2, calc(3))} + +<===> calc/arg_3/output.css +a { + b: rgb(1, 2, calc(3)); +} + +<===> +================================================================================ +<===> var/arg_1/input.scss +a {b: rgb(var(--foo), 2, 3)} + +<===> var/arg_1/output.css +a { + b: rgb(var(--foo), 2, 3); +} + +<===> +================================================================================ +<===> var/arg_2/input.scss +a {b: rgb(1, var(--foo), 3)} + +<===> var/arg_2/output.css +a { + b: rgb(1, var(--foo), 3); +} + +<===> +================================================================================ +<===> var/arg_3/input.scss +a {b: rgb(1, 2, var(--foo))} + +<===> var/arg_3/output.css +a { + b: rgb(1, 2, var(--foo)); +} + +<===> +================================================================================ +<===> env/arg_1/input.scss +a {b: rgb(env(--foo), 2, 3)} + +<===> env/arg_1/output.css +a { + b: rgb(env(--foo), 2, 3); +} + +<===> +================================================================================ +<===> env/arg_2/input.scss +a {b: rgb(1, env(--foo), 3)} + +<===> env/arg_2/output.css +a { + b: rgb(1, env(--foo), 3); } + +<===> +================================================================================ +<===> env/arg_3/input.scss +a {b: rgb(1, 2, env(--foo))} + +<===> env/arg_3/output.css +a { + b: rgb(1, 2, env(--foo)); +} + +<===> +================================================================================ +<===> min/arg_1/input.scss +a {b: rgb(min(1), 2, 3)} + +<===> min/arg_1/output.css +a { + b: rgb(min(1), 2, 3); +} + +<===> +================================================================================ +<===> min/arg_2/input.scss +a {b: rgb(1, min(2), 3)} + +<===> min/arg_2/output.css +a { + b: rgb(1, min(2), 3); +} + +<===> +================================================================================ +<===> min/arg_3/input.scss +a {b: rgb(1, 2, min(3))} + +<===> min/arg_3/output.css +a { + b: rgb(1, 2, min(3)); +} + +<===> +================================================================================ +<===> max/arg_1/input.scss +a {b: rgb(max(1), 2, 3)} + +<===> max/arg_1/output.css +a { + b: rgb(max(1), 2, 3); +} + +<===> +================================================================================ +<===> max/arg_2/input.scss +a {b: rgb(1, max(2), 3)} + +<===> max/arg_2/output.css +a { + b: rgb(1, max(2), 3); +} + +<===> +================================================================================ +<===> max/arg_3/input.scss +a {b: rgb(1, 2, max(3))} + +<===> max/arg_3/output.css +a { + b: rgb(1, 2, max(3)); +} + diff --git a/spec/core_functions/color/rgb/three_args/unitless.hrx b/spec/core_functions/color/rgb/three_args/unitless.hrx new file mode 100644 index 0000000000..a67b265f1c --- /dev/null +++ b/spec/core_functions/color/rgb/three_args/unitless.hrx @@ -0,0 +1,77 @@ +<===> README.md +Channels may be specified as unitless numbers between 0 and 255. + +<===> +================================================================================ +<===> numbers/input.scss +a {b: rgb(18, 52, 86)} + +<===> numbers/output.css +a { + b: #123456; +} + +<===> +================================================================================ +<===> beaded/input.scss +a {b: rgb(190, 173, 237)} + +<===> beaded/output.css +a { + b: #beaded; +} + +<===> +================================================================================ +<===> springgreen/input.scss +a {b: rgb(0, 255, 127)} + +<===> springgreen/output.css +a { + b: springgreen; +} + +<===> +================================================================================ +<===> named/input.scss +a {b: rgb($red: 0, $green: 255, $blue: 127)} + +<===> named/output.css +a { + b: springgreen; +} + +<===> +================================================================================ +<===> clamped/README.md +Channels that are out of bounds are clamped within bounds. + +<===> +================================================================================ +<===> clamped/red/input.scss +a {b: rgb(256, 0, 0)} + +<===> clamped/red/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> clamped/green/input.scss +a {b: rgb(0, -1, 0)} + +<===> clamped/green/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> clamped/blue/input.scss +a {b: rgb(0, 0, 9999)} + +<===> clamped/blue/output.css +a { + b: blue; +} diff --git a/spec/core_functions/color/rgb/two_args.hrx b/spec/core_functions/color/rgb/two_args.hrx index 105b2ae0cc..b1967ad892 100644 --- a/spec/core_functions/color/rgb/two_args.hrx +++ b/spec/core_functions/color/rgb/two_args.hrx @@ -3,59 +3,123 @@ :todo: - sass/libsass#2722 -<===> input.scss -opaque-to { - opaque: rgb(#123, 1); - partial: rgb(#123, 0.5); - transparent: rgb(#123, 0); +<===> +================================================================================ +<===> opaque_to/opaque/input.scss +a {b: rgb(#123, 1)} + +<===> opaque_to/opaque/output.css +a { + b: #112233; } -partial-to { - $color: rgb(0, 0, 255, 0.3); - opaque: rgb($color, 1); - partial: rgb($color, 0.5); - transparent: rgb($color, 0); +<===> +================================================================================ +<===> opaque_to/partial/input.scss +a {b: rgb(#123, 0.5)} + +<===> opaque_to/partial/output.css +a { + b: rgba(17, 34, 51, 0.5); } -transparent-to { - opaque: rgb(transparent, 1); - partial: rgb(transparent, 0.5); - transparent: rgb(transparent, 0); +<===> +================================================================================ +<===> opaque_to/transparent/input.scss +a {b: rgb(#123, 0)} + +<===> opaque_to/transparent/output.css +a { + b: rgba(17, 34, 51, 0); } -clamped { - opaque: rgb(#123, 1.1); - transparent: rgb(#123, -0.1); +<===> +================================================================================ +<===> partial_to/opaque/input.scss +a {b: rgb(rgba(0, 0, 255, 0.3), 1)} + +<===> partial_to/opaque/output.css +a { + b: blue; } -named { - x: rgb($color: #123, $alpha: 0.5); +<===> +================================================================================ +<===> partial_to/partial/input.scss +a {b: rgb(rgba(0, 0, 255, 0.3), 0.5)} + +<===> partial_to/partial/output.css +a { + b: rgba(0, 0, 255, 0.5); } -<===> output.css -opaque-to { - opaque: #112233; - partial: rgba(17, 34, 51, 0.5); - transparent: rgba(17, 34, 51, 0); +<===> +================================================================================ +<===> partial_to/transparent/input.scss +a {b: rgb(rgba(0, 0, 255, 0.3), 0)} + +<===> partial_to/transparent/output.css +a { + b: rgba(0, 0, 255, 0); } -partial-to { - opaque: blue; - partial: rgba(0, 0, 255, 0.5); - transparent: rgba(0, 0, 255, 0); +<===> +================================================================================ +<===> transparent_to/opaque/input.scss +a {b: rgb(transparent, 1)} + +<===> transparent_to/opaque/output.css +a { + b: black; } -transparent-to { - opaque: black; - partial: rgba(0, 0, 0, 0.5); - transparent: rgba(0, 0, 0, 0); +<===> +================================================================================ +<===> transparent_to/partial/input.scss +a {b: rgb(transparent, 0.5)} + +<===> transparent_to/partial/output.css +a { + b: rgba(0, 0, 0, 0.5); } -clamped { - opaque: #112233; - transparent: rgba(17, 34, 51, 0); +<===> +================================================================================ +<===> transparent_to/transparent/input.scss +a {b: rgb(transparent, 0)} + +<===> transparent_to/transparent/output.css +a { + b: rgba(0, 0, 0, 0); } -named { - x: rgba(17, 34, 51, 0.5); +<===> +================================================================================ +<===> clamped/opaque/input.scss +a {b: rgb(#123, 1.1)} + +<===> clamped/opaque/output.css +a { + b: #112233; +} + +<===> +================================================================================ +<===> clamped/transparent/input.scss +a {b: rgb(#123, -0.1)} + +<===> clamped/transparent/output.css +a { + b: rgba(17, 34, 51, 0); } + +<===> +================================================================================ +<===> named/input.scss +a {b: rgb($color: #123, $alpha: 0.5)} + +<===> named/output.css +a { + b: rgba(17, 34, 51, 0.5); +} + diff --git a/spec/core_functions/color/rgba/four_args/alpha_percent.hrx b/spec/core_functions/color/rgba/four_args/alpha_percent.hrx deleted file mode 100644 index e9791967de..0000000000 --- a/spec/core_functions/color/rgba/four_args/alpha_percent.hrx +++ /dev/null @@ -1,22 +0,0 @@ -<===> options.yml ---- -:todo: -- sass/libsass#2719 - -<===> input.scss -.alpha-percent { - negative: rgba(0, 0, 0, -10%); - min: rgba(0, 0, 0, 0%); - positive: rgba(0, 0, 0, 45.6%); - max: rgba(0, 0, 0, 100%); - above-max: rgba(0, 0, 0, 250%); -} - -<===> output.css -.alpha-percent { - negative: rgba(0, 0, 0, 0); - min: rgba(0, 0, 0, 0); - positive: rgba(0, 0, 0, 0.456); - max: black; - above-max: black; -} diff --git a/spec/core_functions/color/rgba/four_args/alpha_unitless.hrx b/spec/core_functions/color/rgba/four_args/alpha_unitless.hrx deleted file mode 100644 index 3f56394022..0000000000 --- a/spec/core_functions/color/rgba/four_args/alpha_unitless.hrx +++ /dev/null @@ -1,17 +0,0 @@ -<===> input.scss -.alpha-unitless { - negative: rgba(0, 0, 0, -10); - min: rgba(0, 0, 0, 0); - positive: rgba(0, 0, 0, 0.456); - max: rgba(0, 0, 0, 1); - above-max: rgba(0, 0, 0, 250); -} - -<===> output.css -.alpha-unitless { - negative: rgba(0, 0, 0, 0); - min: rgba(0, 0, 0, 0); - positive: rgba(0, 0, 0, 0.456); - max: black; - above-max: black; -} diff --git a/spec/core_functions/color/rgba/four_args/basic.hrx b/spec/core_functions/color/rgba/four_args/basic.hrx deleted file mode 100644 index 993004619a..0000000000 --- a/spec/core_functions/color/rgba/four_args/basic.hrx +++ /dev/null @@ -1,32 +0,0 @@ -<===> input.scss -basic { - transparent: rgba(0, 255, 127, 0); - opaque: rgba(190, 173, 237, 1); - partial: rgba(18, 52, 86, 0.5); - named: rgba($red: 0, $green: 255, $blue: 127, $alpha: 0.3); -} - -// Channels that are out of bounds are clamped within bounds. -clamped { - red: rgba(256, 0, 0, 0.5); - green: rgba(0, -1, 0, 0.5); - blue: rgba(0, 0, 9999, 0.5); - alpha-above: rgba(0, 0, 0, 1.1); - alpha-below: rgba(0, 0, 0, -0.1); -} - -<===> output.css -basic { - transparent: rgba(0, 255, 127, 0); - opaque: #beaded; - partial: rgba(18, 52, 86, 0.5); - named: rgba(0, 255, 127, 0.3); -} - -clamped { - red: rgba(255, 0, 0, 0.5); - green: rgba(0, 0, 0, 0.5); - blue: rgba(0, 0, 255, 0.5); - alpha-above: black; - alpha-below: rgba(0, 0, 0, 0); -} diff --git a/spec/core_functions/color/rgba/four_args/clamped.hrx b/spec/core_functions/color/rgba/four_args/clamped.hrx new file mode 100644 index 0000000000..493c86636b --- /dev/null +++ b/spec/core_functions/color/rgba/four_args/clamped.hrx @@ -0,0 +1,53 @@ +<===> README.md +Channels that are out of bounds are clamped within bounds. + +<===> +================================================================================ +<===> red/input.scss +a {b: rgba(256, 0, 0, 0.5)} + +<===> red/output.css +a { + b: rgba(255, 0, 0, 0.5); +} + +<===> +================================================================================ +<===> green/input.scss +a {b: rgba(0, -1, 0, 0.5)} + +<===> green/output.css +a { + b: rgba(0, 0, 0, 0.5); +} + +<===> +================================================================================ +<===> blue/input.scss +a {b: rgba(0, 0, 9999, 0.5)} + +<===> blue/output.css +a { + b: rgba(0, 0, 255, 0.5); +} + +<===> +================================================================================ +<===> alpha/above/input.scss +a {b: rgba(0, 0, 0, 1.1)} + +<===> alpha/above/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> alpha/below/input.scss +a {b: rgba(0, 0, 0, -0.1)} + +<===> alpha/below/output.css +a { + b: rgba(0, 0, 0, 0); +} + diff --git a/spec/core_functions/color/rgba/four_args/in_gamut.hrx b/spec/core_functions/color/rgba/four_args/in_gamut.hrx new file mode 100644 index 0000000000..66e3bcb419 --- /dev/null +++ b/spec/core_functions/color/rgba/four_args/in_gamut.hrx @@ -0,0 +1,37 @@ +<===> transparent/input.scss +a {b: rgba(0, 255, 127, 0)} + +<===> transparent/output.css +a { + b: rgba(0, 255, 127, 0); +} + +<===> +================================================================================ +<===> opaque/input.scss +a {b: rgba(190, 173, 237, 1)} + +<===> opaque/output.css +a { + b: #beaded; +} + +<===> +================================================================================ +<===> partial/input.scss +a {b: rgba(18, 52, 86, 0.5)} + +<===> partial/output.css +a { + b: rgba(18, 52, 86, 0.5); +} + +<===> +================================================================================ +<===> named/input.scss +a {b: rgba($red: 0, $green: 255, $blue: 127, $alpha: 0.3)} + +<===> named/output.css +a { + b: rgba(0, 255, 127, 0.3); +} diff --git a/spec/core_functions/color/rgba/four_args/special_functions.hrx b/spec/core_functions/color/rgba/four_args/special_functions.hrx index 538a712052..2c9b825c9a 100644 --- a/spec/core_functions/color/rgba/four_args/special_functions.hrx +++ b/spec/core_functions/color/rgba/four_args/special_functions.hrx @@ -3,63 +3,243 @@ :todo: - sass/libsass#2726 -<===> input.scss -a { - calc-1: rgba(calc(1), 2, 3, 0.4); - calc-2: rgba(1, calc(2), 3, 0.4); - calc-3: rgba(1, 2, calc(3), 0.4); - calc-4: rgba(1, 2, 3, calc(0.4)); - - var-1: rgba(var(--foo), 2, 3, 0.4); - var-2: rgba(1, var(--foo), 3, 0.4); - var-3: rgba(1, 2, var(--foo), 0.4); - var-4: rgba(1, 2, 3, var(--foo)); - - env-1: rgba(env(--foo), 2, 3, 0.4); - env-2: rgba(1, env(--foo), 3, 0.4); - env-3: rgba(1, 2, env(--foo), 0.4); - env-4: rgba(1, 2, 3, env(--foo)); - - min-1: rgba(min(1), 2, 3, 0.4); - min-2: rgba(1, min(2), 3, 0.4); - min-3: rgba(1, 2, min(3), 0.4); - min-4: rgba(1, 2, 3, min(0.4)); - - max-1: rgba(max(1), 2, 3, 0.4); - max-2: rgba(1, max(2), 3, 0.4); - max-3: rgba(1, 2, max(3), 0.4); - max-4: rgba(1, 2, 3, max(0.4)); - - calc-2-args: rgba(blue, calc(0.4)); - var-2-args-alpha: rgba(blue, var(--foo)); - var-2-args-color: rgba(var(--foo), 0.4); - var-2-args-both: rgba(var(--foo), var(--foo)); -} - -<===> output.css -a { - calc-1: rgba(calc(1), 2, 3, 0.4); - calc-2: rgba(1, calc(2), 3, 0.4); - calc-3: rgba(1, 2, calc(3), 0.4); - calc-4: rgba(1, 2, 3, calc(0.4)); - var-1: rgba(var(--foo), 2, 3, 0.4); - var-2: rgba(1, var(--foo), 3, 0.4); - var-3: rgba(1, 2, var(--foo), 0.4); - var-4: rgba(1, 2, 3, var(--foo)); - env-1: rgba(env(--foo), 2, 3, 0.4); - env-2: rgba(1, env(--foo), 3, 0.4); - env-3: rgba(1, 2, env(--foo), 0.4); - env-4: rgba(1, 2, 3, env(--foo)); - min-1: rgba(min(1), 2, 3, 0.4); - min-2: rgba(1, min(2), 3, 0.4); - min-3: rgba(1, 2, min(3), 0.4); - min-4: rgba(1, 2, 3, min(0.4)); - max-1: rgba(max(1), 2, 3, 0.4); - max-2: rgba(1, max(2), 3, 0.4); - max-3: rgba(1, 2, max(3), 0.4); - max-4: rgba(1, 2, 3, max(0.4)); - calc-2-args: rgba(0, 0, 255, calc(0.4)); - var-2-args-alpha: rgba(0, 0, 255, var(--foo)); - var-2-args-color: rgba(var(--foo), 0.4); - var-2-args-both: rgba(var(--foo), var(--foo)); +<===> +================================================================================ +<===> calc/arg_1/input.scss +a {b: rgba(calc(1), 2, 3, 0.4)} + +<===> calc/arg_1/output.css +a { + b: rgba(calc(1), 2, 3, 0.4); +} + +<===> +================================================================================ +<===> calc/arg_2/input.scss +a {b: rgba(1, calc(2), 3, 0.4)} + +<===> calc/arg_2/output.css +a { + b: rgba(1, calc(2), 3, 0.4); +} + +<===> +================================================================================ +<===> calc/arg_3/input.scss +a {b: rgba(1, 2, calc(3), 0.4)} + +<===> calc/arg_3/output.css +a { + b: rgba(1, 2, calc(3), 0.4); +} + +<===> +================================================================================ +<===> calc/arg_4/input.scss +a {b: rgba(1, 2, 3, calc(0.4))} + +<===> calc/arg_4/output.css +a { + b: rgba(1, 2, 3, calc(0.4)); +} + +<===> +================================================================================ +<===> var/arg_1/input.scss +a {b: rgba(var(--foo), 2, 3, 0.4)} + +<===> var/arg_1/output.css +a { + b: rgba(var(--foo), 2, 3, 0.4); +} + +<===> +================================================================================ +<===> var/arg_2/input.scss +a {b: rgba(1, var(--foo), 3, 0.4)} + +<===> var/arg_2/output.css +a { + b: rgba(1, var(--foo), 3, 0.4); +} + +<===> +================================================================================ +<===> var/arg_3/input.scss +a {b: rgba(1, 2, var(--foo), 0.4)} + +<===> var/arg_3/output.css +a { + b: rgba(1, 2, var(--foo), 0.4); +} + +<===> +================================================================================ +<===> var/arg_4/input.scss +a {b: rgba(1, 2, 3, var(--foo))} + +<===> var/arg_4/output.css +a { + b: rgba(1, 2, 3, var(--foo)); +} + +<===> +================================================================================ +<===> env/arg_1/input.scss +a {b: rgba(env(--foo), 2, 3, 0.4)} + +<===> env/arg_1/output.css +a { + b: rgba(env(--foo), 2, 3, 0.4); +} + +<===> +================================================================================ +<===> env/arg_2/input.scss +a {b: rgba(1, env(--foo), 3, 0.4)} + +<===> env/arg_2/output.css +a { + b: rgba(1, env(--foo), 3, 0.4); +} + +<===> +================================================================================ +<===> env/arg_3/input.scss +a {b: rgba(1, 2, env(--foo), 0.4)} + +<===> env/arg_3/output.css +a { + b: rgba(1, 2, env(--foo), 0.4); } + +<===> +================================================================================ +<===> env/arg_4/input.scss +a {b: rgba(1, 2, 3, env(--foo))} + +<===> env/arg_4/output.css +a { + b: rgba(1, 2, 3, env(--foo)); +} + +<===> +================================================================================ +<===> min/arg_1/input.scss +a {b: rgba(min(1), 2, 3, 0.4)} + +<===> min/arg_1/output.css +a { + b: rgba(min(1), 2, 3, 0.4); +} + +<===> +================================================================================ +<===> min/arg_2/input.scss +a {b: rgba(1, min(2), 3, 0.4)} + +<===> min/arg_2/output.css +a { + b: rgba(1, min(2), 3, 0.4); +} + +<===> +================================================================================ +<===> min/arg_3/input.scss +a {b: rgba(1, 2, min(3), 0.4)} + +<===> min/arg_3/output.css +a { + b: rgba(1, 2, min(3), 0.4); +} + +<===> +================================================================================ +<===> min/arg_4/input.scss +a {b: rgba(1, 2, 3, min(0.4))} + +<===> min/arg_4/output.css +a { + b: rgba(1, 2, 3, min(0.4)); +} + +<===> +================================================================================ +<===> max/arg_1/input.scss +a {b: rgba(max(1), 2, 3, 0.4)} + +<===> max/arg_1/output.css +a { + b: rgba(max(1), 2, 3, 0.4); +} + +<===> +================================================================================ +<===> max/arg_2/input.scss +a {b: rgba(1, max(2), 3, 0.4)} + +<===> max/arg_2/output.css +a { + b: rgba(1, max(2), 3, 0.4); +} + +<===> +================================================================================ +<===> max/arg_3/input.scss +a {b: rgba(1, 2, max(3), 0.4)} + +<===> max/arg_3/output.css +a { + b: rgba(1, 2, max(3), 0.4); +} + +<===> +================================================================================ +<===> max/arg_4/input.scss +a {b: rgba(1, 2, 3, max(0.4))} + +<===> max/arg_4/output.css +a { + b: rgba(1, 2, 3, max(0.4)); +} + +<===> +================================================================================ +<===> calc/arg_2/args/input.scss +a {b: rgba(blue, calc(0.4))} + +<===> calc/arg_2/args/output.css +a { + b: rgba(0, 0, 255, calc(0.4)); +} + +<===> +================================================================================ +<===> var/arg_2/args/alpha/input.scss +a {b: rgba(blue, var(--foo))} + +<===> var/arg_2/args/alpha/output.css +a { + b: rgba(0, 0, 255, var(--foo)); +} + +<===> +================================================================================ +<===> var/arg_2/args/color/input.scss +a {b: rgba(var(--foo), 0.4)} + +<===> var/arg_2/args/color/output.css +a { + b: rgba(var(--foo), 0.4); +} + +<===> +================================================================================ +<===> var/arg_2/args/both/input.scss +a {b: rgba(var(--foo), var(--foo))} + +<===> var/arg_2/args/both/output.css +a { + b: rgba(var(--foo), var(--foo)); +} + diff --git a/spec/core_functions/color/rgba/multi_argument_var.hrx b/spec/core_functions/color/rgba/multi_argument_var.hrx index a99146d028..9cc1871455 100644 --- a/spec/core_functions/color/rgba/multi_argument_var.hrx +++ b/spec/core_functions/color/rgba/multi_argument_var.hrx @@ -3,23 +3,64 @@ :todo: - libsass -<===> input.scss +<===> +================================================================================ +<===> 1_of_3/input.scss +// var() is substituted before parsing, so it may contain multiple arguments. +a {b: rgba(var(--foo), 3, 0.4)} + +<===> 1_of_3/output.css a { - // var() is substituted before parsing, so it may contain multiple arguments. b: rgba(var(--foo), 3, 0.4); - b: rgba(1, var(--foo), 0.4); - b: rgba(1, 2, var(--foo)); - b: rgba(var(--foo), 0.4); - b: rgba(1, var(--foo)); - b: rgba(var(--foo)); } -<===> output.css +<===> +================================================================================ +<===> 2_of_3/input.scss +a {b: rgba(1, var(--foo), 0.4)} + +<===> 2_of_3/output.css a { - b: rgba(var(--foo), 3, 0.4); b: rgba(1, var(--foo), 0.4); +} + +<===> +================================================================================ +<===> 3_of_3/input.scss +a {b: rgba(1, 2, var(--foo))} + +<===> 3_of_3/output.css +a { b: rgba(1, 2, var(--foo)); +} + +<===> +================================================================================ +<===> 1_of_2/input.scss +a {b: rgba(var(--foo), 0.4)} + +<===> 1_of_2/output.css +a { b: rgba(var(--foo), 0.4); +} + +<===> +================================================================================ +<===> 2_of_2/input.scss +a {b: rgba(1, var(--foo))} + +<===> 2_of_2/output.css +a { b: rgba(1, var(--foo)); +} + +<===> +================================================================================ +<===> 1_of_1/input.scss +a {b: rgba(var(--foo))} + +<===> 1_of_1/output.css +a { b: rgba(var(--foo)); } + diff --git a/spec/core_functions/color/rgba/one_arg/alpha.hrx b/spec/core_functions/color/rgba/one_arg/alpha.hrx index 24f96898b7..e0959b2160 100644 --- a/spec/core_functions/color/rgba/one_arg/alpha.hrx +++ b/spec/core_functions/color/rgba/one_arg/alpha.hrx @@ -1,42 +1,134 @@ -<===> input.scss -basic { - transparent: rgba(0 255 127 / 0); - opaque: rgba(190 173 237 / 1); - partial: rgba(18 52 86 / 0.5); - percent: rgba(18 52 86 / 50%); - named: rgba($channels: 0 255 127 / 0.3); - - // Extra parens shouldn't cause the slash to be forced into division. - parenthesized: (rgba(0 255 127 / 0.3)); -} - -// Channels that are out of bounds are clamped within bounds. -clamped { - red: rgba(256 0 0 / 0.5); - green: rgba(0 -1 0 / 0.5); - blue: rgba(0 0 9999 / 0.5); - alpha-above: rgba(0 0 0 / 1.1); - alpha-below: rgba(0 0 0 / -0.1); - alpha-above-percent: rgba(0 0 0 / 250%); - alpha-below-percent: rgba(0 0 0 / -10%); -} - -<===> output.css -basic { - transparent: rgba(0, 255, 127, 0); - opaque: #beaded; - partial: rgba(18, 52, 86, 0.5); - percent: rgba(18, 52, 86, 0.5); - named: rgba(0, 255, 127, 0.3); - parenthesized: rgba(0, 255, 127, 0.3); -} - -clamped { - red: rgba(255, 0, 0, 0.5); - green: rgba(0, 0, 0, 0.5); - blue: rgba(0, 0, 255, 0.5); - alpha-above: black; - alpha-below: rgba(0, 0, 0, 0); - alpha-above-percent: black; - alpha-below-percent: rgba(0, 0, 0, 0); +<===> in_gamut/transparent/input.scss +a {b: rgba(0 255 127 / 0)} + +<===> in_gamut/transparent/output.css +a { + b: rgba(0, 255, 127, 0); +} + +<===> +================================================================================ +<===> in_gamut/opaque/input.scss +a {b: rgba(190 173 237 / 1)} + +<===> in_gamut/opaque/output.css +a { + b: #beaded; +} + +<===> +================================================================================ +<===> in_gamut/partial/input.scss +a {b: rgba(18 52 86 / 0.5)} + +<===> in_gamut/partial/output.css +a { + b: rgba(18, 52, 86, 0.5); +} + +<===> +================================================================================ +<===> in_gamut/percent/input.scss +a {b: rgba(18 52 86 / 50%)} + +<===> in_gamut/percent/output.css +a { + b: rgba(18, 52, 86, 0.5); +} + +<===> +================================================================================ +<===> in_gamut/named/input.scss +a {b: rgba($channels: 0 255 127 / 0.3)} + +<===> in_gamut/named/output.css +a { + b: rgba(0, 255, 127, 0.3); +} + +<===> +================================================================================ +<===> in_gamut/parenthesized/input.scss +// Extra parens shouldn't cause the slash to be forced into division. +a {b: rgba(0 255 127 / 0.3)} + +<===> in_gamut/parenthesized/output.css +a { + b: rgba(0, 255, 127, 0.3); +} + +<===> +================================================================================ +<===> clamped/README.md +Channels that are out of bounds are clamped within bounds. + +<===> +================================================================================ +<===> clamped/red/input.scss +a {b: rgba(256 0 0 / 0.5)} + +<===> clamped/red/output.css +a { + b: rgba(255, 0, 0, 0.5); } + +<===> +================================================================================ +<===> clamped/green/input.scss +a {b: rgba(0 -1 0 / 0.5)} + +<===> clamped/green/output.css +a { + b: rgba(0, 0, 0, 0.5); +} + +<===> +================================================================================ +<===> clamped/blue/input.scss +a {b: rgba(0 0 9999 / 0.5)} + +<===> clamped/blue/output.css +a { + b: rgba(0, 0, 255, 0.5); +} + +<===> +================================================================================ +<===> clamped/alpha/above/input.scss +a {b: rgba(0 0 0 / 1.1)} + +<===> clamped/alpha/above/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> clamped/alpha/below/input.scss +a {b: rgba(0 0 0 / -0.1)} + +<===> clamped/alpha/below/output.css +a { + b: rgba(0, 0, 0, 0); +} + +<===> +================================================================================ +<===> clamped/alpha/above/percent/input.scss +a {b: rgba(0 0 0 / 250%)} + +<===> clamped/alpha/above/percent/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> clamped/alpha/below/percent/input.scss +a {b: rgba(0 0 0 / -10%)} + +<===> clamped/alpha/below/percent/output.css +a { + b: rgba(0, 0, 0, 0); +} + diff --git a/spec/core_functions/color/rgba/one_arg/basic.hrx b/spec/core_functions/color/rgba/one_arg/basic.hrx deleted file mode 100644 index cbc84bcf4d..0000000000 --- a/spec/core_functions/color/rgba/one_arg/basic.hrx +++ /dev/null @@ -1,56 +0,0 @@ -<===> input.scss -// Channels may be specified as unitless numbers between 0 and 255. -unitless { - numbers: rgba(18 52 86); - beaded: rgba(190 173 237); - springgreen: rgba(0 255 127); - named: rgba($channels: 0 255 127); - - // Channels that are out of bounds are clamped within bounds. - clamped { - red: rgba(256 0 0); - green: rgba(0 -1 0); - blue: rgba(0 0 9999); - } -} - -// Channels may also be specified as percents between 0% and 100%, which may be -// mixed with unitless numbers. -percents { - all-percent: rgba(7.1% 20.4% 33.9%); - unitless-green: rgba(74.7% 173 93%); - percent-green: rgba(190 68% 237); - boundaries: rgba(0% 100% 50%); - - // Channels that are out of bounds are clamped within bounds. - clamped { - red: rgba(100.1% 0 0); - green: rgba(0 -0.1% 0); - blue: rgba(0 0 200%); - } -} - -<===> output.css -unitless { - numbers: #123456; - beaded: #beaded; - springgreen: springgreen; - named: springgreen; -} -unitless clamped { - red: red; - green: black; - blue: blue; -} - -percents { - all-percent: #123456; - unitless-green: #beaded; - percent-green: #beaded; - boundaries: #00ff80; -} -percents clamped { - red: red; - green: black; - blue: blue; -} diff --git a/spec/core_functions/color/rgba/one_arg/no_alpha.hrx b/spec/core_functions/color/rgba/one_arg/no_alpha.hrx new file mode 100644 index 0000000000..979ce58834 --- /dev/null +++ b/spec/core_functions/color/rgba/one_arg/no_alpha.hrx @@ -0,0 +1,159 @@ +<===> unitless/README.md +Channels may be specified as unitless numbers between 0 and 255. + +<===> +================================================================================ +<===> unitless/numbers/input.scss +a {b: rgba(18 52 86)} + +<===> unitless/numbers/output.css +a { + b: #123456; +} + +<===> +================================================================================ +<===> unitless/beaded/input.scss +a {b: rgba(190 173 237)} + +<===> unitless/beaded/output.css +a { + b: #beaded; +} + +<===> +================================================================================ +<===> unitless/springgreen/input.scss +a {b: rgba(0 255 127)} + +<===> unitless/springgreen/output.css +a { + b: springgreen; +} + +<===> +================================================================================ +<===> unitless/named/input.scss +a {b: rgba($channels: 0 255 127)} + +<===> unitless/named/output.css +a { + b: springgreen; +} + +<===> +================================================================================ +<===> unitless/clamped/README.md +Channels that are out of bounds are clamped within bounds. + +<===> +================================================================================ +<===> unitless/clamped/red/input.scss +a {b: rgba(256 0 0)} + +<===> unitless/clamped/red/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> unitless/clamped/green/input.scss +a {b: rgba(0 -1 0)} + +<===> unitless/clamped/green/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> unitless/clamped/blue/input.scss +a {b: rgba(0 0 9999)} + +<===> unitless/clamped/blue/output.css +a { + b: blue; +} + +<===> +================================================================================ +<===> percents/README.md +Channels may also be specified as percents between 0% and 100%, which may be +// mixed with unitless numbers. + +<===> +================================================================================ +<===> percents/all/percent/input.scss +a {b: rgba(7.1% 20.4% 33.9%)} + +<===> percents/all/percent/output.css +a { + b: #123456; +} + +<===> +================================================================================ +<===> percents/unitless/green/input.scss +a {b: rgba(74.7% 173 93%)} + +<===> percents/unitless/green/output.css +a { + b: #beaded; +} + +<===> +================================================================================ +<===> percents/percent/green/input.scss +a {b: rgba(190 68% 237)} + +<===> percents/percent/green/output.css +a { + b: #beaded; +} + +<===> +================================================================================ +<===> percents/boundaries/input.scss +a {b: rgba(0% 100% 50%)} + +<===> percents/boundaries/output.css +a { + b: #00ff80; +} + +<===> +================================================================================ +<===> percents/clamped/README.md +Channels that are out of bounds are clamped within bounds. + +<===> +================================================================================ +<===> percents/clamped/red/input.scss +a {b: rgba(100.1% 0 0)} + +<===> percents/clamped/red/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> percents/clamped/green/input.scss +a {b: rgba(0 -0.1% 0)} + +<===> percents/clamped/green/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> percents/clamped/blue/input.scss +a {b: rgba(0 0 200%)} + +<===> percents/clamped/blue/output.css +a { + b: blue; +} + diff --git a/spec/core_functions/color/rgba/one_arg/special_functions.hrx b/spec/core_functions/color/rgba/one_arg/special_functions.hrx index 70f0fe4d8c..8a3c4da094 100644 --- a/spec/core_functions/color/rgba/one_arg/special_functions.hrx +++ b/spec/core_functions/color/rgba/one_arg/special_functions.hrx @@ -3,110 +3,414 @@ :todo: - sass/libsass#2726 -<===> input.scss -no-alpha { - calc-1: rgba(calc(1) 2 3); - calc-2: rgba(1 calc(2) 3); - calc-3: rgba(1 2 calc(3)); - - var-1: rgba(var(--foo) 2 3); - var-2: rgba(1 var(--foo) 3); - var-3: rgba(1 2 var(--foo)); - - env-1: rgba(env(--foo) 2 3); - env-2: rgba(1 env(--foo) 3); - env-3: rgba(1 2 env(--foo)); - - min-1: rgba(min(1) 2 3); - min-2: rgba(1 min(2) 3); - min-3: rgba(1 2 min(3)); - - max-1: rgba(max(1) 2 3); - max-2: rgba(1 max(2) 3); - max-3: rgba(1 2 max(3)); - - // var() is substituted before parsing, so it may contain multiple arguments. - multi-argument-var-1-of-2: rgba(var(--foo) 2); - multi-argument-var-2-of-2: rgba(1 var(--foo)); - multi-argument-var-1-of-1: rgba(var(--foo)); -} - -alpha { - calc-1: rgba(calc(1) 2 3 / 0.4); - calc-2: rgba(1 calc(2) 3 / 0.4); - calc-3: rgba(1 2 calc(3) / 0.4); - calc-4: rgba(1 2 3 / calc(0.4)); - - var-1: rgba(var(--foo) 2 3 / 0.4); - var-2: rgba(1 var(--foo) 3 / 0.4); - var-3: rgba(1 2 var(--foo) / 0.4); - var-4: rgba(1 2 3 / var(--foo)); - - env-1: rgba(env(--foo) 2 3 / 0.4); - env-2: rgba(1 env(--foo) 3 / 0.4); - env-3: rgba(1 2 env(--foo) / 0.4); - env-4: rgba(1 2 3 / env(--foo)); - - min-1: rgba(min(1) 2 3 / 0.4); - min-2: rgba(1 min(2) 3 / 0.4); - min-3: rgba(1 2 min(3) / 0.4); - min-4: rgba(1 2 3 / min(0.4)); - - max-1: rgba(max(1) 2 3 / 0.4); - max-2: rgba(1 max(2) 3 / 0.4); - max-3: rgba(1 2 max(3) / 0.4); - max-4: rgba(1 2 3 / max(0.4)); - - // var() is substituted before parsing, so it may contain multiple arguments. - multi-argument-var-1-of-2: rgba(var(--foo) 2 / 0.4); - multi-argument-var-2-of-2: rgba(1 var(--foo) / 0.4); - multi-argument-var-1-of-1: rgba(var(--foo) / 0.4); -} - -<===> output.css -no-alpha { - calc-1: rgba(calc(1), 2, 3); - calc-2: rgba(1, calc(2), 3); - calc-3: rgba(1, 2, calc(3)); - var-1: rgba(var(--foo), 2, 3); - var-2: rgba(1, var(--foo), 3); - var-3: rgba(1, 2, var(--foo)); - env-1: rgba(env(--foo), 2, 3); - env-2: rgba(1, env(--foo), 3); - env-3: rgba(1, 2, env(--foo)); - min-1: rgba(min(1), 2, 3); - min-2: rgba(1, min(2), 3); - min-3: rgba(1, 2, min(3)); - max-1: rgba(max(1), 2, 3); - max-2: rgba(1, max(2), 3); - max-3: rgba(1, 2, max(3)); - multi-argument-var-1-of-2: rgba(var(--foo) 2); - multi-argument-var-2-of-2: rgba(1 var(--foo)); - multi-argument-var-1-of-1: rgba(var(--foo)); -} - -alpha { - calc-1: rgba(calc(1), 2, 3, 0.4); - calc-2: rgba(1, calc(2), 3, 0.4); - calc-3: rgba(1 2 calc(3)/0.4); - calc-4: rgba(1 2 3/calc(0.4)); - var-1: rgba(var(--foo), 2, 3, 0.4); - var-2: rgba(1, var(--foo), 3, 0.4); - var-3: rgba(1 2 var(--foo)/0.4); - var-4: rgba(1 2 3/var(--foo)); - env-1: rgba(env(--foo), 2, 3, 0.4); - env-2: rgba(1, env(--foo), 3, 0.4); - env-3: rgba(1 2 env(--foo)/0.4); - env-4: rgba(1 2 3/env(--foo)); - min-1: rgba(min(1), 2, 3, 0.4); - min-2: rgba(1, min(2), 3, 0.4); - min-3: rgba(1 2 min(3)/0.4); - min-4: rgba(1 2 3/min(0.4)); - max-1: rgba(max(1), 2, 3, 0.4); - max-2: rgba(1, max(2), 3, 0.4); - max-3: rgba(1 2 max(3)/0.4); - max-4: rgba(1 2 3/max(0.4)); - multi-argument-var-1-of-2: rgba(var(--foo) 2/0.4); - multi-argument-var-2-of-2: rgba(1 var(--foo)/0.4); - multi-argument-var-1-of-1: rgba(var(--foo)/0.4); +<===> +================================================================================ +<===> no_alpha/calc/arg_1/input.scss +a {b: rgba(calc(1) 2 3)} + +<===> no_alpha/calc/arg_1/output.css +a { + b: rgba(calc(1), 2, 3); +} + +<===> +================================================================================ +<===> no_alpha/calc/arg_2/input.scss +a {b: rgba(1 calc(2) 3)} + +<===> no_alpha/calc/arg_2/output.css +a { + b: rgba(1, calc(2), 3); +} + +<===> +================================================================================ +<===> no_alpha/calc/arg_3/input.scss +a {b: rgba(1 2 calc(3))} + +<===> no_alpha/calc/arg_3/output.css +a { + b: rgba(1, 2, calc(3)); +} + +<===> +================================================================================ +<===> no_alpha/var/arg_1/input.scss +a {b: rgba(var(--foo) 2 3)} + +<===> no_alpha/var/arg_1/output.css +a { + b: rgba(var(--foo), 2, 3); +} + +<===> +================================================================================ +<===> no_alpha/var/arg_2/input.scss +a {b: rgba(1 var(--foo) 3)} + +<===> no_alpha/var/arg_2/output.css +a { + b: rgba(1, var(--foo), 3); +} + +<===> +================================================================================ +<===> no_alpha/var/arg_3/input.scss +a {b: rgba(1 2 var(--foo))} + +<===> no_alpha/var/arg_3/output.css +a { + b: rgba(1, 2, var(--foo)); +} + +<===> +================================================================================ +<===> no_alpha/env/arg_1/input.scss +a {b: rgba(env(--foo) 2 3)} + +<===> no_alpha/env/arg_1/output.css +a { + b: rgba(env(--foo), 2, 3); +} + +<===> +================================================================================ +<===> no_alpha/env/arg_2/input.scss +a {b: rgba(1 env(--foo) 3)} + +<===> no_alpha/env/arg_2/output.css +a { + b: rgba(1, env(--foo), 3); +} + +<===> +================================================================================ +<===> no_alpha/env/arg_3/input.scss +a {b: rgba(1 2 env(--foo))} + +<===> no_alpha/env/arg_3/output.css +a { + b: rgba(1, 2, env(--foo)); +} + +<===> +================================================================================ +<===> no_alpha/min/arg_1/input.scss +a {b: rgba(min(1) 2 3)} + +<===> no_alpha/min/arg_1/output.css +a { + b: rgba(min(1), 2, 3); +} + +<===> +================================================================================ +<===> no_alpha/min/arg_2/input.scss +a {b: rgba(1 min(2) 3)} + +<===> no_alpha/min/arg_2/output.css +a { + b: rgba(1, min(2), 3); +} + +<===> +================================================================================ +<===> no_alpha/min/arg_3/input.scss +a {b: rgba(1 2 min(3))} + +<===> no_alpha/min/arg_3/output.css +a { + b: rgba(1, 2, min(3)); +} + +<===> +================================================================================ +<===> no_alpha/max/arg_1/input.scss +a {b: rgba(max(1) 2 3)} + +<===> no_alpha/max/arg_1/output.css +a { + b: rgba(max(1), 2, 3); +} + +<===> +================================================================================ +<===> no_alpha/max/arg_2/input.scss +a {b: rgba(1 max(2) 3)} + +<===> no_alpha/max/arg_2/output.css +a { + b: rgba(1, max(2), 3); +} + +<===> +================================================================================ +<===> no_alpha/max/arg_3/input.scss +a {b: rgba(1 2 max(3))} + +<===> no_alpha/max/arg_3/output.css +a { + b: rgba(1, 2, max(3)); +} + +<===> +================================================================================ +<===> no_alpha/multi_argument_var/1_of_2/input.scss +// var() is substituted before parsing, so it may contain multiple arguments. +a {b: rgba(var(--foo) 2)} + +<===> no_alpha/multi_argument_var/1_of_2/output.css +a { + b: rgba(var(--foo) 2); +} + +<===> +================================================================================ +<===> no_alpha/multi_argument_var/2_of_2/input.scss +a {b: rgba(1 var(--foo))} + +<===> no_alpha/multi_argument_var/2_of_2/output.css +a { + b: rgba(1 var(--foo)); +} + +<===> +================================================================================ +<===> no_alpha/multi_argument_var/1_of_1/input.scss +a {b: rgba(var(--foo))} + +<===> no_alpha/multi_argument_var/1_of_1/output.css +a { + b: rgba(var(--foo)); +} + +<===> +================================================================================ +<===> alpha/calc/arg_1/input.scss +a {b: rgba(calc(1) 2 3 / 0.4)} + +<===> alpha/calc/arg_1/output.css +a { + b: rgba(calc(1), 2, 3, 0.4); +} + +<===> +================================================================================ +<===> alpha/calc/arg_2/input.scss +a {b: rgba(1 calc(2) 3 / 0.4)} + +<===> alpha/calc/arg_2/output.css +a { + b: rgba(1, calc(2), 3, 0.4); +} + +<===> +================================================================================ +<===> alpha/calc/arg_3/input.scss +a {b: rgba(1 2 calc(3) / 0.4)} + +<===> alpha/calc/arg_3/output.css +a { + b: rgba(1 2 calc(3)/0.4); +} + +<===> +================================================================================ +<===> alpha/calc/arg_4/input.scss +a {b: rgba(1 2 3 / calc(0.4))} + +<===> alpha/calc/arg_4/output.css +a { + b: rgba(1 2 3/calc(0.4)); +} + +<===> +================================================================================ +<===> alpha/var/arg_1/input.scss +a {b: rgba(var(--foo) 2 3 / 0.4)} + +<===> alpha/var/arg_1/output.css +a { + b: rgba(var(--foo), 2, 3, 0.4); +} + +<===> +================================================================================ +<===> alpha/var/arg_2/input.scss +a {b: rgba(1 var(--foo) 3 / 0.4)} + +<===> alpha/var/arg_2/output.css +a { + b: rgba(1, var(--foo), 3, 0.4); +} + +<===> +================================================================================ +<===> alpha/var/arg_3/input.scss +a {b: rgba(1 2 var(--foo) / 0.4)} + +<===> alpha/var/arg_3/output.css +a { + b: rgba(1 2 var(--foo)/0.4); +} + +<===> +================================================================================ +<===> alpha/var/arg_4/input.scss +a {b: rgba(1 2 3 / var(--foo))} + +<===> alpha/var/arg_4/output.css +a { + b: rgba(1 2 3/var(--foo)); +} + +<===> +================================================================================ +<===> alpha/env/arg_1/input.scss +a {b: rgba(env(--foo) 2 3 / 0.4)} + +<===> alpha/env/arg_1/output.css +a { + b: rgba(env(--foo), 2, 3, 0.4); +} + +<===> +================================================================================ +<===> alpha/env/arg_2/input.scss +a {b: rgba(1 env(--foo) 3 / 0.4)} + +<===> alpha/env/arg_2/output.css +a { + b: rgba(1, env(--foo), 3, 0.4); +} + +<===> +================================================================================ +<===> alpha/env/arg_3/input.scss +a {b: rgba(1 2 env(--foo) / 0.4)} + +<===> alpha/env/arg_3/output.css +a { + b: rgba(1 2 env(--foo)/0.4); +} + +<===> +================================================================================ +<===> alpha/env/arg_4/input.scss +a {b: rgba(1 2 3 / env(--foo))} + +<===> alpha/env/arg_4/output.css +a { + b: rgba(1 2 3/env(--foo)); +} + +<===> +================================================================================ +<===> alpha/min/arg_1/input.scss +a {b: rgba(min(1) 2 3 / 0.4)} + +<===> alpha/min/arg_1/output.css +a { + b: rgba(min(1), 2, 3, 0.4); +} + +<===> +================================================================================ +<===> alpha/min/arg_2/input.scss +a {b: rgba(1 min(2) 3 / 0.4)} + +<===> alpha/min/arg_2/output.css +a { + b: rgba(1, min(2), 3, 0.4); +} + +<===> +================================================================================ +<===> alpha/min/arg_3/input.scss +a {b: rgba(1 2 min(3) / 0.4)} + +<===> alpha/min/arg_3/output.css +a { + b: rgba(1 2 min(3)/0.4); +} + +<===> +================================================================================ +<===> alpha/min/arg_4/input.scss +a {b: rgba(1 2 3 / min(0.4))} + +<===> alpha/min/arg_4/output.css +a { + b: rgba(1 2 3/min(0.4)); +} + +<===> +================================================================================ +<===> alpha/max/arg_1/input.scss +a {b: rgba(max(1) 2 3 / 0.4)} + +<===> alpha/max/arg_1/output.css +a { + b: rgba(max(1), 2, 3, 0.4); +} + +<===> +================================================================================ +<===> alpha/max/arg_2/input.scss +a {b: rgba(1 max(2) 3 / 0.4)} + +<===> alpha/max/arg_2/output.css +a { + b: rgba(1, max(2), 3, 0.4); +} + +<===> +================================================================================ +<===> alpha/max/arg_3/input.scss +a {b: rgba(1 2 max(3) / 0.4)} + +<===> alpha/max/arg_3/output.css +a { + b: rgba(1 2 max(3)/0.4); +} + +<===> +================================================================================ +<===> alpha/max/arg_4/input.scss +a {b: rgba(1 2 3 / max(0.4))} + +<===> alpha/max/arg_4/output.css +a { + b: rgba(1 2 3/max(0.4)); +} + +<===> +================================================================================ +<===> alpha/multi_argument_var/1_of_2/input.scss +// var() is substituted before parsing, so it may contain multiple arguments. +a {b: rgba(var(--foo) 2 / 0.4)} + +<===> alpha/multi_argument_var/1_of_2/output.css +a { + b: rgba(var(--foo) 2/0.4); +} + +<===> +================================================================================ +<===> alpha/multi_argument_var/2_of_2/input.scss +a {b: rgba(1 var(--foo) / 0.4)} + +<===> alpha/multi_argument_var/2_of_2/output.css +a { + b: rgba(1 var(--foo)/0.4); +} + +<===> +================================================================================ +<===> alpha/multi_argument_var/1_of_1/input.scss +a {b: rgba(var(--foo) / 0.4)} + +<===> alpha/multi_argument_var/1_of_1/output.css +a { + b: rgba(var(--foo)/0.4); } diff --git a/spec/core_functions/color/rgba/three_args/basic.hrx b/spec/core_functions/color/rgba/three_args/basic.hrx deleted file mode 100644 index a54b9670f1..0000000000 --- a/spec/core_functions/color/rgba/three_args/basic.hrx +++ /dev/null @@ -1,56 +0,0 @@ -<===> input.scss -// Channels may be specified as unitless numbers between 0 and 255. -unitless { - numbers: rgba(18, 52, 86); - beaded: rgba(190, 173, 237); - springgreen: rgba(0, 255, 127); - named: rgba($red: 0, $green: 255, $blue: 127); - - // Channels that are out of bounds are clamped within bounds. - clamped { - red: rgba(256, 0, 0); - green: rgba(0, -1, 0); - blue: rgba(0, 0, 9999); - } -} - -// Channels may also be specified as percents between 0% and 100%, which may be -// mixed with unitless numbers. -percents { - all-percent: rgba(7.1%, 20.4%, 33.9%); - unitless-green: rgba(74.7%, 173, 93%); - percent-green: rgba(190, 68%, 237); - boundaries: rgba(0%, 100%, 50%); - - // Channels that are out of bounds are clamped within bounds. - clamped { - red: rgba(100.1%, 0, 0); - green: rgba(0, -0.1%, 0); - blue: rgba(0, 0, 200%); - } -} - -<===> output.css -unitless { - numbers: #123456; - beaded: #beaded; - springgreen: springgreen; - named: springgreen; -} -unitless clamped { - red: red; - green: black; - blue: blue; -} - -percents { - all-percent: #123456; - unitless-green: #beaded; - percent-green: #beaded; - boundaries: #00ff80; -} -percents clamped { - red: red; - green: black; - blue: blue; -} diff --git a/spec/core_functions/color/rgba/three_args/percents.hrx b/spec/core_functions/color/rgba/three_args/percents.hrx new file mode 100644 index 0000000000..8821c5144e --- /dev/null +++ b/spec/core_functions/color/rgba/three_args/percents.hrx @@ -0,0 +1,81 @@ +<===> +================================================================================ +<===> README.md +Channels may also be specified as percents between 0% and 100%, which may be +mixed with unitless numbers. + +<===> +================================================================================ +<===> all/percent/input.scss +a {b: rgba(7.1%, 20.4%, 33.9%)} + +<===> all/percent/output.css +a { + b: #123456; +} + +<===> +================================================================================ +<===> unitless/green/input.scss +a {b: rgba(74.7%, 173, 93%)} + +<===> unitless/green/output.css +a { + b: #beaded; +} + +<===> +================================================================================ +<===> percent/green/input.scss +a {b: rgba(190, 68%, 237)} + +<===> percent/green/output.css +a { + b: #beaded; +} + +<===> +================================================================================ +<===> boundaries/input.scss +a {b: rgba(0%, 100%, 50%)} + +<===> boundaries/output.css +a { + b: #00ff80; +} + +<===> +================================================================================ +<===> clamped/README.md +Channels that are out of bounds are clamped within bounds. + +<===> +================================================================================ +<===> clamped/red/input.scss +a {b: rgba(100.1%, 0, 0)} + +<===> clamped/red/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> clamped/green/input.scss +a {b: rgba(0, -0.1%, 0)} + +<===> clamped/green/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> clamped/blue/input.scss +a {b: rgba(0, 0, 200%)} + +<===> clamped/blue/output.css +a { + b: blue; +} + diff --git a/spec/core_functions/color/rgba/three_args/special_functions.hrx b/spec/core_functions/color/rgba/three_args/special_functions.hrx index 810c4037c1..d3e9399b83 100644 --- a/spec/core_functions/color/rgba/three_args/special_functions.hrx +++ b/spec/core_functions/color/rgba/three_args/special_functions.hrx @@ -3,44 +3,153 @@ :todo: - sass/libsass#2726 -<===> input.scss -a { - calc-1: rgba(calc(1), 2, 3); - calc-2: rgba(1, calc(2), 3); - calc-3: rgba(1, 2, calc(3)); - - var-1: rgba(var(--foo), 2, 3); - var-2: rgba(1, var(--foo), 3); - var-3: rgba(1, 2, var(--foo)); - - env-1: rgba(env(--foo), 2, 3); - env-2: rgba(1, env(--foo), 3); - env-3: rgba(1, 2, env(--foo)); - - min-1: rgba(min(1), 2, 3); - min-2: rgba(1, min(2), 3); - min-3: rgba(1, 2, min(3)); - - max-1: rgba(max(1), 2, 3); - max-2: rgba(1, max(2), 3); - max-3: rgba(1, 2, max(3)); -} - -<===> output.css -a { - calc-1: rgba(calc(1), 2, 3); - calc-2: rgba(1, calc(2), 3); - calc-3: rgba(1, 2, calc(3)); - var-1: rgba(var(--foo), 2, 3); - var-2: rgba(1, var(--foo), 3); - var-3: rgba(1, 2, var(--foo)); - env-1: rgba(env(--foo), 2, 3); - env-2: rgba(1, env(--foo), 3); - env-3: rgba(1, 2, env(--foo)); - min-1: rgba(min(1), 2, 3); - min-2: rgba(1, min(2), 3); - min-3: rgba(1, 2, min(3)); - max-1: rgba(max(1), 2, 3); - max-2: rgba(1, max(2), 3); - max-3: rgba(1, 2, max(3)); +<===> +================================================================================ +<===> calc/arg_1/input.scss +a {b: rgba(calc(1), 2, 3)} + +<===> calc/arg_1/output.css +a { + b: rgba(calc(1), 2, 3); +} + +<===> +================================================================================ +<===> calc/arg_2/input.scss +a {b: rgba(1, calc(2), 3)} + +<===> calc/arg_2/output.css +a { + b: rgba(1, calc(2), 3); +} + +<===> +================================================================================ +<===> calc/arg_3/input.scss +a {b: rgba(1, 2, calc(3))} + +<===> calc/arg_3/output.css +a { + b: rgba(1, 2, calc(3)); +} + +<===> +================================================================================ +<===> var/arg_1/input.scss +a {b: rgba(var(--foo), 2, 3)} + +<===> var/arg_1/output.css +a { + b: rgba(var(--foo), 2, 3); +} + +<===> +================================================================================ +<===> var/arg_2/input.scss +a {b: rgba(1, var(--foo), 3)} + +<===> var/arg_2/output.css +a { + b: rgba(1, var(--foo), 3); +} + +<===> +================================================================================ +<===> var/arg_3/input.scss +a {b: rgba(1, 2, var(--foo))} + +<===> var/arg_3/output.css +a { + b: rgba(1, 2, var(--foo)); +} + +<===> +================================================================================ +<===> env/arg_1/input.scss +a {b: rgba(env(--foo), 2, 3)} + +<===> env/arg_1/output.css +a { + b: rgba(env(--foo), 2, 3); +} + +<===> +================================================================================ +<===> env/arg_2/input.scss +a {b: rgba(1, env(--foo), 3)} + +<===> env/arg_2/output.css +a { + b: rgba(1, env(--foo), 3); } + +<===> +================================================================================ +<===> env/arg_3/input.scss +a {b: rgba(1, 2, env(--foo))} + +<===> env/arg_3/output.css +a { + b: rgba(1, 2, env(--foo)); +} + +<===> +================================================================================ +<===> min/arg_1/input.scss +a {b: rgba(min(1), 2, 3)} + +<===> min/arg_1/output.css +a { + b: rgba(min(1), 2, 3); +} + +<===> +================================================================================ +<===> min/arg_2/input.scss +a {b: rgba(1, min(2), 3)} + +<===> min/arg_2/output.css +a { + b: rgba(1, min(2), 3); +} + +<===> +================================================================================ +<===> min/arg_3/input.scss +a {b: rgba(1, 2, min(3))} + +<===> min/arg_3/output.css +a { + b: rgba(1, 2, min(3)); +} + +<===> +================================================================================ +<===> max/arg_1/input.scss +a {b: rgba(max(1), 2, 3)} + +<===> max/arg_1/output.css +a { + b: rgba(max(1), 2, 3); +} + +<===> +================================================================================ +<===> max/arg_2/input.scss +a {b: rgba(1, max(2), 3)} + +<===> max/arg_2/output.css +a { + b: rgba(1, max(2), 3); +} + +<===> +================================================================================ +<===> max/arg_3/input.scss +a {b: rgba(1, 2, max(3))} + +<===> max/arg_3/output.css +a { + b: rgba(1, 2, max(3)); +} + diff --git a/spec/core_functions/color/rgba/three_args/unitless.hrx b/spec/core_functions/color/rgba/three_args/unitless.hrx new file mode 100644 index 0000000000..247c2e7651 --- /dev/null +++ b/spec/core_functions/color/rgba/three_args/unitless.hrx @@ -0,0 +1,77 @@ +<===> README.md +Channels may be specified as unitless numbers between 0 and 255. + +<===> +================================================================================ +<===> numbers/input.scss +a {b: rgba(18, 52, 86)} + +<===> numbers/output.css +a { + b: #123456; +} + +<===> +================================================================================ +<===> beaded/input.scss +a {b: rgba(190, 173, 237)} + +<===> beaded/output.css +a { + b: #beaded; +} + +<===> +================================================================================ +<===> springgreen/input.scss +a {b: rgba(0, 255, 127)} + +<===> springgreen/output.css +a { + b: springgreen; +} + +<===> +================================================================================ +<===> named/input.scss +a {b: rgba($red: 0, $green: 255, $blue: 127)} + +<===> named/output.css +a { + b: springgreen; +} + +<===> +================================================================================ +<===> clamped/README.md +Channels that are out of bounds are clamped within bounds. + +<===> +================================================================================ +<===> clamped/red/input.scss +a {b: rgba(256, 0, 0)} + +<===> clamped/red/output.css +a { + b: red; +} + +<===> +================================================================================ +<===> clamped/green/input.scss +a {b: rgba(0, -1, 0)} + +<===> clamped/green/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> clamped/blue/input.scss +a {b: rgba(0, 0, 9999)} + +<===> clamped/blue/output.css +a { + b: blue; +} diff --git a/spec/core_functions/color/rgba/two_args.hrx b/spec/core_functions/color/rgba/two_args.hrx index 40f7e051ab..98900fe9de 100644 --- a/spec/core_functions/color/rgba/two_args.hrx +++ b/spec/core_functions/color/rgba/two_args.hrx @@ -1,56 +1,118 @@ -<===> input.scss -opaque-to { - opaque: rgba(#123, 1); - partial: rgba(#123, 0.5); - transparent: rgba(#123, 0); +<===> opaque_to/opaque/input.scss +a {b: rgba(#123, 1)} + +<===> opaque_to/opaque/output.css +a { + b: #112233; } -partial-to { - $color: rgba(0, 0, 255, 0.3); - opaque: rgba($color, 1); - partial: rgba($color, 0.5); - transparent: rgba($color, 0); +<===> +================================================================================ +<===> opaque_to/partial/input.scss +a {b: rgba(#123, 0.5)} + +<===> opaque_to/partial/output.css +a { + b: rgba(17, 34, 51, 0.5); } -transparent-to { - opaque: rgba(transparent, 1); - partial: rgba(transparent, 0.5); - transparent: rgba(transparent, 0); +<===> +================================================================================ +<===> opaque_to/transparent/input.scss +a {b: rgba(#123, 0)} + +<===> opaque_to/transparent/output.css +a { + b: rgba(17, 34, 51, 0); } -clamped { - opaque: rgba(#123, 1.1); - transparent: rgba(#123, -0.1); +<===> +================================================================================ +<===> partial_to/opaque/input.scss +a {b: rgba(rgba(0, 0, 255, 0.3), 1)} + +<===> partial_to/opaque/output.css +a { + b: blue; } -named { - x: rgba($color: #123, $alpha: 0.5); +<===> +================================================================================ +<===> partial_to/partial/input.scss +a {b: rgba(rgba(0, 0, 255, 0.3), 0.5)} + +<===> partial_to/partial/output.css +a { + b: rgba(0, 0, 255, 0.5); } -<===> output.css -opaque-to { - opaque: #112233; - partial: rgba(17, 34, 51, 0.5); - transparent: rgba(17, 34, 51, 0); +<===> +================================================================================ +<===> partial_to/transparent/input.scss +a {b: rgba(rgba(0, 0, 255, 0.3), 0)} + +<===> partial_to/transparent/output.css +a { + b: rgba(0, 0, 255, 0); } -partial-to { - opaque: blue; - partial: rgba(0, 0, 255, 0.5); - transparent: rgba(0, 0, 255, 0); +<===> +================================================================================ +<===> transparent_to/opaque/input.scss +a {b: rgba(transparent, 1)} + +<===> transparent_to/opaque/output.css +a { + b: black; } -transparent-to { - opaque: black; - partial: rgba(0, 0, 0, 0.5); - transparent: rgba(0, 0, 0, 0); +<===> +================================================================================ +<===> transparent_to/partial/input.scss +a {b: rgba(transparent, 0.5)} + +<===> transparent_to/partial/output.css +a { + b: rgba(0, 0, 0, 0.5); } -clamped { - opaque: #112233; - transparent: rgba(17, 34, 51, 0); +<===> +================================================================================ +<===> transparent_to/transparent/input.scss +a {b: rgba(transparent, 0)} + +<===> transparent_to/transparent/output.css +a { + b: rgba(0, 0, 0, 0); } -named { - x: rgba(17, 34, 51, 0.5); +<===> +================================================================================ +<===> clamped/opaque/input.scss +a {b: rgba(#123, 1.1)} + +<===> clamped/opaque/output.css +a { + b: #112233; +} + +<===> +================================================================================ +<===> clamped/transparent/input.scss +a {b: rgba(#123, -0.1)} + +<===> clamped/transparent/output.css +a { + b: rgba(17, 34, 51, 0); } + +<===> +================================================================================ +<===> named/input.scss +a {b: rgba($color: #123, $alpha: 0.5)} + +<===> named/output.css +a { + b: rgba(17, 34, 51, 0.5); +} +