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