src/third_party/WebKit/LayoutTests/inspector/styles/style-autocomplete.html

   1 <html>
   2 <head>
   3 <script src="../../http/tests/inspector/inspector-test.js"></script>
   4 <script src="../../http/tests/inspector/elements-test.js"></script>
   5 <script>
   6
   7 function test()
   8 {
   9     WebInspector.showPanel("elements");
  10
  11     var namePrompt = new WebInspector.StylesSidebarPane.CSSPropertyPrompt(WebInspector.CSSMetadata.cssPropertiesMetainfo, null, true);
  12     var valuePrompt = new WebInspector.StylesSidebarPane.CSSPropertyPrompt(WebInspector.CSSMetadata.keywordsForProperty("color"), null, false);
  13
  14     InspectorTest.runTestSuite([
  15         function testEmptyName(next)
  16         {
  17             testAgainstGolden(namePrompt, "", false, [], ["width"], next);
  18         },
  19
  20         function testEmptyNameForce(next)
  21         {
  22             testAgainstGolden(namePrompt, "", true, ["width"], [], next);
  23         },
  24
  25         function testSingleCharName(next)
  26         {
  27             testAgainstGolden(namePrompt, "w", false, ["width"], [], next);
  28         },
  29
  30         function testEmptyValue(next)
  31         {
  32             testAgainstGolden(valuePrompt, "", false, ["aliceblue", "red", "inherit"], [], next);
  33         },
  34
  35         function testValueR(next)
  36         {
  37             testAgainstGolden(valuePrompt, "R", false, ["red", "rosybrown"], ["aliceblue", "inherit"], next);
  38         },
  39
  40         function testValueWithParenthesis(next)
  41         {
  42             testAgainstGolden(valuePrompt, "saturate(0%)", false, [], ["inherit"], next);
  43         }
  44     ]);
  45
  46     function testAgainstGolden(prompt, inputText, force, golden, antiGolden, callback)
  47     {
  48         var proxyElement = document.createElement("div");
  49         document.body.appendChild(proxyElement);
  50         proxyElement.style = "webkit-user-select: text; -webkit-user-modify: read-write-plaintext-only";
  51         proxyElement.textContent = inputText;
  52         var selectionRange = document.createRange();
  53         var textNode = proxyElement.childNodes[0];
  54         if (textNode) {
  55             selectionRange.setStart(textNode, inputText.length);
  56             selectionRange.setEnd(textNode, inputText.length);
  57         } else {
  58             selectionRange.selectNodeContents(proxyElement);
  59         }
  60         var range = selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, prompt._completionStopCharacters, proxyElement, "backward");
  61         prompt._buildPropertyCompletions(proxyElement, range, force, completions);
  62
  63         function completions(result, index)
  64         {
  65             var i;
  66             for (i = 0; i < golden.length; ++i) {
  67                 if (result.indexOf(golden[i]) === -1)
  68                     InspectorTest.addResult("NOT FOUND: " + golden[i]);
  69             }
  70             for (i = 0; i < antiGolden.length; ++i) {
  71                 if (result.indexOf(antiGolden[i]) !== -1)
  72                     InspectorTest.addResult("FOUND: " + antiGolden[i]);
  73             }
  74             proxyElement.remove();
  75             callback();
  76         }
  77     }
  78 }
  79 </script>
  80 </head>
  81
  82 <body onload="runTest()">
  83 <p>
  84 Tests that autocompletions are computed correctly when editing the Styles pane.
  85 </p>
  86 </body>
  87 </html>