tests(css): custom media (#3879)
parent
d8ecf26ef6
commit
0e8f3acb59
|
@ -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`] = `
|
exports[`custom-selector.css 1`] = `
|
||||||
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
|
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
|
||||||
@custom-selector :--heading h1,h2,h3,h4,h5,h6;
|
@custom-selector :--heading h1,h2,h3,h4,h5,h6;
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
)
|
||||||
|
|
||||||
|
;
|
|
@ -1,5 +1,12 @@
|
||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// 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`] = `
|
exports[`case.less 1`] = `
|
||||||
// Convention in this test file:
|
// Convention in this test file:
|
||||||
// - The case should be preserved for things prefixed with "Keep".
|
// - The case should be preserved for things prefixed with "Keep".
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
@custom-media --KeepName (MIN-WIDTH: 500PX);
|
|
@ -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 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) {
|
||||||
}
|
}
|
||||||
|
@ -76,6 +94,12 @@ exports[`media.css 1`] = `
|
||||||
}
|
}
|
||||||
@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) {
|
||||||
|
}
|
||||||
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
|
@ -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 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
|
||||||
|
|
||||||
|
)
|
||||||
|
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue