refactor(tests): restructure `at rules` tests (#3892)

master
Evilebot Tnawi 2018-02-06 19:03:36 +03:00 committed by GitHub
parent 0bdceaa158
commit a6ab8a7e32
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 684 additions and 684 deletions

View File

@ -2038,6 +2038,172 @@ p {
`;
exports[`import.css 1`] = `
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
@import (multiple) "foo.less";
/* This isn't valid CSS, SCSS or Less, but we should be lenient and make sure
/* that nothing is lost when printing. */
@import "one" two "three";
#main {
@import "example";
}
#main {
@import "example";
}
#main {
@import "example" ;
}
#main {
@import "example" ;
}
#main {
@import
"example";
}
#main
{
@import
"example";
}
#main
{
@import
"example";
}
@import "test.less" {}
@import "test.less" {
a: b;
c: d;
}
@import url('foo');
$dir: 'fonts';
@import url("foo.css");
@import url('foo.css');
@import url("foo.css");
@import url("foo.css");
@import url("fineprint.css")print;
@import url("fineprint.css") print;
@import url("fineprint.css") print;
@import url("fineprint.css")
print;
@import url("bluish.css") projection,tv;
@import url("bluish.css") projection, tv;
@import url("bluish.css") projection ,tv;
@import url("bluish.css") projection , tv;
@import url("bluish.css") projection , tv;
@import url("bluish.css")
projection,
tv;
@import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection,tv;
@import url('landscape.css') screen and (orientation:landscape);
@import "rounded-corners", "text-shadow";
@import 'rounded-corners', 'text-shadow';
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
@import url( "foo.css");
@import url("foo.css" );
@import url( "foo.css" );
@import url( "foo.css" );
@import url("foo bar baz.css");
@import url( "foo bar baz.css" );
@import url("foo bar baz.css");
@import url(
"foo.css"
);
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import "custom.css";
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url("landscape.css") screen and (orientation: landscape);
@import (multiple) "foo.less";
/* This isn't valid CSS, SCSS or Less, but we should be lenient and make sure
/* that nothing is lost when printing. */
@import "one" two "three";
#main {
@import "example";
}
#main {
@import "example";
}
#main {
@import "example";
}
#main {
@import "example";
}
#main {
@import "example";
}
#main {
@import "example";
}
#main {
@import "example";
}
@import "test.less" {
}
@import "test.less" {
a: b;
c: d;
}
@import url("foo");
$dir: "fonts";
@import url("foo.css");
@import url("foo.css");
@import url("foo.css");
@import url("foo.css");
@import url("fineprint.css") print;
@import url("fineprint.css") print;
@import url("fineprint.css") print;
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("bluish.css") projection, tv;
@import url("bluish.css") projection, tv;
@import url("bluish.css") projection, tv;
@import url("bluish.css") projection, tv;
@import url("bluish.css") projection, tv;
@import url("very-very-very-very-very-very-very-very-very-very-long-name.css")
projection,
tv;
@import url("landscape.css") screen and (orientation: landscape);
@import "rounded-corners", "text-shadow";
@import "rounded-corners", "text-shadow";
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
@import url("foo.css");
@import url("foo.css");
@import url("foo.css");
@import url("foo.css");
@import url("foo bar baz.css");
@import url("foo bar baz.css");
@import url("foo bar baz.css");
@import url("foo.css");
`;
exports[`include.css 1`] = `
@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
@include mix(1px,2px,$arg2:10,2px 4px 6px);
@ -2539,6 +2705,331 @@ margin-top: 100px;
`;
exports[`media.css 1`] = `
@media screen and (min-width: 480px) {}
@media screen and (min-width: 480px) {}
@MEDIA screen and (min-width: 480px) {}
@MEDIA screen and (min-width: 480px) {}
@media screen and (min-width: 480px) {}
@media screen and (min-width: 480px) {}
@media screen and (min-width :480px) {}
@media screen and (min-width : 480px) {}
@media screen and (min-width : 480px) {}
@media
screen
and
(min-width
:
480px) {}
@media screen and ( min-width: 480px) {}
@media screen and (min-width: 480px ) {}
@media screen and ( min-width: 480px ) {}
@media screen and ( min-width: 480px ) {}
@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 not screen and (color) , print and (color) { }
@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 not screen and ( color ), print and (color) { }
@media not screen and ( color ), print and (color) { }
@media (--small-viewport) {}
@media
(
--small-viewport
)
{
}
@media
(
--small-viewport
)
{
}
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
.screen-color{
@media screen{
color: green;
@media (min-width: 768px){
color: red;
}
}
@media tv{
color: black;
}
}
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
.screen-color
{
@media
screen
{
color
:
green
;
@media
(
min-width
:
768px
)
{
color
:
red
;
}
}
@media
tv
{
color
:
black
;
}
}
.screen-color
{
@media
screen
{
color
:
green
;
@media
(
min-width
:
768px
)
{
color
:
red
;
}
}
@media
tv
{
color
:
black
;
}
}
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@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 not screen and (color), print and (color) {
}
@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 not screen and (color), print and (color) {
}
@media not screen and (color), print and (color) {
}
@media (--small-viewport) {
}
@media (--small-viewport) {
}
@media (--small-viewport) {
}
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
@media all and (-webkit-min-device-pixel-ratio: 1.5),
all and (-o-min-device-pixel-ratio: 3/2),
all and (min--moz-device-pixel-ratio: 1.5),
all and (min-device-pixel-ratio: 1.5) {
}
`;
exports[`mixin.css 1`] = `
@mixin clearfix {}
@mixin clearfix{}

