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
  10     var treeElement;
  11     var treeOutline;
  12     var section;
  13
  14     InspectorTest.runTestSuite([
  15         function selectInitialNode(next)
  16         {
  17             InspectorTest.selectNodeAndWaitForStyles("inspected", next);
  18         },
  19
  20         function testFreeFlowEdit(next)
  21         {
  22             InspectorTest.dumpSelectedElementStyles(true);
  23             treeElement = InspectorTest.getElementStylePropertyTreeItem("color");
  24             treeOutline = treeElement.treeOutline;
  25
  26             treeElement.startEditing();
  27             treeElement.nameElement.textContent = "color";
  28             treeElement.nameElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  29
  30             // Update incrementally, do not commit.
  31             treeElement.valueElement.textContent = "rgb(/*";
  32             InspectorTest.waitForStyleApplied(next);
  33             treeElement.kickFreeFlowStyleEditForTest();
  34         },
  35
  36         function testCommitEditing(next)
  37         {
  38             // Commit editing.
  39             treeElement.valueElement.textContent = "green";
  40             treeElement.valueElement.firstChild.select();
  41             InspectorTest.addSniffer(WebInspector.StylePropertiesSection.prototype, "_afterUpdateFinishedForTest", next);
  42             treeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  43         },
  44
  45         function testNewPropertyEditorIsCreated(next)
  46         {
  47             var blankTreeElement = treeOutline.children[1];
  48             if (!WebInspector.isBeingEdited(blankTreeElement.nameElement)) {
  49                 InspectorTest.addResult("No new property editor active!");
  50                 InspectorTest.completeTest();
  51                 return;
  52             }
  53
  54             // Test Styles pane editor looping.
  55             InspectorTest.addSniffer(WebInspector.StylePropertiesSection.prototype, "_afterUpdateFinishedForTest", next);
  56             blankTreeElement.nameElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  57         },
  58
  59         function testCycleThroughPropertyEditing(next)
  60         {
  61             if (!WebInspector.isBeingEdited(treeOutline.children[0].nameElement)) {
  62                 InspectorTest.addResult("Original property name editor not active!");
  63                 InspectorTest.completeTest();
  64                 return;
  65             }
  66
  67             InspectorTest.selectNodeWithId("other", next);
  68         },
  69
  70         function testNodeStyles(next)
  71         {
  72             InspectorTest.selectNodeAndWaitForStyles("inspected", next);
  73         },
  74
  75         function dumpStyles(next)
  76         {
  77             InspectorTest.addResult("After append:");
  78             InspectorTest.dumpSelectedElementStyles(true);
  79             next();
  80         }
  81     ]);
  82
  83 }
  84
  85 </script>
  86 </head>
  87
  88 <body onload="runTest()">
  89 <p>
  90 Tests that editing is canceled properly after incremental editing.
  91 </p>
  92
  93 <div id="inspected" style="color: red">Text</div>
  94 <div id="other"></div>
  95
  96 </body>
  97 </html>