tests(css): colors (#3958)

tests/css_case/__snapshots__/jsfmt.spec.js.snap

@@ -2,9 +2,17 @@
 
 exports[`case.css 1`] = `
 @custom-media --KeepName (MIN-WIDTH: 500PX);
+
+.foo {
+    color: hsl(0.75TURN, 60%, 70%);
+}
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 @custom-media --KeepName (min-width: 500px);
 
+.foo {
+  color: hsl(0.75turn, 60%, 70%);
+}
+
 `;
 
 exports[`case.less 1`] = `
@@ -127,6 +135,10 @@ $KeepScssVar: val;
     margin-top: 100px;
   }
 }
+
+.foo {
+  color: hsl(0.75TURN, 60%, 70%);
+}
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // Convention in this test file:
 // - The case should be preserved for things prefixed with "Keep".
@@ -256,6 +268,10 @@ $KeepScssVar: val;
   }
 }
 
+.foo {
+  color: hsl(0.75turn, 60%, 70%);
+}
+
 `;
 
 exports[`case.scss 1`] = `
@@ -380,6 +396,10 @@ $KeepTopLevelVar: val;
     margin-top: 100px;
   }
 }
+
+.foo {
+  color: hsl(0.75TURN, 60%, 70%);
+}
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // Convention in this test file:
 // - The case should be preserved for things prefixed with "Keep".
@@ -506,4 +526,8 @@ $KeepTopLevelVar: val;
   }
 }
 
+.foo {
+  color: hsl(0.75turn, 60%, 70%);
+}
+
 `;

tests/css_case/case.css

@@ -1 +1,5 @@
 @custom-media --KeepName (MIN-WIDTH: 500PX);
+
+.foo {
+    color: hsl(0.75TURN, 60%, 70%);
+}

tests/css_case/case.less

@@ -117,3 +117,7 @@ $KeepScssVar: val;
     margin-top: 100px;
   }
 }
+
+.foo {
+  color: hsl(0.75TURN, 60%, 70%);
+}

tests/css_case/case.scss

@@ -119,3 +119,7 @@ $KeepTopLevelVar: val;
     margin-top: 100px;
   }
 }
+
+.foo {
+  color: hsl(0.75TURN, 60%, 70%);
+}

tests/css_color/__snapshots__/jsfmt.spec.js.snap

@@ -1,5 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`current-color.css 1`] = `
+.foo {
+    border: 1px dashed currentColor;
+}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+.foo {
+  border: 1px dashed currentColor;
+}
+
+`;
+
+exports[`functional-syntax.css 1`] = `
+.foo {
+    color: rgb(255, 0, 153);
+    color: rgb(100%, 0%, 60%);
+    color: rgba(51, 170, 51, 0.1);
+    color: hsl(.75turn, 60%, 70%);
+    color: hsl(270 60% 50% / .15);
+    color: hsla(240, 100%, 50%, .05)
+}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+.foo {
+  color: rgb(255, 0, 153);
+  color: rgb(100%, 0%, 60%);
+  color: rgba(51, 170, 51, 0.1);
+  color: hsl(0.75turn, 60%, 70%);
+  color: hsl(270 60% 50% / 0.15);
+  color: hsla(240, 100%, 50%, 0.05);
+}
+
+`;
+
 exports[`hexcolor.css 1`] = `
 .foo {
     color: #AAA;
@@ -7,6 +39,8 @@ exports[`hexcolor.css 1`] = `
     -webkit-color: #873;
     -moz-color: #6bcdef;
     -ms-color: #AAbbCC;
+    color: #F09F;
+    color: #FF0099FF;
 }
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 .foo {
@@ -15,6 +49,27 @@ exports[`hexcolor.css 1`] = `
   -webkit-color: #873;
   -moz-color: #6bcdef;
   -ms-color: #aabbcc;
+  color: #F09F;
+  color: #ff0099ff;
+}
+
+`;
+
+exports[`whitespace-syntax.css 1`] = `
+.foo {
+    color: rgba(51 170 51 / 0.4);
+    color: rgba(51 170 51 / 40%);
+    color: hsl(270 60% 50% / .15);
+    color: hsla(240 100% 50% / .05);
+    color: hsla(240 100% 50% / 5%);
+}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+.foo {
+  color: rgba(51 170 51 / 0.4);
+  color: rgba(51 170 51 / 40%);
+  color: hsl(270 60% 50% / 0.15);
+  color: hsla(240 100% 50% / 0.05);
+  color: hsla(240 100% 50% / 5%);
 }
 
 `;

tests/css_color/current-color.css

@@ -0,0 +1,3 @@
+.foo {
+    border: 1px dashed currentColor;
+}

tests/css_color/functional-syntax.css

@@ -0,0 +1,8 @@
+.foo {
+    color: rgb(255, 0, 153);
+    color: rgb(100%, 0%, 60%);
+    color: rgba(51, 170, 51, 0.1);
+    color: hsl(.75turn, 60%, 70%);
+    color: hsl(270 60% 50% / .15);
+    color: hsla(240, 100%, 50%, .05)
+}

tests/css_color/hexcolor.css

@@ -4,4 +4,6 @@
     -webkit-color: #873;
     -moz-color: #6bcdef;
     -ms-color: #AAbbCC;
+    color: #F09F;
+    color: #FF0099FF;
 }

tests/css_color/whitespace-syntax.css

@@ -0,0 +1,7 @@
+.foo {
+    color: rgba(51 170 51 / 0.4);
+    color: rgba(51 170 51 / 40%);
+    color: hsl(270 60% 50% / .15);
+    color: hsla(240 100% 50% / .05);
+    color: hsla(240 100% 50% / 5%);
+}