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