third_party/WebKit/LayoutTests/inspector/elements/styles-3/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
  10     var namePrompt = new WebInspector.StylesSidebarPane.CSSPropertyPrompt(WebInspector.CSSMetadata.cssPropertiesMetainfo, null, true);
  11     var valuePrompt = valuePromptFor("color");
  12
  13     function valuePromptFor(name)
  14     {
  15         return new WebInspector.StylesSidebarPane.CSSPropertyPrompt(WebInspector.CSSMetadata.keywordsForProperty(name), null, false);
  16     }
  17
  18     InspectorTest.runTestSuite([
  19         function testEmptyName(next)
  20         {
  21             testAgainstGolden(namePrompt, "", false, [], ["width"], next);
  22         },
  23
  24         function testEmptyNameForce(next)
  25         {
  26             testAgainstGolden(namePrompt, "", true, ["width"], [], next);
  27         },
  28
  29         function testSingleCharName(next)
  30         {
  31             testAgainstGolden(namePrompt, "w", false, ["width"], [], next);
  32         },
  33
  34         function testEmptyValue(next)
  35         {
  36             testAgainstGolden(valuePrompt, "", false, ["aliceblue", "red", "inherit"], [], next);
  37         },
  38
  39         function testImportantDeclarationDoNotToggleOnExclamationMark(next)
  40         {
  41             testAgainstGolden(valuePrompt, "red !", false, [], ["!important"], next);
  42         },
  43
  44         function testImportantDeclaration(next)
  45         {
  46             testAgainstGolden(valuePrompt, "red !i", false, ["!important"], [], next);
  47         },
  48
  49         function testValueR(next)
  50         {
  51             testAgainstGolden(valuePrompt, "R", false, ["RED", "ROSYBROWN"], ["aliceblue", "inherit"], next);
  52         },
  53
  54         function testValueWithParenthesis(next)
  55         {
  56             testAgainstGolden(valuePrompt, "saturate(0%)", false, [], ["inherit"], next);
  57         },
  58
  59         function testValuePrefixed(next)
  60         {
  61             testAgainstGolden(valuePromptFor("-webkit-transform"), "t", false, ["translate", "translateY", "translate3d"], ["initial", "inherit"], next);
  62         },
  63
  64         function testValueUnprefixed(next)
  65         {
  66             testAgainstGolden(valuePromptFor("transform"), "t", false, ["translate", "translateY", "translate3d"], ["initial", "inherit"], next);
  67         }
  68    ]);
  69
  70     function testAgainstGolden(prompt, inputText, force, golden, antiGolden, callback)
  71     {
  72         var proxyElement = document.createElement("div");
  73         document.body.appendChild(proxyElement);
  74         proxyElement.style = "webkit-user-select: text; -webkit-user-modify: read-write-plaintext-only";
  75         proxyElement.textContent = inputText;
  76         var selectionRange = document.createRange();
  77         var textNode = proxyElement.childNodes[0];
  78         if (textNode) {
  79             selectionRange.setStart(textNode, inputText.length);
  80             selectionRange.setEnd(textNode, inputText.length);
  81         } else {
  82             selectionRange.selectNodeContents(proxyElement);
  83         }
  84         var range = selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, prompt._completionStopCharacters, proxyElement, "backward");
  85         prompt._buildPropertyCompletions(proxyElement, range, force, completions);
  86
  87         function completions(result, index)
  88         {
  89             var i;
  90             for (i = 0; i < golden.length; ++i) {
  91                 if (result.indexOf(golden[i]) === -1)
  92                     InspectorTest.addResult("NOT FOUND: " + golden[i]);
  93             }
  94             for (i = 0; i < antiGolden.length; ++i) {
  95                 if (result.indexOf(antiGolden[i]) !== -1)
  96                     InspectorTest.addResult("FOUND: " + antiGolden[i]);
  97             }
  98             proxyElement.remove();
  99             callback();
 100         }
 101     }
 102 }
 103 </script>
 104 </head>
 105
 106 <body onload="runTest()">
 107 <p>
 108 Tests that autocompletions are computed correctly when editing the Styles pane.
 109 </p>
 110 </body>
 111 </html>