src/third_party/WebKit/LayoutTests/inspector/elements/styles/color-aware-property-value-edit.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     InspectorTest.runTestSuite([
  10         function init(next)
  11         {
  12             InspectorTest.selectNodeAndWaitForStyles("inspected1", next);
  13         },
  14
  15         function editKeywordAsOriginal(next)
  16         {
  17             startEditingAndDumpValue(WebInspector.Color.Format.Original, "border", next);
  18         },
  19
  20         function editKeywordAsHex(next)
  21         {
  22             startEditingAndDumpValue(WebInspector.Color.Format.HEX, "border", next);
  23         },
  24
  25         function editKeywordAsHSL(next)
  26         {
  27             startEditingAndDumpValue(WebInspector.Color.Format.HSL, "border", next);
  28         },
  29
  30         function editKeywordAsRGB(next)
  31         {
  32             startEditingAndDumpValue(WebInspector.Color.Format.RGB, "border");
  33             InspectorTest.selectNodeAndWaitForStyles("inspected2", next);
  34         },
  35
  36         function editHexAsOriginal(next)
  37         {
  38             startEditingAndDumpValue(WebInspector.Color.Format.Original, "color", next);
  39         },
  40
  41         function editHexAsHex(next)
  42         {
  43             startEditingAndDumpValue(WebInspector.Color.Format.HEX, "color", next);
  44         },
  45
  46         function editHexAsHSL(next)
  47         {
  48             startEditingAndDumpValue(WebInspector.Color.Format.HSL, "color", next);
  49         },
  50
  51         function editHexAsRGB(next)
  52         {
  53             startEditingAndDumpValue(WebInspector.Color.Format.RGB, "color", next);
  54         },
  55
  56         function editNewProperty(next)
  57         {
  58             var section = WebInspector.panels.elements.sidebarPanes.styles.sections[0][1];
  59             section.expand();
  60
  61             treeElement = section.addNewBlankProperty(0);
  62             treeElement.startEditing();
  63             treeElement.nameElement.textContent = "border-color";
  64             treeElement.nameElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  65             treeElement.valueElement.textContent = "hsl(120, 100%, 25%)";
  66             treeElement.kickFreeFlowStyleEditForTest();
  67             InspectorTest.waitForStyleApplied(kicked);
  68
  69             function kicked()
  70             {
  71                 treeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("U+0009", false, false, true));
  72                 treeElement.nameElement.dispatchEvent(InspectorTest.createKeyEvent("U+0009"));
  73                 InspectorTest.addResult(treeElement.valueElement.textContent);
  74                 next();
  75             }
  76         }
  77     ]);
  78
  79     var format;
  80     WebInspector.settings.colorFormat = {
  81         get: function()
  82         {
  83             return format;
  84         }
  85     };
  86
  87     function setFormat(newFormat)
  88     {
  89         format = newFormat;
  90         WebInspector.panels.elements.sidebarPanes.styles._colorFormatSettingChanged();
  91     }
  92
  93     function startEditingAndDumpValue(format, propertyName, next)
  94     {
  95         setFormat(format);
  96         var treeElement = InspectorTest.getElementStylePropertyTreeItem(propertyName);
  97         treeElement.startEditing(treeElement.valueElement);
  98         InspectorTest.addResult(treeElement.valueElement.textContent);
  99         treeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("U+001B"));
 100         if (next)
 101             next();
 102     }
 103 }
 104
 105 </script>
 106 </head>
 107
 108 <body onload="runTest()">
 109 <p>
 110 Tests that property value being edited uses the user-specified color format.
 111 </p>
 112
 113 <div id="inspected1" style="border: 1px solid red">inspected1</div>
 114 <div id="inspected2" style="color: #ffffee">inspected2</div>
 115
 116 </body>
 117 </html>