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