View File

@ -1,3 +1,53 @@
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
@import (multiple) "foo.less";
/* This isn't valid CSS, SCSS or Less, but we should be lenient and make sure
/* that nothing is lost when printing. */
@import "one" two "three";
#main {
@import "example";
}
#main {
@import "example";
}
#main {
@import "example" ;
}
#main {
@import "example" ;
}
#main {
@import
"example";
}
#main
{
@import
"example";
}
#main
{
@import
"example";
}
@import "test.less" {}
@import "test.less" {
a: b;
c: d;
}
@import url('foo');
$dir: 'fonts';

View File

@ -44,3 +44,146 @@
{
}
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
.screen-color{
@media screen{
color: green;
@media (min-width: 768px){
color: red;
}
}
@media tv{
color: black;
}
}
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
.screen-color
{
@media
screen
{
color
:
green
;
@media
(
min-width
:
768px
)
{
color
:
red
;
}
}
@media
tv
{
color
:
black
;
}
}
.screen-color
{
@media
screen
{
color
:
green
;
@media
(
min-width
:
768px
)
{
color
:
red
;
}
}
@media
tv
{
color
:
black
;
}
}
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {}

View File

@ -1,167 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`directives.css 1`] = `
@import (multiple) "foo.less";
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@import (multiple) "foo.less";
`;
exports[`multiple.css 1`] = `
/* This isn't valid CSS, SCSS or Less, but we should be lenient and make sure
/* that nothing is lost when printing. */
@import "one" two "three";
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* This isn't valid CSS, SCSS or Less, but we should be lenient and make sure
/* that nothing is lost when printing. */
@import "one" two "three";
`;
exports[`nested.css 1`] = `
#main {
@import "example";
}
#main {
@import "example";
}
#main {
@import "example" ;
}
#main {
@import "example" ;
}
#main {
@import
"example";
}
#main
{
@import
"example";
}
#main
{
@import
"example";
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#main {
@import "example";
}
#main {
@import "example";
}
#main {
@import "example";
}
#main {
@import "example";
}
#main {
@import "example";
}
#main {
@import "example";
}
#main {
@import "example";
}
`;
exports[`nodes.css 1`] = `
@import "test.less" {}
@import "test.less" {
a: b;
c: d;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@import "test.less" {
}
@import "test.less" {
a: b;
c: d;
}
`;
exports[`url.css 1`] = `
@import url('foo');
$dir: 'fonts';
@import url("foo.css");
@import url('foo.css');
@import url("foo.css");
@import url("foo.css");
@import url("fineprint.css")print;
@import url("fineprint.css") print;
@import url("fineprint.css") print;
@import url("fineprint.css")
print;
@import url("bluish.css") projection,tv;
@import url("bluish.css") projection, tv;
@import url("bluish.css") projection ,tv;
@import url("bluish.css") projection , tv;
@import url("bluish.css") projection , tv;
@import url("bluish.css")
projection,
tv;
@import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection,tv;
@import url('landscape.css') screen and (orientation:landscape);
@import "rounded-corners", "text-shadow";
@import 'rounded-corners', 'text-shadow';
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
@import url( "foo.css");
@import url("foo.css" );
@import url( "foo.css" );
@import url( "foo.css" );
@import url("foo bar baz.css");
@import url( "foo bar baz.css" );
@import url("foo bar baz.css");
@import url(
"foo.css"
);
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@import url("foo");
$dir: "fonts";
@import url("foo.css");
@import url("foo.css");
@import url("foo.css");
@import url("foo.css");
@import url("fineprint.css") print;
@import url("fineprint.css") print;
@import url("fineprint.css") print;
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("bluish.css") projection, tv;
@import url("bluish.css") projection, tv;
@import url("bluish.css") projection, tv;
@import url("bluish.css") projection, tv;
@import url("bluish.css") projection, tv;
@import url("very-very-very-very-very-very-very-very-very-very-long-name.css")
projection,
tv;
@import url("landscape.css") screen and (orientation: landscape);
@import "rounded-corners", "text-shadow";
@import "rounded-corners", "text-shadow";
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
@import url("foo.css");
@import url("foo.css");
@import url("foo.css");
@import url("foo.css");
@import url("foo bar baz.css");
@import url("foo bar baz.css");
@import url("foo bar baz.css");
@import url("foo.css");
`;

