src/third_party/WebKit/LayoutTests/inspector/elements/edit-dom-actions.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 src="edit-dom-test.js"></script>
   6 <script>
   7
   8 function test()
   9 {
  10     // Save time on style updates.
  11     WebInspector.inspectorView.showPanel("elements");
  12     WebInspector.StylesSidebarPane.prototype.update = function() {};
  13     WebInspector.MetricsSidebarPane.prototype.update = function() {};
  14
  15     InspectorTest.runTestSuite([
  16         function testSetUp(next)
  17         {
  18             InspectorTest.expandElementsTree(next);
  19         },
  20
  21         function testRemove(next)
  22         {
  23             InspectorTest.domActionTestForNodeId("testRemove", "node-to-remove", testBody, next);
  24
  25             function testBody(node, done)
  26             {
  27                 var treeElement = InspectorTest.firstElementsTreeOutline().findTreeElement(node);
  28                 treeElement.remove();
  29                 InspectorTest.runAfterPendingDispatches(done);
  30             }
  31         },
  32
  33         function testSetNodeName(next)
  34         {
  35             InspectorTest.domActionTestForNodeId("testSetNodeName", "node-to-set-name", testBody, next);
  36
  37             function testBody(node, done)
  38             {
  39                 InspectorTest.editNodePartAndRun(node, "webkit-html-tag-name", "span", done);
  40             }
  41         },
  42
  43         function testSetNodeNameInput(next)
  44         {
  45             InspectorTest.domActionTestForNodeId("testSetNodeNameInput", "node-to-set-name-input", testBody, next);
  46
  47             function testBody(node, done)
  48             {
  49                 InspectorTest.editNodePartAndRun(node, "webkit-html-tag-name", "input", done);
  50             }
  51         },
  52
  53         function testSetNodeValue(next)
  54         {
  55             InspectorTest.domActionTestForNodeId("testSetNodeValue", "node-to-set-value", testBody, next);
  56
  57             function testBody(node, done)
  58             {
  59                 InspectorTest.editNodePartAndRun(node, "webkit-html-text-node", "  \n  Edited Text  \n  ", done);
  60             }
  61         },
  62
  63         function testSetAttribute(next)
  64         {
  65             InspectorTest.domActionTestForNodeId("testSetAttribute", "node-to-set-attribute", testBody, next);
  66
  67             function testBody(node, done)
  68             {
  69                 InspectorTest.editNodePartAndRun(node, "webkit-html-attribute", "bar=\"edited attribute\"", done, true);
  70             }
  71         },
  72
  73         function testSetScriptableAttribute(next)
  74         {
  75             InspectorTest.domActionTestForNodeId("testSetScriptableAttribute", "node-to-set-scriptable-attribute", testBody, next);
  76
  77             function testBody(node, done)
  78             {
  79                 InspectorTest.editNodePartAndRun(node, "webkit-html-attribute", "onclick=\"alert(2)\"", done, true);
  80             }
  81         },
  82
  83         function testRemoveAttribute(next)
  84         {
  85             InspectorTest.domActionTestForNodeId("testRemoveAttribute", "node-to-remove-attribute", testBody, next);
  86
  87             function testBody(node, done)
  88             {
  89                 InspectorTest.editNodePartAndRun(node, "webkit-html-attribute", "", done, true);
  90             }
  91         },
  92
  93         function testAddAttribute(next)
  94         {
  95             InspectorTest.doAddAttribute("testAddAttribute", "node-to-add-attribute", "newattr=\"new-value\"", next);
  96         },
  97
  98         function testAddAttributeUnquotedValue(next)
  99         {
 100             InspectorTest.doAddAttribute("testAddAttributeUnquotedValue", "node-to-add-attribute-unquoted-value", "newattr=unquotedValue", next);
 101         },
 102
 103         function testEditCommentAsHTML(next)
 104         {
 105             function commentNodeSelectionCallback(testNode, callback)
 106             {
 107                 var childNodes = testNode.children();
 108                 for (var i = 0; i < childNodes.length; ++i) {
 109                     if (childNodes[i].nodeType() === 8) {
 110                         WebInspector.Revealer.reveal(childNodes[i]);
 111                         callback(childNodes[i]);
 112                         return;
 113                     }
 114                 }
 115                 InspectorTest.addResult("Comment node not found");
 116                 InspectorTest.completeTest();
 117             }
 118             InspectorTest.domActionTest("testEditCommentAsHTML", commentNodeSelectionCallback, testBody, next);
 119
 120             function testBody(node, done)
 121             {
 122                 var treeElement = InspectorTest.firstElementsTreeOutline().findTreeElement(node);
 123                 treeElement._editAsHTML();
 124                 InspectorTest.runAfterPendingDispatches(step2);
 125
 126                 function step2()
 127                 {
 128                     InspectorTest.addResult(treeElement._editing.codeMirror.getValue());
 129                     treeElement._editing.codeMirror.setValue("<div foo=\"bar-comment\">Element</div>");
 130                     var event = InspectorTest.createKeyEvent("Enter");
 131                     event.isMetaOrCtrlForTest = true;
 132                     treeElement._htmlEditElement.dispatchEvent(event);
 133                     InspectorTest.runAfterPendingDispatches(done);
 134                 }
 135             }
 136         },
 137
 138         function testEditAsHTML(next)
 139         {
 140             InspectorTest.domActionTestForNodeId("testEditAsHTML", "node-to-edit-as-html", testBody, next);
 141
 142             function testBody(node, done)
 143             {
 144                 var treeElement = InspectorTest.firstElementsTreeOutline().findTreeElement(node);
 145                 treeElement._editAsHTML();
 146                 InspectorTest.runAfterPendingDispatches(step2);
 147
 148                 function step2()
 149                 {
 150                     InspectorTest.addResult(treeElement._editing.codeMirror.getValue());
 151                     treeElement._editing.codeMirror.setValue("<span foo=\"bar\"><span id=\"inner-span\">Span contents</span></span>");
 152                     var event = InspectorTest.createKeyEvent("Enter");
 153                     event.isMetaOrCtrlForTest = true;
 154                     treeElement._htmlEditElement.dispatchEvent(event);
 155                     InspectorTest.runAfterPendingDispatches(InspectorTest.expandElementsTree.bind(InspectorTest, done));
 156                 }
 157             }
 158         },
 159
 160         function testEditInvisibleCharsAsHTML(next)
 161         {
 162             InspectorTest.domActionTestForNodeId("testEditInvisibleCharsAsHTML", "node-with-invisible-chars", testBody, next);
 163
 164             function testBody(node, done)
 165             {
 166                 var treeElement = InspectorTest.firstElementsTreeOutline().findTreeElement(node);
 167                 treeElement._editAsHTML();
 168                 InspectorTest.runAfterPendingDispatches(step2);
 169
 170                 function step2()
 171                 {
 172                     var codeMirror = treeElement._editing.codeMirror;
 173                     InspectorTest.addResult(codeMirror.getValue());
 174                     codeMirror.setValue(codeMirror.getValue().replace(/&/g, '#'));
 175                     var event = InspectorTest.createKeyEvent("Enter");
 176                     event.isMetaOrCtrlForTest = true;
 177                     treeElement._htmlEditElement.dispatchEvent(event);
 178                     InspectorTest.runAfterPendingDispatches(InspectorTest.expandElementsTree.bind(InspectorTest, done));
 179                 }
 180             }
 181         },
 182
 183         function testEditScript(next)
 184         {
 185             InspectorTest.domActionTestForNodeId("testEditScript", "node-to-edit-script", testBody, next);
 186
 187             function testBody(node, done)
 188             {
 189                 InspectorTest.editNodePartAndRun(node, "webkit-html-text-node", "\n    var i = 0;\n    var j = 0;\n", done);
 190             }
 191         }
 192     ]);
 193 }
 194
 195 </script>
 196 </head>
 197
 198 <body onload="runTest()">
 199 <p>
 200 Tests that user can mutate DOM by means of elements panel.
 201 </p>
 202
 203 <div>
 204     <div id="testRemove">
 205         <div id="node-to-remove"></div>
 206     </div>
 207
 208     <div id="testSetNodeName">
 209         <div id="node-to-set-name"></div>
 210     </div>
 211
 212     <div id="testSetNodeNameInput">
 213         <div id="node-to-set-name-input"></div>
 214     </div>
 215
 216     <div id="testSetNodeValue">
 217         <div id="node-to-set-value">
 218           Text
 219         </div>
 220     </div>
 221
 222     <div id="testSetAttribute">
 223         <div foo="attribute value" id="node-to-set-attribute"></div>
 224     </div>
 225
 226     <div id="testSetScriptableAttribute">
 227         <div onclick="alert(1)" id="node-to-set-scriptable-attribute"></div>
 228     </div>
 229
 230     <div id="testRemoveAttribute">
 231         <div foo="attribute value" id="node-to-remove-attribute"></div>
 232     </div>
 233
 234     <div id="testAddAttribute">
 235         <div id="node-to-add-attribute"></div>
 236     </div>
 237
 238     <div id="testAddAttributeUnquotedValue">
 239         <div id="node-to-add-attribute-unquoted-value"></div>
 240     </div>
 241
 242     <div id="testEditAsHTML">
 243         <div id="node-to-edit-as-html"><span id="span">Text</span></div>
 244     </div>
 245
 246     <div id="testEditInvisibleCharsAsHTML">
 247         <div id="node-with-invisible-chars">A&nbsp;B&ensp;C&emsp;D&thinsp;E&zwnj;F&zwj;G&rlm;H&lrm;I</div>
 248     </div>
 249
 250     <div id="testEditScript">
 251         <script id="node-to-edit-script">
 252
 253           var i = 0;
 254           var j = 5;
 255           for (; i < j; ++i) {
 256               // Do nothing.
 257           }
 258
 259         </script>
 260     </div>
 261
 262     <div id="testEditCommentAsHTML">
 263         <!-- Comment -->
 264     </div>
 265 </div>
 266 </body>
 267 </html>