| <!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> |