third_party/WebKit/LayoutTests/inspector/elements/elements-panel-selection-after-delete.html

   1 <html>
   2 <head>
   3 <script src="../../http/tests/inspector/inspector-test.js"></script>
   4 <script src="../../http/tests/inspector/elements-test.js"></script>
   5 <script>
   6
   7 function prepareTestTree()
   8 {
   9     var template = document.querySelector("#testTree");
  10     var testTreeContainer = document.querySelector("#testTreeContainer");
  11     testTreeContainer.textContent = "";
  12     testTreeContainer.appendChild(document.importNode(template.content, true));
  13 }
  14
  15 function test()
  16 {
  17     function selectNode(className, callback)
  18     {
  19         var selector = "#testTreeContainer ." + className;
  20         InspectorTest.querySelector(selector, gotNode);
  21
  22         function gotNode(node)
  23         {
  24             InspectorTest.selectNode(node).then(callback);
  25         }
  26     }
  27
  28     function nodeToString(node)
  29     {
  30         if (!node)
  31             return "null"
  32         var result = "<" + node.nodeName();
  33         var attributes = node.attributes();
  34         for (var attribute of attributes) {
  35             result += " " + attribute.name;
  36             if (attribute.value)
  37                 result += "=\"" + attribute.value + "\"";
  38         }
  39         result += ">";
  40         return result;
  41     }
  42
  43     function prepareTestTree(callback)
  44     {
  45         InspectorTest.evaluateInPage("prepareTestTree()", callback);
  46     }
  47
  48     function removeElementAsUser(element, callback)
  49     {
  50         InspectorTest.addSniffer(WebInspector.ElementsTreeOutline.prototype, "_updateModifiedNodes", callback);
  51         element.remove();
  52     }
  53
  54     function removeElementExternally(element, callback)
  55     {
  56         var node = element.node();
  57         InspectorTest.addSniffer(WebInspector.ElementsTreeOutline.prototype, "_updateChildren", callback);
  58         node.removeNode();
  59     }
  60
  61     function dumpSelectedNode()
  62     {
  63         var selectedElement = InspectorTest.firstElementsTreeOutline().selectedTreeElement;
  64         var selectedNode = selectedElement ? selectedElement.node() : null;
  65         InspectorTest.addResult("The following node is now selected: " + nodeToString(selectedNode));
  66     }
  67
  68     InspectorTest.runTestSuite([
  69         function testUserDelete(next)
  70         {
  71             prepareTestTree(step2);
  72
  73             function step2()
  74             {
  75                 InspectorTest.addResult("Selecting node...");
  76                 selectNode("child2", step3);
  77             }
  78
  79             function step3()
  80             {
  81                 dumpSelectedNode();
  82
  83                 InspectorTest.addResult("Deleting selected node like it was a user action...");
  84                 var selectedElement = InspectorTest.firstElementsTreeOutline().selectedTreeElement;
  85                 removeElementAsUser(selectedElement, step4);
  86             }
  87
  88             function step4()
  89             {
  90                 dumpSelectedNode();
  91
  92                 InspectorTest.addResult("Deleting selected node like it was a user action again...");
  93                 var selectedElement = InspectorTest.firstElementsTreeOutline().selectedTreeElement;
  94                 removeElementAsUser(selectedElement, step5);
  95             }
  96
  97             function step5()
  98             {
  99                 dumpSelectedNode();
 100
 101                 InspectorTest.addResult("Deleting last child like it was a user action...");
 102                 var selectedElement = InspectorTest.firstElementsTreeOutline().selectedTreeElement;
 103                 removeElementAsUser(selectedElement, step6);
 104             }
 105
 106             function step6()
 107             {
 108                 dumpSelectedNode();
 109                 next();
 110             }
 111         },
 112
 113         function testExternalDelete(next)
 114         {
 115             // We should wait for container node to be updated since it is already populated.
 116             InspectorTest.addSniffer(WebInspector.ElementsTreeOutline.prototype, "_updateModifiedNodes", step2);
 117             prepareTestTree();
 118
 119             function step2()
 120             {
 121                 InspectorTest.addResult("Selecting node...");
 122                 selectNode("child2", step3);
 123             }
 124
 125             function step3()
 126             {
 127                 dumpSelectedNode();
 128
 129                 InspectorTest.addResult("Deleting selected node externally...");
 130                 var selectedElement = InspectorTest.firstElementsTreeOutline().selectedTreeElement;
 131                 removeElementExternally(selectedElement, step4);
 132             }
 133
 134             function step4()
 135             {
 136                 dumpSelectedNode();
 137
 138                 InspectorTest.addResult("Deleting selected node externally again...");
 139                 var selectedElement = InspectorTest.firstElementsTreeOutline().selectedTreeElement;
 140                 removeElementExternally(selectedElement, step5);
 141             }
 142
 143             function step5()
 144             {
 145                 dumpSelectedNode();
 146
 147                 InspectorTest.addResult("Deleting last child externally...");
 148                 var selectedElement = InspectorTest.firstElementsTreeOutline().selectedTreeElement;
 149                 removeElementExternally(selectedElement, step6);
 150             }
 151
 152             function step6()
 153             {
 154                 dumpSelectedNode();
 155                 next();
 156             }
 157         },
 158     ]);
 159 }
 160
 161 </script>
 162 </head>
 163 <body onload="runTest()">
 164 <p>Tests that elements panel correctly updates selection on node removal.</p>
 165 <template id="testTree">
 166     <div class="left">
 167         <div class="child1">
 168         </div>
 169         <div class="child2">
 170             <div class="child5">
 171             </div>
 172             <div class="child6">
 173             </div>
 174             <div class="child7">
 175             </div>
 176             <div class="child8">
 177             </div>
 178         </div>
 179         <div class="child3">
 180         </div>
 181     </div>
 182 </template>
 183 <div id="testTreeContainer">
 184 </div>
 185 </body>
 186 </html>