| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script> |
| function test() |
| { |
| let domNode; |
| let suite = InspectorTest.createAsyncSuite("DOM.setOuterHTML"); |
| |
| suite.addTestCase({ |
| name: "OuterHTMLBefore", |
| description: "Log the initial outerHTML of the target element.", |
| test(resolve, reject) { |
| domNode.getOuterHTML(function(error, outerHTML) { |
| InspectorTest.expectNoError(error); |
| InspectorTest.log(outerHTML); |
| resolve(); |
| }); |
| } |
| }); |
| |
| const emptyOuterHTML = `<div id="x"></div>`; |
| |
| const newOuterHTML = ` |
| <div id="x" style="display:none; color:red"> |
| <div class="container"> |
| <h1>A Title</h1> |
| <p>A Paragraph</p> |
| </div> |
| </div>`.trim(); |
| |
| const modifiedOuterHTML = ` |
| <div id="x" style="display:none; color:red"> |
| <div class="container"> |
| <h1>A Different Title</h1> |
| <p>A Paragraph</p> |
| </div> |
| </div>`.trim(); |
| |
| let steps = [ |
| ["RemovingElements", emptyOuterHTML], |
| ["AddingElements", newOuterHTML], |
| ["ModifyingElements", modifiedOuterHTML], |
| ]; |
| |
| steps.forEach(function(tuple) { |
| let [title, replacementOuterHTML] = tuple; |
| suite.addTestCase({ |
| name: `SetOuterHTML${title}`, |
| description: "Change the outerHTML.", |
| test(resolve, reject) { |
| domNode.setOuterHTML(replacementOuterHTML, function(error, outerHTML) { |
| InspectorTest.expectNoError(error); |
| resolve(); |
| }); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: `CheckOuterHTMLAfter${title}`, |
| description: "Log the outerHTML of the target element after changes.", |
| test(resolve, reject) { |
| domNode.getOuterHTML(function(error, outerHTML) { |
| InspectorTest.expectNoError(error); |
| InspectorTest.expectThat(outerHTML === replacementOuterHTML, "The outerHTML should be what was just set."); |
| InspectorTest.log(outerHTML); |
| resolve(); |
| }); |
| } |
| }); |
| }); |
| |
| WI.domManager.requestDocument(function(documentNode) { |
| WI.domManager.querySelector(documentNode.id, "#x", function(nodeId) { |
| domNode = WI.domManager.nodeForId(nodeId); |
| InspectorTest.assert(domNode, "DOMNode exists."); |
| suite.runTestCasesAndFinish(); |
| }); |
| }); |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <p>Test for DOM.setOuterHTML (Edit as HTML).</p> |
| |
| <div id="x" style="display:none"> |
| <h1>Original Title</h1> |
| <p>Original Paragraph</p> |
| </div> |
| |
| </body> |
| </html> |
