<!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();
                });
            }
        });
    });

    WebInspector.domTreeManager.requestDocument(function(documentNode) {
        WebInspector.domTreeManager.querySelector(documentNode.id, "#x", function(nodeId) {
            domNode = WebInspector.domTreeManager.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>