summaryrefslogtreecommitdiffstats
path: root/third_party/WebKit/LayoutTests/inspector/elements/insert-node.html
blob: b526175c34fbd1350a8d80a4ff71ae7690a9f2f7 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<html>
<head>
<script src="../../http/tests/inspector/inspector-test.js"></script>
<script src="../../http/tests/inspector/elements-test.js"></script>
<script>

function insertBeforeFirst()
{
    var container = document.getElementById("container");
    var child = document.createElement("div");
    child.setAttribute("id", "child-before");
    container.insertBefore(child, container.firstChild);
}

function insertNode()
{
    var container = document.getElementById("container");
    var child2 = document.getElementById("child2");
    var child = document.createElement("div");
    child.setAttribute("id", "child-middle");
    container.insertBefore(child, child2);
}

function appendChild()
{
    var container = document.getElementById("container");
    var child = document.createElement("div");
    child.setAttribute("id", "child-after");
    container.appendChild(child);
}

function appendChildWithText()
{
    var container = document.getElementById("container");
    var child = document.createElement("div");
    child.setAttribute("id", "child-with-text");
    child.setAttribute("style", "display: none;");
    child.innerText = "Text";
    container.appendChild(child);
}

function insertFirstTextNode()
{
    var child3 = document.getElementById("child3");
    child3.innerText = "First text";
}

function test()
{
    var containerNode;

    InspectorTest.runTestSuite([
        function testDumpInitial(next)
        {
            function callback(node)
            {
                containerNode = InspectorTest.expandedNodeWithId("container");

                InspectorTest.addResult("========= Original ========");
                InspectorTest.dumpElementsTree(containerNode);
                next();
            }
            InspectorTest.expandElementsTree(callback);
        },

        function testInsertBefore(next)
        {
            function callback()
            {
                InspectorTest.addResult("===== Inserted before =====");
                InspectorTest.dumpElementsTree(containerNode);
                next();
            }
            InspectorTest.evaluateInPage("insertBeforeFirst()", callback);
        },

        function testInsertMiddle(next)
        {
            function callback()
            {
                InspectorTest.addResult("===== Inserted middle =====");
                InspectorTest.dumpElementsTree(containerNode);
                next();
            }
            InspectorTest.evaluateInPage("insertNode()", callback);
        },

        function testAppend(next)
        {
            function callback()
            {
                InspectorTest.addResult("======== Appended =========");
                InspectorTest.dumpElementsTree(containerNode);
                next();
            }
            InspectorTest.evaluateInPage("appendChild()", callback);
        },

        function testAppendWithText(next)
        {
            function callback()
            {
                InspectorTest.addResult("======== Appended with text=========");
                InspectorTest.dumpElementsTree(containerNode);
                var newNode = InspectorTest.expandedNodeWithId("child-with-text");
                if (WebInspector.domAgent.nodeForId(newNode.firstChild.id))
                    InspectorTest.addResult("Success: child text is bound");
                else
                    InspectorTest.addResult("Failed: child text is not bound");
                next();
            }
            InspectorTest.evaluateInPage("appendChildWithText()", callback);
        },

        function testInsertFirstTextNode(next)
        {
            function callback()
            {
                InspectorTest.addResult("======== Inserted first text node =========");
                InspectorTest.expandElementsTree(callback2);
            }

            function callback2()
            {
                InspectorTest.dumpElementsTree(containerNode);
                var newNode = InspectorTest.expandedNodeWithId("child3");
                if (WebInspector.domAgent.nodeForId(newNode.firstChild.id))
                    InspectorTest.addResult("Success: child text is bound");
                else
                    InspectorTest.addResult("Failed: child text is not bound");
                next();
            }
            InspectorTest.evaluateInPage("insertFirstTextNode()", callback);
        }
    ]);
}

</script>
</head>

<body onload="runTest()">
<p>
Tests that elements panel updates dom tree structure upon node insertion.
</p>

<div id="container"><div id="child1"></div><div id="child2"></div><div id="child3"></div></div>

</body>
</html>