src/third_party/WebKit/LayoutTests/inspector/elements/styles/styles-commit-editing.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     InspectorTest.selectNodeAndWaitForStyles("inspected", step1);
  11
  12     var treeElement;
  13     var treeOutline;
  14     var section;
  15
  16     function step1()
  17     {
  18         InspectorTest.dumpSelectedElementStyles(true);
  19         treeElement = InspectorTest.getElementStylePropertyTreeItem("color");
  20         treeOutline = treeElement.treeOutline;
  21
  22         treeElement.startEditing();
  23         treeElement.nameElement.textContent = "color";
  24         treeElement.nameElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  25
  26         // Update incrementally, do not commit.
  27         treeElement.valueElement.textContent = "rgb(/*";
  28         treeElement.kickFreeFlowStyleEditForTest();
  29
  30         // Commit editing.
  31         treeElement.valueElement.textContent = "green";
  32         treeElement.valueElement.firstChild.select();
  33         treeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  34         InspectorTest.runAfterPendingDispatches(step2);
  35     }
  36
  37     function step2()
  38     {
  39         var blankTreeElement = treeOutline.children[1];
  40         if (!WebInspector.isBeingEdited(blankTreeElement.nameElement)) {
  41             InspectorTest.addResult("No new property editor active!");
  42             InspectorTest.completeTest();
  43         }
  44
  45         // Test Styles pane editor looping.
  46         blankTreeElement.nameElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  47         if (!WebInspector.isBeingEdited(treeOutline.children[0].nameElement)) {
  48             InspectorTest.addResult("Original property name editor not active!");
  49             InspectorTest.completeTest();
  50         }
  51
  52         InspectorTest.selectNodeWithId("other");
  53         InspectorTest.runAfterPendingDispatches(step3);
  54     }
  55
  56     function step3()
  57     {
  58         InspectorTest.selectNodeAndWaitForStyles("inspected", step4);
  59     }
  60
  61     function step4()
  62     {
  63         InspectorTest.addResult("After append:");
  64         InspectorTest.dumpSelectedElementStyles(true);
  65         InspectorTest.completeTest();
  66     }
  67 }
  68
  69 </script>
  70 </head>
  71
  72 <body onload="runTest()">
  73 <p>
  74 Tests that editing is canceled properly after incremental editing.
  75 </p>
  76
  77 <div id="inspected" style="color: red">Text</div>
  78 <div id="other"></div>
  79
  80 </body>
  81 </html>