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