tests(css): custom media (#3879)

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

@@ -596,6 +596,135 @@ suffix
 
 `;
 
+exports[`custom-media.css 1`] = `
+@custom-media --small-viewport (max-width: 30em);
+@custom-media --small-viewport (max-width:30em);
+@custom-media  --small-viewport  (  max-width  :  30em  )  ;
+@custom-media --small-viewport
+    (max-width: 30em);
+@custom-media
+    --small-viewport
+    (
+        max-width: 30em
+    );
+@custom-media
+--small-viewport
+(
+max-width
+:
+30em
+)
+;
+@custom-media
+
+--small-viewport
+
+(
+
+max-width
+
+:
+
+30em
+
+)
+
+;
+@custom-media --none not all;
+@custom-media  --none  not  all  ;
+@custom-media  --none
+    not all;
+@custom-media  --none
+    not
+    all;
+@custom-media
+--none
+not
+all
+;
+@custom-media
+
+--none
+
+not
+
+all
+
+;
+@custom-media --tablet (min-width: 768px) and (max-width: 1279px);
+@custom-media --tablet (min-width:768px) and (max-width:1279px);
+@custom-media  --tablet  (  min-width  :  768px  )  and  (  max-width  :  1279px  )  ;
+@custom-media --tablet
+    (min-width: 768px) and (max-width: 1279px);
+@custom-media
+    --tablet
+    (min-width: 768px) and
+    (max-width: 1279px);
+@custom-media
+--tablet
+(
+min-width
+:
+768px
+)
+and
+(
+max-width
+:
+1279px
+)
+;
+@custom-media
+
+--tablet
+
+(
+
+min-width
+
+:
+
+768px
+
+)
+
+and
+
+(
+
+max-width
+
+:
+
+1279px
+
+)
+
+;
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+@custom-media --small-viewport (max-width: 30em);
+@custom-media --small-viewport (max-width: 30em);
+@custom-media --small-viewport (max-width: 30em);
+@custom-media --small-viewport (max-width: 30em);
+@custom-media --small-viewport (max-width: 30em);
+@custom-media --small-viewport (max-width: 30em);
+@custom-media --small-viewport (max-width: 30em);
+@custom-media --none not all;
+@custom-media --none not all;
+@custom-media --none not all;
+@custom-media --none not all;
+@custom-media --none not all;
+@custom-media --none not all;
+@custom-media --tablet (min-width: 768px) and (max-width: 1279px);
+@custom-media --tablet (min-width: 768px) and (max-width: 1279px);
+@custom-media --tablet (min-width: 768px) and (max-width: 1279px);
+@custom-media --tablet (min-width: 768px) and (max-width: 1279px);
+@custom-media --tablet (min-width: 768px) and (max-width: 1279px);
+@custom-media --tablet (min-width: 768px) and (max-width: 1279px);
+@custom-media --tablet (min-width: 768px) and (max-width: 1279px);
+
+`;
+
 exports[`custom-selector.css 1`] = `
 @custom-selector :--heading h1, h2, h3, h4, h5, h6;
 @custom-selector :--heading h1,h2,h3,h4,h5,h6;

tests/css_atrule/custom-media.css

@@ -0,0 +1,104 @@
+@custom-media --small-viewport (max-width: 30em);
+@custom-media --small-viewport (max-width:30em);
+@custom-media  --small-viewport  (  max-width  :  30em  )  ;
+@custom-media --small-viewport
+    (max-width: 30em);
+@custom-media
+    --small-viewport
+    (
+        max-width: 30em
+    );
+@custom-media
+--small-viewport
+(
+max-width
+:
+30em
+)
+;
+@custom-media
+
+--small-viewport
+
+(
+
+max-width
+
+:
+
+30em
+
+)
+
+;
+@custom-media --none not all;
+@custom-media  --none  not  all  ;
+@custom-media  --none
+    not all;
+@custom-media  --none
+    not
+    all;
+@custom-media
+--none
+not
+all
+;
+@custom-media
+
+--none
+
+not
+
+all
+
+;
+@custom-media --tablet (min-width: 768px) and (max-width: 1279px);
+@custom-media --tablet (min-width:768px) and (max-width:1279px);
+@custom-media  --tablet  (  min-width  :  768px  )  and  (  max-width  :  1279px  )  ;
+@custom-media --tablet
+    (min-width: 768px) and (max-width: 1279px);
+@custom-media
+    --tablet
+    (min-width: 768px) and
+    (max-width: 1279px);
+@custom-media
+--tablet
+(
+min-width
+:
+768px
+)
+and
+(
+max-width
+:
+1279px
+)
+;
+@custom-media
+
+--tablet
+
+(
+
+min-width
+
+:
+
+768px
+
+)
+
+and
+
+(
+
+max-width
+
+:
+
+1279px
+
+)
+
+;

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

@@ -1,5 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`case.css 1`] = `
+@custom-media --KeepName (MIN-WIDTH: 500PX);
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+@custom-media --KeepName (min-width: 500px);
+
+`;
+
 exports[`case.less 1`] = `
 // Convention in this test file:
 // - The case should be preserved for things prefixed with "Keep".

tests/css_case/case.css

@@ -0,0 +1 @@
+@custom-media --KeepName (MIN-WIDTH: 500PX);

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

@@ -29,6 +29,24 @@ exports[`media.css 1`] = `
 @media not screen and (color ), print and (color) { }
 @media not screen and ( color ), print and (color) { }
 @media not screen and (  color  ), print and (color) { }
+@media (--small-viewport) {}
+@media
+(
+--small-viewport
+)
+{
+}
+@media
+
+(
+
+--small-viewport
+
+)
+
+{
+
+}
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 @media screen and (min-width: 480px) {
 }
@@ -76,6 +94,12 @@ exports[`media.css 1`] = `
 }
 @media not screen and (color), print and (color) {
 }
+@media (--small-viewport) {
+}
+@media (--small-viewport) {
+}
+@media (--small-viewport) {
+}
 
 `;
 

tests/css_media/media.css

@@ -26,3 +26,21 @@
 @media not screen and (color ), print and (color) { }
 @media not screen and ( color ), print and (color) { }
 @media not screen and (  color  ), print and (color) { }
+@media (--small-viewport) {}
+@media
+(
+--small-viewport
+)
+{
+}
+@media
+
+(
+
+--small-viewport
+
+)
+
+{
+
+}