src/third_party/WebKit/LayoutTests/inspector/elements/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
  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 testValueR(next)
  40         {
  41             testAgainstGolden(valuePrompt, "R", false, ["RED", "ROSYBROWN"], ["aliceblue", "inherit"], next);
  42         },
  43
  44         function testValueWithParenthesis(next)
  45         {
  46             testAgainstGolden(valuePrompt, "saturate(0%)", false, [], ["inherit"], next);
  47         },
  48
  49         function testValuePrefixed(next)
  50         {
  51             testAgainstGolden(valuePromptFor("-webkit-transform"), "t", false, ["translate", "translateY", "translate3d"], ["initial", "inherit"], next);
  52         },
  53
  54         function testValueUnprefixed(next)
  55         {
  56             testAgainstGolden(valuePromptFor("transform"), "t", false, ["translate", "translateY", "translate3d"], ["initial", "inherit"], next);
  57         }
  58    ]);
  59
  60     function testAgainstGolden(prompt, inputText, force, golden, antiGolden, callback)
  61     {
  62         var proxyElement = document.createElement("div");
  63         document.body.appendChild(proxyElement);
  64         proxyElement.style = "webkit-user-select: text; -webkit-user-modify: read-write-plaintext-only";
  65         proxyElement.textContent = inputText;
  66         var selectionRange = document.createRange();
  67         var textNode = proxyElement.childNodes[0];
  68         if (textNode) {
  69             selectionRange.setStart(textNode, inputText.length);
  70             selectionRange.setEnd(textNode, inputText.length);
  71         } else {
  72             selectionRange.selectNodeContents(proxyElement);
  73         }
  74         var range = selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, prompt._completionStopCharacters, proxyElement, "backward");
  75         prompt._buildPropertyCompletions(proxyElement, range, force, completions);
  76
  77         function completions(result, index)
  78         {
  79             var i;
  80             for (i = 0; i < golden.length; ++i) {
  81                 if (result.indexOf(golden[i]) === -1)
  82                     InspectorTest.addResult("NOT FOUND: " + golden[i]);
  83             }
  84             for (i = 0; i < antiGolden.length; ++i) {
  85                 if (result.indexOf(antiGolden[i]) !== -1)
  86                     InspectorTest.addResult("FOUND: " + antiGolden[i]);
  87             }
  88             proxyElement.remove();
  89             callback();
  90         }
  91     }
  92 }
  93 </script>
  94 </head>
  95
  96 <body onload="runTest()">
  97 <p>
  98 Tests that autocompletions are computed correctly when editing the Styles pane.
  99 </p>
 100 </body>
 101 </html>