inspector/syntax-highlight-css.html

<html>
<head>
<script src="../http/tests/inspector/inspector-test.js"></script>
<script src="syntax-highlight.js"></script>
<script>

function test()
{
    function dumpSyntaxHighlightSCSS(str)
    {
        InspectorTest.dumpSyntaxHighlight(str, "text/css");
    }

    dumpSyntaxHighlightSCSS("a[href='/']");
    dumpSyntaxHighlightSCSS("#content > a:hover");
    dumpSyntaxHighlightSCSS("@import url(style.css);");
    dumpSyntaxHighlightSCSS("@import url(\"style.css\") projection, tv;");
    dumpSyntaxHighlightSCSS("@import \"/css/fireball_unicode.css\"; html {}");
    dumpSyntaxHighlightSCSS("@media screen { body { color: red; } }");
    dumpSyntaxHighlightSCSS("@font-face { font-family: \"MyHelvetica\"; }");
    dumpSyntaxHighlightSCSS("p { color: color; red: red; color: #000; color: #FFF; color: #123AbC; color: #faebfe; color:papayawhip; }");
    dumpSyntaxHighlightSCSS("p { margin: -10px !important; }");
    dumpSyntaxHighlightSCSS("$margin-left: $offsetBefore + 12px + $offsetAfter;");
    dumpSyntaxHighlightSCSS("$type: monster;\n" +
        "p {\n" +
          "@if $type == ocean {\n" +
            "color: blue;\n" +
          "} @else if $type == matador {\n" +
            "color: red;\n" +
          "} @else if $type == monster {\n" +
            "color: green;\n" +
          "} @else {\n" +
            "color: black;\n" +
          "}\n" +
        "}");
    dumpSyntaxHighlightSCSS("@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }");
    dumpSyntaxHighlightSCSS(
        "@mixin adjust-location($x, $y) {\n" +
            "@if unitless($x) {\n" +
                "@warn \"Assuming #{$x} to be in pixels\";\n" +
                "$x: 1px * $x;\n" +
            "}\n" +
            "position: relative; left: $x; top: $y;\n" +
        "}");

    dumpSyntaxHighlightSCSS(
        "#navbar {\n" +
            "$navbar-width: 800px;\n" +
            "$items: 5;\n" +
            "$navbar-color: #ce4dd6;\n" +

            "width: $navbar-width;\n" +
            "border-bottom: 2px solid $navbar-color;\n" +

            "li {\n" +
                "@extend .notice !optional;\n" +
                "float: left;\n" +
                "width: $navbar-width/$items - 10px;\n" +
                "background-color: lighten($navbar-color, 20%);\n" +
                "&:hover {\n" +
                    "background-color: lighten($navbar-color, 10%);\n" +
                "}\n" +
            "}\n" +
        "}");

    InspectorTest.completeTest();
}

</script>
</head>

<body onload="runTest()">
<p>
Tests that (S)CSS syntax highlighter properly detects the tokens.
</p>

</body>
</html>