<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        /* Valid viewport syntax with no properties. */
        @-webkit-viewport {
        }

        /* Shorthands should be evaluated to the respective attributes. */
        @-webkit-viewport {
            width: 400px 500px;
            height: 200px 300px;
        }

        /* Shorthands with single value should assume this value for min and max. */
        @-webkit-viewport {
            width: 500px;
            height: 300px;
        }

        /* Shorthands should override properties if defined later. */
        @-webkit-viewport {
            min-width: 100px;
            min-width: 100px;
            max-height: 100px;
            max-height: 100px;
            width: 500px;
            height: 300px;
        }

        /* All valid properties with valid initial values. */
        @-webkit-viewport {
            min-width: auto;
            max-width: auto;
            min-height: auto;
            max-height: auto;
            min-zoom: auto;
            max-zoom: auto;
            orientation: auto;
            user-zoom: zoom;
            zoom: auto;
        }

        /* All valid properties with valid values. */
        @-webkit-viewport {
            min-width: 50%;
            max-width: 100px;
            min-height: device-width;
            max-height: device-height;
            min-zoom: 50%;
            max-zoom: 0.5;
            orientation: landscape;
            user-zoom: fixed;
            zoom: 0.6;
        }

        /* All valid properties with invalid initial values. Should be empty. */
        @-webkit-viewport {
            min-width: zoom;
            max-width: fixed;
            min-height: landscape;
            max-height: portrait;
            min-zoom: 10px;
            max-zoom: 50px;
            orientation: 50%;
            user-zoom: auto;
            zoom: device-height;
        }

        /* Negative numbers should be dropped on zoom. */
        @-webkit-viewport {
            min-zoom: -1;
            max-zoom: -0.5;
            zoom: -0.6;
        }

        /* Viewport attributes inside selectors should be dropped. */
        .foo {
            min-zoom: auto;
            max-zoom: auto;
            orientation: auto;
            user-zoom: zoom;
            zoom: auto;
        }

        /* Invalid attributes among valid should be dropped. */
        @-webkit-viewport {
            font-family: sans-serif;
            min-width: device-width;
            max-width: device-height;
            foo: auto;
            min-height: 500px;
            max-height: 50%;
            text-indent: 0;
            min-zoom: 0.5;
            max-zoom: 50%;
            orientation: portrait;
            color: red;
            user-zoom: zoom;
            zoom: 60%;
            letter-spacing: 0.5em;
        }
    </style>
    <meta charset="utf-8" />
    <link rel="help" href="http://www.w3.org/TR/css-device-adapt/#syntax" />
    <script src="../../resources/testharness.js"></script>
    <script src="../../resources/testharnessreport.js"></script>
    <script type="text/javascript">
        var rules = document.styleSheets[0].cssRules;

        test(function() {
            assert_equals(rules.item(0).cssText, "@-webkit-viewport { }");
        }, "Rule with no attributes");

        test(function() {
            assert_equals(rules.item(1).cssText,
                "@-webkit-viewport {" +
                " min-width: 400px;" +
                " max-width: 500px;" +
                " min-height: 200px;" +
                " max-height: 300px; }");
        }, "Shorthands with double value");

        test(function() {
            assert_equals(rules.item(2).cssText,
                "@-webkit-viewport {" +
                " min-width: 500px;" +
                " max-width: 500px;" +
                " min-height: 300px;" +
                " max-height: 300px; }");
        }, "Shorthands with single value");

        test(function() {
            assert_equals(rules.item(3).cssText,
                "@-webkit-viewport {" +
                " min-width: 500px;" +
                " max-width: 500px;" +
                " min-height: 300px;" +
                " max-height: 300px; }");
        }, "Shorthands should override properties if defined later");

        test(function() {
            assert_equals(rules.item(4).cssText,
                "@-webkit-viewport {" +
                " min-width: auto;" +
                " max-width: auto;" +
                " min-height: auto;" +
                " max-height: auto;" +
                " min-zoom: auto;" +
                " max-zoom: auto;" +
                " orientation: auto;" +
                " user-zoom: zoom;" +
                " zoom: auto; }");
        }, "All valid properties with valid intial values");

        test(function() {
            assert_equals(rules.item(5).cssText,
                "@-webkit-viewport {" +
                " min-width: 50%;" +
                " max-width: 100px;" +
                " min-height: device-width;" +
                " max-height: device-height;" +
                " min-zoom: 50%;" +
                " max-zoom: 0.5;" +
                " orientation: landscape;" +
                " user-zoom: fixed;" +
                " zoom: 0.6; }");
        }, "All valid properties with valid values");

        test(function() {
            assert_equals(rules.item(6).cssText, "@-webkit-viewport { }");
        }, "All valid properties with invalid intial values");

        test(function() {
            assert_equals(rules.item(7).cssText, "@-webkit-viewport { }");
        }, "Negative numbers should be dropped on zoom attribute");

        test(function() {
            assert_equals(rules.item(8).cssText, ".foo { }");
        }, "Viewport attributes inside selectors should be dropped");

        test(function() {
            assert_equals(rules.item(9).cssText,
                "@-webkit-viewport {" +
                " min-width: device-width;" +
                " max-width: device-height;" +
                " min-height: 500px;" +
                " max-height: 50%;" +
                " min-zoom: 0.5;" +
                " max-zoom: 50%;" +
                " orientation: portrait;" +
                " user-zoom: zoom;" +
                " zoom: 60%; }");
        }, "Invalid attributes among valid should be dropped");
    </script>
</head>
<body>
    <div id="log"></div>
</body>
</html>