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