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