View File

@ -1 +0,0 @@
@import (multiple) "foo.less";

View File

@ -1 +0,0 @@
run_spec(__dirname, ["css"]);

View File

@ -1,3 +0,0 @@
/* This isn't valid CSS, SCSS or Less, but we should be lenient and make sure
/* that nothing is lost when printing. */
@import "one" two "three";

View File

@ -1,30 +0,0 @@
#main {
@import "example";
}
#main {
@import "example";
}
#main {
@import "example" ;
}
#main {
@import "example" ;
}
#main {
@import
"example";
}
#main
{
@import
"example";
}
#main
{
@import
"example";
}

View File

@ -1,6 +0,0 @@
@import "test.less" {}
@import "test.less" {
a: b;
c: d;
}

View File

@ -1,333 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`media.css 1`] = `
@media screen and (min-width: 480px) {}
@media screen and (min-width: 480px) {}
@MEDIA screen and (min-width: 480px) {}
@MEDIA screen and (min-width: 480px) {}
@media screen and (min-width: 480px) {}
@media screen and (min-width: 480px) {}
@media screen and (min-width :480px) {}
@media screen and (min-width : 480px) {}
@media screen and (min-width : 480px) {}
@media
screen
and
(min-width
:
480px) {}
@media screen and ( min-width: 480px) {}
@media screen and (min-width: 480px ) {}
@media screen and ( min-width: 480px ) {}
@media screen and ( min-width: 480px ) {}
@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 not screen and (color) , print and (color) { }
@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 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) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
}
@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 not screen and (color), print and (color) {
}
@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 not screen and (color), print and (color) {
}
@media not screen and (color), print and (color) {
}
@media (--small-viewport) {
}
@media (--small-viewport) {
}
@media (--small-viewport) {
}
`;
exports[`nested.css 1`] = `
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
.screen-color{
@media screen{
color: green;
@media (min-width: 768px){
color: red;
}
}
@media tv{
color: black;
}
}
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
.screen-color
{
@media
screen
{
color
:
green
;
@media
(
min-width
:
768px
)
{
color
:
red
;
}
}
@media
tv
{
color
:
black
;
}
}
.screen-color
{
@media
screen
{
color
:
green
;
@media
(
min-width
:
768px
)
{
color
:
red
;
}
}
@media
tv
{
color
:
black
;
}
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
`;
exports[`overflow.css 1`] = `
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@media all and (-webkit-min-device-pixel-ratio: 1.5),
all and (-o-min-device-pixel-ratio: 3/2),
all and (min--moz-device-pixel-ratio: 1.5),
all and (min-device-pixel-ratio: 1.5) {
}
`;

View File

@ -1 +0,0 @@
run_spec(__dirname, ["css"]);

View File

@ -1,140 +0,0 @@
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
.screen-color{
@media screen{
color: green;
@media (min-width: 768px){
color: red;
}
}
@media tv{
color: black;
}
}
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
.screen-color
{
@media
screen
{
color
:
green
;
@media
(
min-width
:
768px
)
{
color
:
red
;
}
}
@media
tv
{
color
:
black
;
}
}
.screen-color
{
@media
screen
{
color
:
green
;
@media
(
min-width
:
768px
)
{
color
:
red
;
}
}
@media
tv
{
color
:
black
;
}
}

View File

@ -1,2 +0,0 @@
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
}