src/third_party/WebKit/LayoutTests/inspector/styles/styles-cancel-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 section;
  14
  15     function step1()
  16     {
  17         InspectorTest.dumpSelectedElementStyles(true);
  18         treeElement = InspectorTest.getElementStylePropertyTreeItem("color");
  19
  20         treeElement.startEditing();
  21         treeElement.nameElement.textContent = "color";
  22         treeElement.nameElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  23
  24         // Update incrementally, do not commit.
  25         treeElement.valueElement.textContent = "green";
  26         treeElement.kickFreeFlowStyleEditForTest();
  27
  28         // Cancel editing.
  29         treeElement.valueElement.firstChild.select();
  30         treeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("U+001B")); // Escape
  31         InspectorTest.runAfterPendingDispatches(step2);
  32     }
  33
  34     function step2()
  35     {
  36         InspectorTest.selectNodeWithId("other");
  37         InspectorTest.runAfterPendingDispatches(step3);
  38     }
  39
  40     function step3()
  41     {
  42         InspectorTest.selectNodeAndWaitForStyles("inspected", step4);
  43     }
  44
  45     function step4()
  46     {
  47         InspectorTest.addResult("After append:");
  48         InspectorTest.dumpSelectedElementStyles(true);
  49         InspectorTest.completeTest();
  50     }
  51 }
  52
  53 </script>
  54 </head>
  55
  56 <body onload="runTest()">
  57 <p>
  58 Tests that editing is canceled properly after incremental editing.
  59 </p>
  60
  61 <div id="inspected" style="color: red">Text</div>
  62 <div id="other"></div>
  63
  64 </body>
  65 </html>