50 lines
1.1 KiB
HTML
50 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
div {
|
|
height: 20px;
|
|
border: solid 1px black;
|
|
}
|
|
|
|
@media screen and (min-width: 480px), screen and (device-width: 768px) {
|
|
#valid1 {
|
|
background-color: green;
|
|
}
|
|
}
|
|
|
|
@media screen {
|
|
#valid2 {
|
|
background-color: green;
|
|
}
|
|
}
|
|
|
|
@media {
|
|
#valid3 {
|
|
background-color: green;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 480px) screen and (device-width: 768px) {
|
|
#invalid1 {
|
|
background-color: red;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 480px) and (device-width: 768px) {
|
|
#invalid2 {
|
|
background-color: red;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>This tests if we ignore syntactically invalid media query lists with multiple media queries and missing media types.</p>
|
|
<div id='valid1'></div>
|
|
<div id='valid2'></div>
|
|
<div id='valid3'></div>
|
|
<div id='invalid1'></div>
|
|
<div id='invalid2'></div>
|
|
</body>
|
|
</html>
|