third_party/WebKit/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         return InspectorTest.dumpSyntaxHighlight(str, "text/x-scss");
  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     .then(InspectorTest.completeTest.bind(InspectorTest));
  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>