src/third_party/WebKit/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     InspectorTest.runTestSuite([
  15         function testSetUp(next)
  16         {
  17             treeOutline = InspectorTest.firstElementsTreeOutline();
  18
  19             InspectorTest.nodeWithId("parent-node", callback);
  20
  21             function callback(node)
  22             {
  23                 parentNode = node
  24                 InspectorTest.nodeWithId("child-node", callback2);
  25             }
  26
  27             function callback2(node)
  28             {
  29                 childNode = node;
  30                 InspectorTest.nodeWithId("frame-node", callback3);
  31             }
  32
  33             function callback3(node)
  34             {
  35                 frameNode = node;
  36                 next();
  37             }
  38         },
  39
  40         function testToggleHideShortcutOn(next)
  41         {
  42             treeOutline._toggleHideShortcut(parentNode, callback);
  43
  44             function callback()
  45             {
  46                 InspectorTest.addResult("=== Added hide shortcut ===");
  47                 WebInspector.cssModel.getComputedStyleAsync(parentNode.id, callback2);
  48             }
  49
  50             function callback2(style)
  51             {
  52                 InspectorTest.addResult("=== Parent node is hidden ===");
  53                 InspectorTest.addResult(style.getLiveProperty("visibility").propertyText);
  54                 WebInspector.cssModel.getComputedStyleAsync(childNode.id, callback3);
  55             }
  56
  57             function callback3(style)
  58             {
  59                 InspectorTest.addResult("=== Child node is hidden ===");
  60                 InspectorTest.addResult(style.getLiveProperty("visibility").propertyText);
  61                 next();
  62             }
  63         },
  64
  65         function testToggleHideShortcutOff(next)
  66         {
  67             treeOutline._toggleHideShortcut(parentNode, callback);
  68
  69             function callback()
  70             {
  71                 InspectorTest.addResult("=== Removed hide shortcut ===");
  72                 WebInspector.cssModel.getComputedStyleAsync(parentNode.id, callback2);
  73             }
  74
  75             function callback2(style)
  76             {
  77                 InspectorTest.addResult("=== Parent node is visible ===");
  78                 InspectorTest.addResult(style.getLiveProperty("visibility").propertyText);
  79                 WebInspector.cssModel.getComputedStyleAsync(childNode.id, callback3);
  80             }
  81
  82             function callback3(style)
  83             {
  84                 InspectorTest.addResult("=== Child node is visible ===");
  85                 InspectorTest.addResult(style.getLiveProperty("visibility").propertyText);
  86                 next();
  87             }
  88         },
  89
  90         function testToggleHideBeforePseudoShortcutOn(next)
  91         {
  92             testPseudoToggle(WebInspector.DOMNode.PseudoElementNames.Before, next);
  93         },
  94
  95         function testToggleHideAfterPseudoShortcutOn(next)
  96         {
  97             testPseudoToggle(WebInspector.DOMNode.PseudoElementNames.After, next);
  98         },
  99
 100         function testToggleHideBeforePseudoShortcutOff(next)
 101         {
 102             testPseudoToggle(WebInspector.DOMNode.PseudoElementNames.Before, next);
 103         },
 104
 105         function testToggleHideAfterPseudoShortcutOff(next)
 106         {
 107             testPseudoToggle(WebInspector.DOMNode.PseudoElementNames.After, next);
 108         },
 109
 110         function testToggleHideShortcutOnInFrame(next)
 111         {
 112             treeOutline._toggleHideShortcut(frameNode, callback);
 113
 114             function callback()
 115             {
 116                 InspectorTest.addResult("=== Added hide shortcut in frame ===");
 117                 WebInspector.cssModel.getComputedStyleAsync(frameNode.id, callback2);
 118             }
 119
 120             function callback2(style)
 121             {
 122                 InspectorTest.addResult("=== Frame node is hidden ===");
 123                 InspectorTest.addResult(style.getLiveProperty("visibility").propertyText);
 124                 next();
 125             }
 126         }
 127     ]);
 128
 129     function testPseudoToggle(pseudoType, next)
 130     {
 131         var pseudoNode = parentNode.pseudoElements()[pseudoType];
 132         treeOutline._toggleHideShortcut(pseudoNode, callback);
 133
 134         function callback()
 135         {
 136             WebInspector.cssModel.getComputedStyleAsync(pseudoNode.id, callback2);
 137         }
 138
 139         function callback2(style)
 140         {
 141             InspectorTest.addResult("::" + pseudoType + " node visibility: '" + style.getLiveProperty("visibility").value + "'");
 142             next();
 143         }
 144     }
 145 }
 146 </script>
 147 <style>
 148 #parent-node::before {
 149     content: "before";
 150 }
 151
 152 #parent-node::after {
 153     content: "after";
 154 }
 155 </style>
 156 </head>
 157
 158 <body>
 159 <p>
 160 Tests the hide shortcut, which toggles visibility:hidden on the node and it's ancestors.
 161 <a href="https://bugs.webkit.org/show_bug.cgi?id=110641">Bug 110641</a>
 162 </p>
 163
 164 <div id="parent-node">parent
 165     <div style="visibility:hidden">hidden
 166         <div id="child-node" style="visibility:visible">child</div>
 167     </div>
 168 </div>
 169
 170 <iframe src="resources/hide-shortcut-iframe.html" onload="runTest()">
 171
 172 </body>
 173 </html>