src/third_party/WebKit/LayoutTests/inspector/elements/styles/edit-name-with-trimmed-value.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.inspectorView.showPanel("elements");
  10     InspectorTest.selectNodeAndWaitForStyles("inspected", step1);
  11
  12     function step1()
  13     {
  14         var treeElement = InspectorTest.getElementStylePropertyTreeItem("background");
  15         InspectorTest.addResult("Viewing 'background' value in Styles:");
  16         InspectorTest.addResult(treeElement.valueElement.textContent);
  17
  18         treeElement.startEditing(treeElement.nameElement);
  19         treeElement.nameElement.textContent = "background-image";
  20         treeElement.nameElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  21         InspectorTest.runAfterPendingDispatches(step2);
  22     }
  23
  24     function step2()
  25     {
  26         var treeElement = InspectorTest.getElementStylePropertyTreeItem("background-image");
  27         InspectorTest.addResult("Renamed 'background' to 'background-image' (edited value):");
  28         InspectorTest.addResult(treeElement.valueElement.textContent);
  29         InspectorTest.completeTest();
  30     }
  31 }
  32
  33 </script>
  34 </head>
  35
  36 <body onload="runTest()">
  37 <p>
  38 Tests that editing a CSS property name in the Styles pane retains its original, non-trimmed value text.
  39 </p>
  40
  41 <div id="inspected" style="background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)" />
  42
  43 </body>
  44 </html>