WebInspector: Switch hide element shortcut in ElementsPanel to use a selector
[WebKit-https.git] / LayoutTests / inspector / elements / hide-shortcut.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 test()
8 {
9     var treeOutline;
10     var parentNode;
11     var childNode;
12     var frameNode;
13
14     WebInspector.showPanel("elements");
15     InspectorTest.runTestSuite([
16         function testSetUp(next)
17         {
18             treeOutline = WebInspector.panels.elements.treeOutline;
19
20             InspectorTest.nodeWithId("parent-node", callback);
21
22             function callback(node)
23             {
24                 parentNode = node
25                 InspectorTest.nodeWithId("child-node", callback2);
26             }
27
28             function callback2(node)
29             {
30                 childNode = node;
31                 InspectorTest.nodeWithId("frame-node", callback3);
32             }
33
34             function callback3(node)
35             {
36                 frameNode = node;
37                 next();
38             }
39         },
40
41         function testToggleHideShortcutOn(next)
42         {
43             treeOutline._toggleHideShortcut(parentNode, callback);
44
45             function callback()
46             {
47                 InspectorTest.addResult("=== Added hide shortcut ===");
48                 WebInspector.cssModel.getComputedStyleAsync(parentNode.id, callback2);
49             }
50
51             function callback2(style)
52             {
53                 InspectorTest.addResult("=== Parent node is hidden ===");
54                 InspectorTest.addResult(style.getLiveProperty("visibility").propertyText);
55                 WebInspector.cssModel.getComputedStyleAsync(childNode.id, callback3);
56             }
57
58             function callback3(style)
59             {
60                 InspectorTest.addResult("=== Child node is hidden ===");
61                 InspectorTest.addResult(style.getLiveProperty("visibility").propertyText);
62                 next();
63             }
64         },
65
66         function testToggleHideShortcutOff(next)
67         {
68             treeOutline._toggleHideShortcut(parentNode, callback);
69
70             function callback()
71             {
72                 InspectorTest.addResult("=== Removed hide shortcut ===");
73                 WebInspector.cssModel.getComputedStyleAsync(parentNode.id, callback2);
74             }
75
76             function callback2(style)
77             {
78                 InspectorTest.addResult("=== Parent node is visible ===");
79                 InspectorTest.addResult(style.getLiveProperty("visibility").propertyText);
80                 WebInspector.cssModel.getComputedStyleAsync(childNode.id, callback3);
81             }
82
83             function callback3(style)
84             {
85                 InspectorTest.addResult("=== Child node is visible ===");
86                 InspectorTest.addResult(style.getLiveProperty("visibility").propertyText);
87                 next();
88             }
89         },
90
91         function testToggleHideShortcutOnInFrame(next)
92         {
93             treeOutline._toggleHideShortcut(frameNode, callback);
94
95             function callback()
96             {
97                 InspectorTest.addResult("=== Added hide shortcut in frame ===");
98                 WebInspector.cssModel.getComputedStyleAsync(frameNode.id, callback2);
99             }
100
101             function callback2(style)
102             {
103                 InspectorTest.addResult("=== Frame node is hidden ===");
104                 InspectorTest.addResult(style.getLiveProperty("visibility").propertyText);
105                 next();
106             }
107         }
108     ]);
109 }
110 </script>
111 </head>
112
113 <body>
114 <p>
115 Tests the hide shortcut, which toggles visibility:hidden on the node and it's ancestors.
116 <a href="https://bugs.webkit.org/show_bug.cgi?id=110641">Bug 110641</a>
117 </p>
118
119 <div id="parent-node">parent
120     <div style="visibility:hidden">hidden
121         <div id="child-node" style="visibility:visible">child</div>
122     </div>
123 </div>
124
125 <iframe src="resources/hide-shortcut-iframe.html" onload="runTest()">
126
127 </body>
128 </html>