Web Inspector: Implement SCSS source highlighter
[WebKit-https.git] / LayoutTests / inspector / syntax-highlight-css.html
1 <html>
2 <head>
3 <script src="../http/tests/inspector/inspector-test.js"></script>
4 <script src="syntax-highlight.js"></script>
5 <script>
6
7 function test()
8 {
9     function dumpSyntaxHighlightSCSS(str)
10     {
11         InspectorTest.dumpSyntaxHighlight(str, "text/css");
12     }
13
14     dumpSyntaxHighlightSCSS("a[href='/']");
15     dumpSyntaxHighlightSCSS("#content > a:hover");
16     dumpSyntaxHighlightSCSS("@import url(style.css);");
17     dumpSyntaxHighlightSCSS("@import url(\"style.css\") projection, tv;");
18     dumpSyntaxHighlightSCSS("@import \"/css/fireball_unicode.css\"; html {}");
19     dumpSyntaxHighlightSCSS("@media screen { body { color: red; } }");
20     dumpSyntaxHighlightSCSS("@font-face { font-family: \"MyHelvetica\"; }");
21     dumpSyntaxHighlightSCSS("p { color: color; red: red; color: #000; color: #FFF; color: #123AbC; color: #faebfe; color:papayawhip; }");
22     dumpSyntaxHighlightSCSS("p { margin: -10px !important; }");
23     dumpSyntaxHighlightSCSS("$margin-left: $offsetBefore + 12px + $offsetAfter;");
24     dumpSyntaxHighlightSCSS("$type: monster;\n" +
25         "p {\n" +
26           "@if $type == ocean {\n" +
27             "color: blue;\n" +
28           "} @else if $type == matador {\n" +
29             "color: red;\n" +
30           "} @else if $type == monster {\n" +
31             "color: green;\n" +
32           "} @else {\n" +
33             "color: black;\n" +
34           "}\n" +
35         "}");
36     dumpSyntaxHighlightSCSS("@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }");
37     dumpSyntaxHighlightSCSS(
38         "@mixin adjust-location($x, $y) {\n" +
39             "@if unitless($x) {\n" +
40                 "@warn \"Assuming #{$x} to be in pixels\";\n" +
41                 "$x: 1px * $x;\n" +
42             "}\n" +
43             "position: relative; left: $x; top: $y;\n" +
44         "}");
45
46     dumpSyntaxHighlightSCSS(
47         "#navbar {\n" +
48             "$navbar-width: 800px;\n" +
49             "$items: 5;\n" +
50             "$navbar-color: #ce4dd6;\n" +
51
52             "width: $navbar-width;\n" +
53             "border-bottom: 2px solid $navbar-color;\n" +
54
55             "li {\n" +
56                 "@extend .notice !optional;\n" +
57                 "float: left;\n" +
58                 "width: $navbar-width/$items - 10px;\n" +
59                 "background-color: lighten($navbar-color, 20%);\n" +
60                 "&:hover {\n" +
61                     "background-color: lighten($navbar-color, 10%);\n" +
62                 "}\n" +
63             "}\n" +
64         "}");
65
66     InspectorTest.completeTest();
67 }
68
69 </script>
70 </head>
71
72 <body onload="runTest()">
73 <p>
74 Tests that (S)CSS syntax highlighter properly detects the tokens.
75 </p>
76
77 </body>
78 </html>