LayoutTests/inspector/elements/edit-dom-actions.html - WebKit - Git at Google

 <html>
 <head>
 <script src="../../http/tests/inspector/inspector-test.js"></script>
 <script src="../../http/tests/inspector/elements-test.js"></script>
 <script>

 function test()
 {
     // Save time on style updates.
     WebInspector.showPanel("elements");
     WebInspector.StylesSidebarPane.prototype.update = function() {};
     WebInspector.MetricsSidebarPane.prototype.update = function() {};

     InspectorTest.runTestSuite([
         function testSetUp(next)
         {
             InspectorTest.expandElementsTree(next);
         },

         function testRemove(next)
         {
             domActionTestForNodeId("testRemove", "node-to-remove", testBody, next);

             function testBody(node, done)
             {
                 var treeElement = WebInspector.panels.elements.treeOutline.findTreeElement(node);
                 treeElement.remove();
                 InspectorTest.runAfterPendingDispatches(done);
             }
         },

         function testSetNodeName(next)
         {
             domActionTestForNodeId("testSetNodeName", "node-to-set-name", testBody, next);

             function testBody(node, done)
             {
                 editNodePartAndRun(node, "webkit-html-tag-name", "span", done);
             }
         },

         function testSetNodeNameInput(next)
         {
             domActionTestForNodeId("testSetNodeNameInput", "node-to-set-name-input", testBody, next);

             function testBody(node, done)
             {
                 editNodePartAndRun(node, "webkit-html-tag-name", "input", done);
             }
         },

         function testSetNodeValue(next)
         {
             domActionTestForNodeId("testSetNodeValue", "node-to-set-value", testBody, next);

             function testBody(node, done)
             {
                 editNodePartAndRun(node, "webkit-html-text-node", "  \n  Edited Text  \n  ", done);
             }
         },

         function testSetAttribute(next)
         {
             domActionTestForNodeId("testSetAttribute", "node-to-set-attribute", testBody, next);

             function testBody(node, done)
             {
                 editNodePartAndRun(node, "webkit-html-attribute", "bar=\"edited attribute\"", done, true);
             }
         },

         function testRemoveAttribute(next)
         {
             domActionTestForNodeId("testRemoveAttribute", "node-to-remove-attribute", testBody, next);

             function testBody(node, done)
             {
                 editNodePartAndRun(node, "webkit-html-attribute", "", done, true);
             }
         },

         function testAddAttribute(next)
         {
             domActionTestForNodeId("testAddAttribute", "node-to-add-attribute", testBody, next);

             function testBody(node, done)
             {
                 var editorElement = editNodePart(node, "webkit-html-attribute");
                 editorElement.dispatchEvent(InspectorTest.createKeyEvent("U+0009")); // Tab

                 InspectorTest.runAfterPendingDispatches(testContinuation);

                 function testContinuation()
                 {
                     var editorElement = window.getSelection().anchorNode.parentElement;
                     editorElement.textContent = "newattr=\"new-value\"";
                     editorElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
                     InspectorTest.addSniffer(WebInspector.ElementsTreeUpdater.prototype, "_updateModifiedNodes", done);
                 }
             }
         },

         function testEditCommentAsHTML(next)
         {
             function commentNodeSelectionCallback(testNode, callback)
             {
                 var childNodes = testNode.children;
                 for (var i = 0; i < childNodes.length; ++i) {
                     if (childNodes[i].nodeType() === 8) {
                         WebInspector._updateFocusedNode(childNodes[i].id);
                         callback(childNodes[i]);
                         return;
                     }
                 }
                 InspectorTest.addResult("Comment node not found");
                 InspectorTest.completeTest();
             }
             domActionTest("testEditCommentAsHTML", commentNodeSelectionCallback, testBody, next);

             function testBody(node, done)
             {
                 var treeElement = WebInspector.panels.elements.treeOutline.findTreeElement(node);
                 treeElement._editAsHTML();
                 InspectorTest.runAfterPendingDispatches(step2);

                 function step2()
                 {
                     InspectorTest.addResult(treeElement._htmlEditElement.textContent);
                     treeElement._htmlEditElement.textContent = "<div foo=\"bar-comment\">Element</div>";
                     var event = InspectorTest.createKeyEvent("Enter");
                     event.isMetaOrCtrlForTest = true;
                     treeElement._htmlEditElement.dispatchEvent(event);
                     InspectorTest.runAfterPendingDispatches(done);
                 }
             }
         },

         function testEditAsHTML(next)
         {
             domActionTestForNodeId("testEditAsHTML", "node-to-edit-as-html", testBody, next);

             function testBody(node, done)
             {
                 var treeElement = WebInspector.panels.elements.treeOutline.findTreeElement(node);
                 treeElement._editAsHTML();
                 InspectorTest.runAfterPendingDispatches(step2);

                 function step2()
                 {
                     InspectorTest.addResult(treeElement._htmlEditElement.textContent);
                     treeElement._htmlEditElement.textContent = "<span foo=\"bar\"><span id=\"inner-span\">Span contents</span></span>";
                     var event = InspectorTest.createKeyEvent("Enter");
                     event.isMetaOrCtrlForTest = true;
                     treeElement._htmlEditElement.dispatchEvent(event);
                     InspectorTest.runAfterPendingDispatches(InspectorTest.expandElementsTree.bind(InspectorTest, done));
                 }
             }
         },

         function testEditInvisibleCharsAsHTML(next)
         {
             domActionTestForNodeId("testEditInvisibleCharsAsHTML", "node-with-invisible-chars", testBody, next);

             function testBody(node, done)
             {
                 var treeElement = WebInspector.panels.elements.treeOutline.findTreeElement(node);
                 treeElement._editAsHTML();
                 InspectorTest.runAfterPendingDispatches(step2);

                 function step2()
                 {
                     InspectorTest.addResult(treeElement._htmlEditElement.textContent);
                     treeElement._htmlEditElement.textContent = treeElement._htmlEditElement.textContent.replace(/&/g, '#');
                     var event = InspectorTest.createKeyEvent("Enter");
                     event.isMetaOrCtrlForTest = true;
                     treeElement._htmlEditElement.dispatchEvent(event);
                     InspectorTest.runAfterPendingDispatches(InspectorTest.expandElementsTree.bind(InspectorTest, done));
                 }
             }
         },

         function testEditScript(next)
         {
             domActionTestForNodeId("testEditScript", "node-to-edit-script", testBody, next);

             function testBody(node, done)
             {
                 editNodePartAndRun(node, "webkit-html-text-node", "\n    var i = 0;\n    var j = 0;\n", done);
             }
         }
     ]);

     function domActionTestForNodeId(testName, dataNodeId, testBody, next)
     {
         function callback(testNode, continuation)
         {
             InspectorTest.selectNodeWithId(dataNodeId, continuation);
         }
         domActionTest(testName, callback, testBody, next);
     }

     function domActionTest(testName, dataNodeSelectionCallback, testBody, next)
     {
         var testNode = InspectorTest.expandedNodeWithId(testName);
         InspectorTest.addResult("==== before ====");
         InspectorTest.dumpElementsTree(testNode);

         dataNodeSelectionCallback(testNode, step0);

         function step0(node)
         {
             InspectorTest.runAfterPendingDispatches(step1.bind(null, node));
         }

         function step1(node)
         {
             testBody(node, step2);
         }

         function step2()
         {
             InspectorTest.addResult("==== after ====");
             InspectorTest.dumpElementsTree(testNode);
             next();
         }
     }

     function editNodePart(node, className)
     {
         var treeElement = WebInspector.panels.elements.treeOutline.findTreeElement(node);
         var textElement = treeElement.listItemElement.getElementsByClassName(className)[0];
         if (!textElement && treeElement.childrenListElement)
             textElement = treeElement.childrenListElement.getElementsByClassName(className)[0];
         treeElement._startEditingTarget(textElement);
         return textElement;
     }

     function editNodePartAndRun(node, className, newValue, step2, useSniffer)
     {
         var editorElement = editNodePart(node, className);
         editorElement.textContent = newValue;
         editorElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
         if (useSniffer)
             InspectorTest.addSniffer(WebInspector.ElementsTreeUpdater.prototype, "_updateModifiedNodes", step2);
         else
             InspectorTest.runAfterPendingDispatches(step2);
     }
 }

 </script>
 </head>

 <body onload="runTest()">
 <p>
 Tests that user can mutate DOM by means of elements panel.
 </p>

 <div>
     <div id="testRemove">
         <div id="node-to-remove"></div>
     </div>

     <div id="testSetNodeName">
         <div id="node-to-set-name"></div>
     </div>

     <div id="testSetNodeNameInput">
         <div id="node-to-set-name-input"></div>
     </div>

     <div id="testSetNodeValue">
         <div id="node-to-set-value">
           Text
         </div>
     </div>

     <div id="testSetAttribute">
         <div foo="attribute value" id="node-to-set-attribute"></div>
     </div>

     <div id="testRemoveAttribute">
         <div foo="attribute value" id="node-to-remove-attribute"></div>
     </div>

     <div id="testAddAttribute">
         <div id="node-to-add-attribute"></div>
     </div>

     <div id="testEditAsHTML">
         <div id="node-to-edit-as-html"><span id="span">Text</span></div>
     </div>

     <div id="testEditInvisibleCharsAsHTML">
         <div id="node-with-invisible-chars">A&nbsp;B&ensp;C&emsp;D&thinsp;E&zwnj;F&zwj;G&rlm;H&lrm;I</div>
     </div>

     <div id="testEditScript">
         <script id="node-to-edit-script">

           var i = 0;
           var j = 5;
           for (; i < j; ++i) {
               // Do nothing.
           }

         </script>
     </div>

     <div id="testEditCommentAsHTML">
         <!-- Comment -->
     </div>

 </div>
 </body>
 </html>
	<html>
	<head>
	<script src="../../http/tests/inspector/inspector-test.js"></script>
	<script src="../../http/tests/inspector/elements-test.js"></script>
	<script>

	function test()
	{
	// Save time on style updates.
	WebInspector.showPanel("elements");
	WebInspector.StylesSidebarPane.prototype.update = function() {};
	WebInspector.MetricsSidebarPane.prototype.update = function() {};

	InspectorTest.runTestSuite([
	function testSetUp(next)
	{
	InspectorTest.expandElementsTree(next);
	},

	function testRemove(next)
	{
	domActionTestForNodeId("testRemove", "node-to-remove", testBody, next);

	function testBody(node, done)
	{
	var treeElement = WebInspector.panels.elements.treeOutline.findTreeElement(node);
	treeElement.remove();
	InspectorTest.runAfterPendingDispatches(done);
	}
	},

	function testSetNodeName(next)
	{
	domActionTestForNodeId("testSetNodeName", "node-to-set-name", testBody, next);

	function testBody(node, done)
	{
	editNodePartAndRun(node, "webkit-html-tag-name", "span", done);
	}
	},

	function testSetNodeNameInput(next)
	{
	domActionTestForNodeId("testSetNodeNameInput", "node-to-set-name-input", testBody, next);

	function testBody(node, done)
	{
	editNodePartAndRun(node, "webkit-html-tag-name", "input", done);
	}
	},

	function testSetNodeValue(next)
	{
	domActionTestForNodeId("testSetNodeValue", "node-to-set-value", testBody, next);

	function testBody(node, done)
	{
	editNodePartAndRun(node, "webkit-html-text-node", " \n Edited Text \n ", done);
	}
	},

	function testSetAttribute(next)
	{
	domActionTestForNodeId("testSetAttribute", "node-to-set-attribute", testBody, next);

	function testBody(node, done)
	{
	editNodePartAndRun(node, "webkit-html-attribute", "bar=\"edited attribute\"", done, true);
	}
	},

	function testRemoveAttribute(next)
	{
	domActionTestForNodeId("testRemoveAttribute", "node-to-remove-attribute", testBody, next);

	function testBody(node, done)
	{
	editNodePartAndRun(node, "webkit-html-attribute", "", done, true);
	}
	},

	function testAddAttribute(next)
	{
	domActionTestForNodeId("testAddAttribute", "node-to-add-attribute", testBody, next);

	function testBody(node, done)
	{
	var editorElement = editNodePart(node, "webkit-html-attribute");
	editorElement.dispatchEvent(InspectorTest.createKeyEvent("U+0009")); // Tab

	InspectorTest.runAfterPendingDispatches(testContinuation);

	function testContinuation()
	{
	var editorElement = window.getSelection().anchorNode.parentElement;
	editorElement.textContent = "newattr=\"new-value\"";
	editorElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
	InspectorTest.addSniffer(WebInspector.ElementsTreeUpdater.prototype, "_updateModifiedNodes", done);
	}
	}
	},

	function testEditCommentAsHTML(next)
	{
	function commentNodeSelectionCallback(testNode, callback)
	{
	var childNodes = testNode.children;
	for (var i = 0; i < childNodes.length; ++i) {
	if (childNodes[i].nodeType() === 8) {
	WebInspector._updateFocusedNode(childNodes[i].id);
	callback(childNodes[i]);
	return;
	}
	}
	InspectorTest.addResult("Comment node not found");
	InspectorTest.completeTest();
	}
	domActionTest("testEditCommentAsHTML", commentNodeSelectionCallback, testBody, next);

	function testBody(node, done)
	{
	var treeElement = WebInspector.panels.elements.treeOutline.findTreeElement(node);
	treeElement._editAsHTML();
	InspectorTest.runAfterPendingDispatches(step2);

	function step2()
	{
	InspectorTest.addResult(treeElement._htmlEditElement.textContent);
	treeElement._htmlEditElement.textContent = "<div foo=\"bar-comment\">Element</div>";
	var event = InspectorTest.createKeyEvent("Enter");
	event.isMetaOrCtrlForTest = true;
	treeElement._htmlEditElement.dispatchEvent(event);
	InspectorTest.runAfterPendingDispatches(done);
	}
	}
	},

	function testEditAsHTML(next)
	{
	domActionTestForNodeId("testEditAsHTML", "node-to-edit-as-html", testBody, next);

	function testBody(node, done)
	{
	var treeElement = WebInspector.panels.elements.treeOutline.findTreeElement(node);
	treeElement._editAsHTML();
	InspectorTest.runAfterPendingDispatches(step2);

	function step2()
	{
	InspectorTest.addResult(treeElement._htmlEditElement.textContent);
	treeElement._htmlEditElement.textContent = "<span foo=\"bar\"><span id=\"inner-span\">Span contents</span></span>";
	var event = InspectorTest.createKeyEvent("Enter");
	event.isMetaOrCtrlForTest = true;
	treeElement._htmlEditElement.dispatchEvent(event);
	InspectorTest.runAfterPendingDispatches(InspectorTest.expandElementsTree.bind(InspectorTest, done));
	}
	}
	},

	function testEditInvisibleCharsAsHTML(next)
	{
	domActionTestForNodeId("testEditInvisibleCharsAsHTML", "node-with-invisible-chars", testBody, next);

	function testBody(node, done)
	{
	var treeElement = WebInspector.panels.elements.treeOutline.findTreeElement(node);
	treeElement._editAsHTML();
	InspectorTest.runAfterPendingDispatches(step2);

	function step2()
	{
	InspectorTest.addResult(treeElement._htmlEditElement.textContent);
	treeElement._htmlEditElement.textContent = treeElement._htmlEditElement.textContent.replace(/&/g, '#');
	var event = InspectorTest.createKeyEvent("Enter");
	event.isMetaOrCtrlForTest = true;
	treeElement._htmlEditElement.dispatchEvent(event);
	InspectorTest.runAfterPendingDispatches(InspectorTest.expandElementsTree.bind(InspectorTest, done));
	}
	}
	},

	function testEditScript(next)
	{
	domActionTestForNodeId("testEditScript", "node-to-edit-script", testBody, next);

	function testBody(node, done)
	{
	editNodePartAndRun(node, "webkit-html-text-node", "\n var i = 0;\n var j = 0;\n", done);
	}
	}
	]);

	function domActionTestForNodeId(testName, dataNodeId, testBody, next)
	{
	function callback(testNode, continuation)
	{
	InspectorTest.selectNodeWithId(dataNodeId, continuation);
	}
	domActionTest(testName, callback, testBody, next);
	}

	function domActionTest(testName, dataNodeSelectionCallback, testBody, next)
	{
	var testNode = InspectorTest.expandedNodeWithId(testName);
	InspectorTest.addResult("==== before ====");
	InspectorTest.dumpElementsTree(testNode);

	dataNodeSelectionCallback(testNode, step0);

	function step0(node)
	{
	InspectorTest.runAfterPendingDispatches(step1.bind(null, node));
	}

	function step1(node)
	{
	testBody(node, step2);
	}

	function step2()
	{
	InspectorTest.addResult("==== after ====");
	InspectorTest.dumpElementsTree(testNode);
	next();
	}
	}

	function editNodePart(node, className)
	{
	var treeElement = WebInspector.panels.elements.treeOutline.findTreeElement(node);
	var textElement = treeElement.listItemElement.getElementsByClassName(className)[0];
	if (!textElement && treeElement.childrenListElement)
	textElement = treeElement.childrenListElement.getElementsByClassName(className)[0];
	treeElement._startEditingTarget(textElement);
	return textElement;
	}

	function editNodePartAndRun(node, className, newValue, step2, useSniffer)
	{
	var editorElement = editNodePart(node, className);
	editorElement.textContent = newValue;
	editorElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
	if (useSniffer)
	InspectorTest.addSniffer(WebInspector.ElementsTreeUpdater.prototype, "_updateModifiedNodes", step2);
	else
	InspectorTest.runAfterPendingDispatches(step2);
	}
	}

	</script>
	</head>

	<body onload="runTest()">
	<p>
	Tests that user can mutate DOM by means of elements panel.
	</p>

	<div>
	<div id="testRemove">
	<div id="node-to-remove"></div>
	</div>

	<div id="testSetNodeName">
	<div id="node-to-set-name"></div>
	</div>

	<div id="testSetNodeNameInput">
	<div id="node-to-set-name-input"></div>
	</div>

	<div id="testSetNodeValue">
	<div id="node-to-set-value">
	Text
	</div>
	</div>

	<div id="testSetAttribute">
	<div foo="attribute value" id="node-to-set-attribute"></div>
	</div>

	<div id="testRemoveAttribute">
	<div foo="attribute value" id="node-to-remove-attribute"></div>
	</div>

	<div id="testAddAttribute">
	<div id="node-to-add-attribute"></div>
	</div>

	<div id="testEditAsHTML">
	<div id="node-to-edit-as-html"><span id="span">Text</span></div>
	</div>

	<div id="testEditInvisibleCharsAsHTML">
	<div id="node-with-invisible-chars">A B&ensp;C&emsp;D E&zwnj;F&zwj;G&rlm;H&lrm;I</div>
	</div>

	<div id="testEditScript">
	<script id="node-to-edit-script">

	var i = 0;
	var j = 5;
	for (; i < j; ++i) {
	// Do nothing.
	}

	</script>
	</div>

	<div id="testEditCommentAsHTML">
	<!-- Comment -->
	</div>

	</div>
	</body>
	</html>