<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test-pre.js"></script>
<style id="target-style"></style>

<script>
    description("Test the CSSOM serialization of the hover media feature.")

    var testCases = [
        // Case.
        ["(hover)", "(hover)"],
        ["(    hover)", "(hover)"],
        ["(hover    )", "(hover)"],
        ["(    hover    )", "(hover)"],
        ["(hover: hover)", "(hover: hover)"],
        ["(hover: Hover)", "(hover: hover)"],
        ["(hover: HOVER)", "(hover: hover)"],
        ["(Hover: hover)", "(hover: hover)"],
        ["(HOVER: hover)", "(hover: hover)"],
        ["(Hover: Hover)", "(hover: hover)"],
        ["(hover: ON-DEMAND)", "(hover: on-demand)"],
        ["(Hover: On-demand)", "(hover: on-demand)"],
        ["(hover: NONE)", "(hover: none)"],
        ["(Hover: None)", "(hover: none)"],

        // Spacing.
        ["(hover:hover)", "(hover: hover)"],
        ["(hover: hover)", "(hover: hover)"],
        ["(hover :hover)", "(hover: hover)"],
        ["(hover : hover)", "(hover: hover)"],
        ["(     hover    : hover     )", "(hover: hover)"],
        ["(hover\t:\thover)", "(hover: hover)"],
    ];

    var targetStyle = document.getElementById('target-style');
    for (var testCase of testCases) {
        targetStyle.innerText = "@media " + testCase[0] + " { }";
        shouldBeEqualToString("document.styleSheets[1].cssRules[0].media.mediaText", testCase[1]);
    }
</script>

<script src="../../resources/js-test-post.js"></script>
</body>
</html>