third_party/WebKit/LayoutTests/inspector/sources/autocomplete-css.html

   1 <html>
   2 <head>
   3 <link rel="stylesheet" href="./resources/empty.css">
   4 <script src="../../http/tests/inspector/inspector-test.js"></script>
   5 <script src="../../http/tests/inspector/debugger-test.js"></script>
   6 <script src="./autocomplete-test.js"></script>
   7 <script src="../editor/editor-test.js"></script>
   8 <script>
   9 function test()
  10 {
  11     InspectorTest.showScriptSource("empty.css", onSourceFrame);
  12
  13     var textEditor;
  14     var dumpSuggestions;
  15     function onSourceFrame(sourceFrame)
  16     {
  17         textEditor = sourceFrame.textEditor;
  18         dumpSuggestions = InspectorTest.dumpSuggestions.bind(InspectorTest, textEditor);
  19         InspectorTest.runTestSuite(testSuite);
  20     }
  21
  22     var testSuite = [
  23         function testClassNameAutocomplete(next)
  24         {
  25             dumpSuggestions([
  26                 ".red { color: red }",
  27                 ".blue { color: blue }",
  28                 ".|"
  29             ]);
  30             next();
  31         },
  32
  33         function testPropertyNameAutocomplete(next)
  34         {
  35             dumpSuggestions([
  36                 ".red { color: red }",
  37                 ".blue { c|"
  38             ]);
  39             dumpSuggestions([
  40                 ".my-class { -|webkit-border: 1px solid black; -webkit-color: blue;",
  41                 "text-align: }"
  42             ]);
  43             next();
  44         },
  45
  46         function testPropertyValueAutocomplete(next)
  47         {
  48             dumpSuggestions([
  49                 ".red { border-style: |",
  50                 "/* some other words to mess up */"
  51             ]);
  52             dumpSuggestions([
  53                 ".red { border-style: d|",
  54                 "/* dial drummer dig */"
  55             ]);
  56             dumpSuggestions([
  57                 ".red { border-style: z|",
  58                 "/* zipper zorro zion */"
  59             ]);
  60             dumpSuggestions([
  61                 ".red { border-style/* comment */: /* comment */|"
  62             ]);
  63             dumpSuggestions([
  64                 ".my-class { -webkit-border: 1px solid black; -webkit-color: blue;",
  65                 "text-align: |}"
  66             ]);
  67             next();
  68         },
  69
  70         function verifySuggestionsOnColumnTypedIn(next)
  71         {
  72             textEditor.element.focus();
  73             textEditor.setText([
  74                 ".green {",
  75                 "   display"
  76             ].join("\n"));
  77             textEditor.setSelection(WebInspector.TextRange.createFromLocation(1, 10));
  78             InspectorTest.dumpTextWithSelection(textEditor);
  79             var suggestions = [];
  80             InspectorTest.addSniffer(WebInspector.TextEditorAutocompleteController.prototype, "_onSuggestionsShownForTest", function(words) { suggestions = words; });
  81             InspectorTest.addSniffer(WebInspector.TextEditorAutocompleteController.prototype, "autocomplete", onTypedIn);
  82             InspectorTest.typeIn(textEditor, ":");
  83
  84             function onTypedIn()
  85             {
  86                 InspectorTest.addResult("Suggestions displayed on ':' symbol typed in:");
  87                 InspectorTest.addResult("[" + suggestions.join(", ") + "]");
  88                 next();
  89             }
  90         },
  91     ];
  92 }
  93 </script>
  94 </head>
  95
  96 <body onload="runTest();">
  97 <p>
  98 The test verifies autocomplete suggestions for CSS file.
  99 </p>
 100 </body>
 101 </html>