Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(73)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/inspector/elements/edit-dom-actions.html

Issue 206503002: DevTools: Allow general editing of author shadow DOM elements (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 6 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « no previous file | LayoutTests/inspector/elements/edit-dom-actions-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <html> 1 <html>
2 <head> 2 <head>
3 <script src="../../http/tests/inspector/inspector-test.js"></script> 3 <script src="../../http/tests/inspector/inspector-test.js"></script>
4 <script src="../../http/tests/inspector/elements-test.js"></script> 4 <script src="../../http/tests/inspector/elements-test.js"></script>
5 <script src="edit-dom-test.js"></script>
5 <script> 6 <script>
6 7
7 function test() 8 function test()
8 { 9 {
9 // Save time on style updates. 10 // Save time on style updates.
10 WebInspector.inspectorView.showPanel("elements"); 11 WebInspector.inspectorView.showPanel("elements");
11 WebInspector.StylesSidebarPane.prototype.update = function() {}; 12 WebInspector.StylesSidebarPane.prototype.update = function() {};
12 WebInspector.MetricsSidebarPane.prototype.update = function() {}; 13 WebInspector.MetricsSidebarPane.prototype.update = function() {};
13 14
14 InspectorTest.runTestSuite([ 15 InspectorTest.runTestSuite([
15 function testSetUp(next) 16 function testSetUp(next)
16 { 17 {
17 InspectorTest.expandElementsTree(next); 18 InspectorTest.expandElementsTree(next);
18 }, 19 },
19 20
20 function testRemove(next) 21 function testRemove(next)
21 { 22 {
22 domActionTestForNodeId("testRemove", "node-to-remove", testBody, nex t); 23 InspectorTest.domActionTestForNodeId("testRemove", "node-to-remove", testBody, next);
23 24
24 function testBody(node, done) 25 function testBody(node, done)
25 { 26 {
26 var treeElement = WebInspector.panels.elements.treeOutline.findT reeElement(node); 27 var treeElement = WebInspector.panels.elements.treeOutline.findT reeElement(node);
27 treeElement.remove(); 28 treeElement.remove();
28 InspectorTest.runAfterPendingDispatches(done); 29 InspectorTest.runAfterPendingDispatches(done);
29 } 30 }
30 }, 31 },
31 32
32 function testSetNodeName(next) 33 function testSetNodeName(next)
33 { 34 {
34 domActionTestForNodeId("testSetNodeName", "node-to-set-name", testBo dy, next); 35 InspectorTest.domActionTestForNodeId("testSetNodeName", "node-to-set -name", testBody, next);
35 36
36 function testBody(node, done) 37 function testBody(node, done)
37 { 38 {
38 editNodePartAndRun(node, "webkit-html-tag-name", "span", done); 39 InspectorTest.editNodePartAndRun(node, "webkit-html-tag-name", " span", done);
39 } 40 }
40 }, 41 },
41 42
42 function testSetNodeNameInput(next) 43 function testSetNodeNameInput(next)
43 { 44 {
44 domActionTestForNodeId("testSetNodeNameInput", "node-to-set-name-inp ut", testBody, next); 45 InspectorTest.domActionTestForNodeId("testSetNodeNameInput", "node-t o-set-name-input", testBody, next);
45 46
46 function testBody(node, done) 47 function testBody(node, done)
47 { 48 {
48 editNodePartAndRun(node, "webkit-html-tag-name", "input", done); 49 InspectorTest.editNodePartAndRun(node, "webkit-html-tag-name", " input", done);
49 } 50 }
50 }, 51 },
51 52
52 function testSetNodeValue(next) 53 function testSetNodeValue(next)
53 { 54 {
54 domActionTestForNodeId("testSetNodeValue", "node-to-set-value", test Body, next); 55 InspectorTest.domActionTestForNodeId("testSetNodeValue", "node-to-se t-value", testBody, next);
55 56
56 function testBody(node, done) 57 function testBody(node, done)
57 { 58 {
58 editNodePartAndRun(node, "webkit-html-text-node", " \n Edited Text \n ", done); 59 InspectorTest.editNodePartAndRun(node, "webkit-html-text-node", " \n Edited Text \n ", done);
59 } 60 }
60 }, 61 },
61 62
62 function testSetAttribute(next) 63 function testSetAttribute(next)
63 { 64 {
64 domActionTestForNodeId("testSetAttribute", "node-to-set-attribute", testBody, next); 65 InspectorTest.domActionTestForNodeId("testSetAttribute", "node-to-se t-attribute", testBody, next);
65 66
66 function testBody(node, done) 67 function testBody(node, done)
67 { 68 {
68 editNodePartAndRun(node, "webkit-html-attribute", "bar=\"edited attribute\"", done, true); 69 InspectorTest.editNodePartAndRun(node, "webkit-html-attribute", "bar=\"edited attribute\"", done, true);
69 } 70 }
70 }, 71 },
71 72
72 function testSetScriptableAttribute(next) 73 function testSetScriptableAttribute(next)
73 { 74 {
74 domActionTestForNodeId("testSetScriptableAttribute", "node-to-set-sc riptable-attribute", testBody, next); 75 InspectorTest.domActionTestForNodeId("testSetScriptableAttribute", " node-to-set-scriptable-attribute", testBody, next);
75 76
76 function testBody(node, done) 77 function testBody(node, done)
77 { 78 {
78 editNodePartAndRun(node, "webkit-html-attribute", "onclick=\"ale rt(2)\"", done, true); 79 InspectorTest.editNodePartAndRun(node, "webkit-html-attribute", "onclick=\"alert(2)\"", done, true);
79 } 80 }
80 }, 81 },
81 82
82 function testRemoveAttribute(next) 83 function testRemoveAttribute(next)
83 { 84 {
84 domActionTestForNodeId("testRemoveAttribute", "node-to-remove-attrib ute", testBody, next); 85 InspectorTest.domActionTestForNodeId("testRemoveAttribute", "node-to -remove-attribute", testBody, next);
85 86
86 function testBody(node, done) 87 function testBody(node, done)
87 { 88 {
88 editNodePartAndRun(node, "webkit-html-attribute", "", done, true ); 89 InspectorTest.editNodePartAndRun(node, "webkit-html-attribute", "", done, true);
89 } 90 }
90 }, 91 },
91 92
92 function testAddAttribute(next) 93 function testAddAttribute(next)
93 { 94 {
94 doAddAttribute("testAddAttribute", "node-to-add-attribute", "newattr =\"new-value\"", next); 95 InspectorTest.doAddAttribute("testAddAttribute", "node-to-add-attrib ute", "newattr=\"new-value\"", next);
95 }, 96 },
96 97
97 function testAddAttributeUnquotedValue(next) 98 function testAddAttributeUnquotedValue(next)
98 { 99 {
99 doAddAttribute("testAddAttributeUnquotedValue", "node-to-add-attribu te-unquoted-value", "newattr=unquotedValue", next); 100 InspectorTest.doAddAttribute("testAddAttributeUnquotedValue", "node- to-add-attribute-unquoted-value", "newattr=unquotedValue", next);
100 }, 101 },
101 102
102 function testEditCommentAsHTML(next) 103 function testEditCommentAsHTML(next)
103 { 104 {
104 function commentNodeSelectionCallback(testNode, callback) 105 function commentNodeSelectionCallback(testNode, callback)
105 { 106 {
106 var childNodes = testNode.children(); 107 var childNodes = testNode.children();
107 for (var i = 0; i < childNodes.length; ++i) { 108 for (var i = 0; i < childNodes.length; ++i) {
108 if (childNodes[i].nodeType() === 8) { 109 if (childNodes[i].nodeType() === 8) {
109 WebInspector.Revealer.reveal(childNodes[i]); 110 WebInspector.Revealer.reveal(childNodes[i]);
110 callback(childNodes[i]); 111 callback(childNodes[i]);
111 return; 112 return;
112 } 113 }
113 } 114 }
114 InspectorTest.addResult("Comment node not found"); 115 InspectorTest.addResult("Comment node not found");
115 InspectorTest.completeTest(); 116 InspectorTest.completeTest();
116 } 117 }
117 domActionTest("testEditCommentAsHTML", commentNodeSelectionCallback, testBody, next); 118 InspectorTest.domActionTest("testEditCommentAsHTML", commentNodeSele ctionCallback, testBody, next);
118 119
119 function testBody(node, done) 120 function testBody(node, done)
120 { 121 {
121 var treeElement = WebInspector.panels.elements.treeOutline.findT reeElement(node); 122 var treeElement = WebInspector.panels.elements.treeOutline.findT reeElement(node);
122 treeElement._editAsHTML(); 123 treeElement._editAsHTML();
123 InspectorTest.runAfterPendingDispatches(step2); 124 InspectorTest.runAfterPendingDispatches(step2);
124 125
125 function step2() 126 function step2()
126 { 127 {
127 InspectorTest.addResult(treeElement._editing.codeMirror.getV alue()); 128 InspectorTest.addResult(treeElement._editing.codeMirror.getV alue());
128 treeElement._editing.codeMirror.setValue("<div foo=\"bar-com ment\">Element</div>"); 129 treeElement._editing.codeMirror.setValue("<div foo=\"bar-com ment\">Element</div>");
129 var event = InspectorTest.createKeyEvent("Enter"); 130 var event = InspectorTest.createKeyEvent("Enter");
130 event.isMetaOrCtrlForTest = true; 131 event.isMetaOrCtrlForTest = true;
131 treeElement._htmlEditElement.dispatchEvent(event); 132 treeElement._htmlEditElement.dispatchEvent(event);
132 InspectorTest.runAfterPendingDispatches(done); 133 InspectorTest.runAfterPendingDispatches(done);
133 } 134 }
134 } 135 }
135 }, 136 },
136 137
137 function testEditAsHTML(next) 138 function testEditAsHTML(next)
138 { 139 {
139 domActionTestForNodeId("testEditAsHTML", "node-to-edit-as-html", tes tBody, next); 140 InspectorTest.domActionTestForNodeId("testEditAsHTML", "node-to-edit -as-html", testBody, next);
140 141
141 function testBody(node, done) 142 function testBody(node, done)
142 { 143 {
143 var treeElement = WebInspector.panels.elements.treeOutline.findT reeElement(node); 144 var treeElement = WebInspector.panels.elements.treeOutline.findT reeElement(node);
144 treeElement._editAsHTML(); 145 treeElement._editAsHTML();
145 InspectorTest.runAfterPendingDispatches(step2); 146 InspectorTest.runAfterPendingDispatches(step2);
146 147
147 function step2() 148 function step2()
148 { 149 {
149 InspectorTest.addResult(treeElement._editing.codeMirror.getV alue()); 150 InspectorTest.addResult(treeElement._editing.codeMirror.getV alue());
150 treeElement._editing.codeMirror.setValue("<span foo=\"bar\"> <span id=\"inner-span\">Span contents</span></span>"); 151 treeElement._editing.codeMirror.setValue("<span foo=\"bar\"> <span id=\"inner-span\">Span contents</span></span>");
151 var event = InspectorTest.createKeyEvent("Enter"); 152 var event = InspectorTest.createKeyEvent("Enter");
152 event.isMetaOrCtrlForTest = true; 153 event.isMetaOrCtrlForTest = true;
153 treeElement._htmlEditElement.dispatchEvent(event); 154 treeElement._htmlEditElement.dispatchEvent(event);
154 InspectorTest.runAfterPendingDispatches(InspectorTest.expand ElementsTree.bind(InspectorTest, done)); 155 InspectorTest.runAfterPendingDispatches(InspectorTest.expand ElementsTree.bind(InspectorTest, done));
155 } 156 }
156 } 157 }
157 }, 158 },
158 159
159 function testEditInvisibleCharsAsHTML(next) 160 function testEditInvisibleCharsAsHTML(next)
160 { 161 {
161 domActionTestForNodeId("testEditInvisibleCharsAsHTML", "node-with-in visible-chars", testBody, next); 162 InspectorTest.domActionTestForNodeId("testEditInvisibleCharsAsHTML", "node-with-invisible-chars", testBody, next);
162 163
163 function testBody(node, done) 164 function testBody(node, done)
164 { 165 {
165 var treeElement = WebInspector.panels.elements.treeOutline.findT reeElement(node); 166 var treeElement = WebInspector.panels.elements.treeOutline.findT reeElement(node);
166 treeElement._editAsHTML(); 167 treeElement._editAsHTML();
167 InspectorTest.runAfterPendingDispatches(step2); 168 InspectorTest.runAfterPendingDispatches(step2);
168 169
169 function step2() 170 function step2()
170 { 171 {
171 var codeMirror = treeElement._editing.codeMirror; 172 var codeMirror = treeElement._editing.codeMirror;
172 InspectorTest.addResult(codeMirror.getValue()); 173 InspectorTest.addResult(codeMirror.getValue());
173 codeMirror.setValue(codeMirror.getValue().replace(/&/g, '#') ); 174 codeMirror.setValue(codeMirror.getValue().replace(/&/g, '#') );
174 var event = InspectorTest.createKeyEvent("Enter"); 175 var event = InspectorTest.createKeyEvent("Enter");
175 event.isMetaOrCtrlForTest = true; 176 event.isMetaOrCtrlForTest = true;
176 treeElement._htmlEditElement.dispatchEvent(event); 177 treeElement._htmlEditElement.dispatchEvent(event);
177 InspectorTest.runAfterPendingDispatches(InspectorTest.expand ElementsTree.bind(InspectorTest, done)); 178 InspectorTest.runAfterPendingDispatches(InspectorTest.expand ElementsTree.bind(InspectorTest, done));
178 } 179 }
179 } 180 }
180 }, 181 },
181 182
182 function testEditScript(next) 183 function testEditScript(next)
183 { 184 {
184 domActionTestForNodeId("testEditScript", "node-to-edit-script", test Body, next); 185 InspectorTest.domActionTestForNodeId("testEditScript", "node-to-edit -script", testBody, next);
185 186
186 function testBody(node, done) 187 function testBody(node, done)
187 { 188 {
188 editNodePartAndRun(node, "webkit-html-text-node", "\n var i = 0;\n var j = 0;\n", done); 189 InspectorTest.editNodePartAndRun(node, "webkit-html-text-node", "\n var i = 0;\n var j = 0;\n", done);
189 }
190 },
191
192 function testEditShadowDOMAsHTML(next)
193 {
194 domActionTestForNodeId("testEditAuthorShadowDOMAsHTML", "authorShado wDOMElement", testBody, next);
195
196 function testBody(node, done)
197 {
198 var treeElement = WebInspector.panels.elements.treeOutline.findT reeElement(node);
199 treeElement._editAsHTML();
200 InspectorTest.runAfterPendingDispatches(step2);
201
202 function step2()
203 {
204 InspectorTest.addResult(treeElement._editing.codeMirror.getV alue());
205 treeElement._editing.codeMirror.setValue("<span foo=\"shadow -span\"><span id=\"inner-shadow-span\">Shadow span contents</span></span>");
206 var event = InspectorTest.createKeyEvent("Enter");
207 event.isMetaOrCtrlForTest = true;
208 treeElement._htmlEditElement.dispatchEvent(event);
209 InspectorTest.runAfterPendingDispatches(InspectorTest.expand ElementsTree.bind(InspectorTest, done));
210 }
211 } 190 }
212 } 191 }
213 ]); 192 ]);
214
215 function doAddAttribute(testName, dataNodeId, attributeText, next)
216 {
217 domActionTestForNodeId(testName, dataNodeId, testBody, next);
218
219 function testBody(node, done)
220 {
221 var editorElement = editNodePart(node, "webkit-html-attribute");
222 editorElement.dispatchEvent(InspectorTest.createKeyEvent("U+0009")); // Tab
223
224 InspectorTest.runAfterPendingDispatches(testContinuation);
225
226 function testContinuation()
227 {
228 var editorElement = window.getSelection().anchorNode.parentEleme nt;
229 editorElement.textContent = attributeText;
230 editorElement.dispatchEvent(InspectorTest.createKeyEvent("Enter" ));
231 InspectorTest.addSniffer(WebInspector.ElementsTreeUpdater.protot ype, "_updateModifiedNodes", done);
232 }
233 }
234 }
235
236 function domActionTestForNodeId(testName, dataNodeId, testBody, next)
237 {
238 function callback(testNode, continuation)
239 {
240 InspectorTest.selectNodeWithId(dataNodeId, continuation);
241 }
242 domActionTest(testName, callback, testBody, next);
243 }
244
245 function domActionTest(testName, dataNodeSelectionCallback, testBody, next)
246 {
247 var testNode = InspectorTest.expandedNodeWithId(testName);
248 InspectorTest.addResult("==== before ====");
249 InspectorTest.dumpElementsTree(testNode);
250
251 dataNodeSelectionCallback(testNode, step0);
252
253 function step0(node)
254 {
255 InspectorTest.runAfterPendingDispatches(step1.bind(null, node));
256 }
257
258 function step1(node)
259 {
260 testBody(node, step2);
261 }
262
263 function step2()
264 {
265 InspectorTest.addResult("==== after ====");
266 InspectorTest.dumpElementsTree(testNode);
267 next();
268 }
269 }
270
271 function editNodePart(node, className)
272 {
273 var treeElement = WebInspector.panels.elements.treeOutline.findTreeEleme nt(node);
274 var textElement = treeElement.listItemElement.getElementsByClassName(cla ssName)[0];
275 if (!textElement && treeElement.childrenListElement)
276 textElement = treeElement.childrenListElement.getElementsByClassName (className)[0];
277 treeElement._startEditingTarget(textElement);
278 return textElement;
279 }
280
281 function editNodePartAndRun(node, className, newValue, step2, useSniffer)
282 {
283 var editorElement = editNodePart(node, className);
284 editorElement.textContent = newValue;
285 editorElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
286 if (useSniffer)
287 InspectorTest.addSniffer(WebInspector.ElementsTreeUpdater.prototype, "_updateModifiedNodes", step2);
288 else
289 InspectorTest.runAfterPendingDispatches(step2);
290 }
291 } 193 }
292 194
293 </script> 195 </script>
294 </head> 196 </head>
295 197
296 <body onload="runTest()"> 198 <body onload="runTest()">
297 <p> 199 <p>
298 Tests that user can mutate DOM by means of elements panel. 200 Tests that user can mutate DOM by means of elements panel.
299 </p> 201 </p>
300 202
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after
353 for (; i < j; ++i) { 255 for (; i < j; ++i) {
354 // Do nothing. 256 // Do nothing.
355 } 257 }
356 258
357 </script> 259 </script>
358 </div> 260 </div>
359 261
360 <div id="testEditCommentAsHTML"> 262 <div id="testEditCommentAsHTML">
361 <!-- Comment --> 263 <!-- Comment -->
362 </div> 264 </div>
363
364 <div id="testEditAuthorShadowDOMAsHTML" />
365 </div> 265 </div>
366 <script>
367 var container = document.getElementById("testEditAuthorShadowDOMAsHTML");
368 var root = container.createShadowRoot();
369 root.innerHTML = "<div id='authorShadowDOMElement'></div>";
370 </script>
371 </body> 266 </body>
372 </html> 267 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/inspector/elements/edit-dom-actions-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698