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