src/third_party/WebKit/LayoutTests/inspector/styles/protocol-css-regions-commands.html

   1 <html>
   2 <head>
   3 <script src="../../http/tests/inspector/inspector-test.js"></script>
   4 <script>
   5
   6 function createDynamicElements()
   7 {
   8     var frameDoc = window.frames[0].document;
   9
  10     var el = frameDoc.createElement("article");
  11     el.style.webkitFlowInto = "flow4";
  12     frameDoc.body.appendChild(el);
  13
  14     el = frameDoc.createElement("div");
  15     el.style.webkitFlowFrom = "flow4";
  16     frameDoc.body.appendChild(el);
  17
  18     runTest();
  19 }
  20
  21 function createNamedFlow()
  22 {
  23     var article = document.createElement("article");
  24     var div = document.createElement("div");
  25
  26     article.id = "tmpArticle";
  27     article.style["-webkit-flow-into"] = "tmpNamedFlow";
  28     article.textContent = "This text is from CSS Named Flow \"tmpNamedFlow\"";
  29
  30     div.id = "tmpDiv";
  31     div.style["-webkit-flow-from"] = "tmpNamedFlow";
  32     div.style["height"] = "5px";
  33     div.style["width"] = "20px";
  34
  35     document.body.appendChild(article);
  36     document.body.appendChild(div);
  37 }
  38
  39 function removeNamedFlow()
  40 {
  41     document.body.removeChild(document.getElementById("tmpArticle"));
  42     document.body.removeChild(document.getElementById("tmpDiv"));
  43 }
  44
  45 function test()
  46 {
  47     WebInspector.showPanel("elements");
  48     InspectorTest.runTestSuite([
  49         function testGetNamedFlowCollection(next)
  50         {
  51             WebInspector.domAgent.requestDocument(documentCallback);
  52
  53             function documentCallback(document)
  54             {
  55                 WebInspector.cssModel.getNamedFlowCollectionAsync(document.id, namedFlowCallback);
  56             }
  57
  58             function namedFlowCallback(namedFlowCollection)
  59             {
  60                 InspectorTest.addResult("=== CSS Named Flows in main document ===");
  61
  62                 if (!namedFlowCollection) {
  63                     InspectorTest.addResult("[!] Failed to get Named Flows");
  64                     InspectorTest.completeTest();
  65                     return;
  66                 }
  67
  68                 var namedFlowMap = namedFlowCollection.namedFlowMap;
  69                 var namedFlows = [];
  70                 for (var flowName in namedFlowMap)
  71                     namedFlows.push(namedFlowMap[flowName]);
  72
  73                 namedFlows.sort(function (nf1, nf2) {
  74                     return ((nf1.name == nf2.name) ? 0 : ((nf1.name > nf2.name) ? 1 : -1));
  75                 });
  76
  77                 for (var i = 0; i < namedFlows.length; ++i)
  78                     printNamedFlow(namedFlows[i]);
  79
  80                 next();
  81             }
  82         },
  83
  84         function testGetNamedFlowCollectionWithInvalidDocument(next)
  85         {
  86             WebInspector.domAgent.requestDocument(documentCallback);
  87
  88             function documentCallback(document)
  89             {
  90                 WebInspector.domAgent.querySelector(document.id, "#fake-document", querySelectorCallback);
  91             }
  92
  93             function querySelectorCallback(nodeId)
  94             {
  95                 WebInspector.cssModel.getNamedFlowCollectionAsync(nodeId, namedFlowCallback);
  96             }
  97
  98             function namedFlowCallback(namedFlowCollection)
  99             {
 100                 InspectorTest.addResult("=== CSS Named Flows in #fake-document ===");
 101
 102                 if (namedFlowCollection) {
 103                     InspectorTest.addResult("[!] Failed");
 104                     InspectorTest.completeTest();
 105                     return;
 106                 }
 107
 108                 InspectorTest.addResult("#fake-document is not a document")
 109                 next();
 110             }
 111         },
 112
 113         function testGetFlowByName(next)
 114         {
 115             WebInspector.domAgent.requestDocument(documentCallback);
 116
 117             function documentCallback(document)
 118             {
 119                 WebInspector.cssModel.getFlowByNameAsync(document.id, "flow2", namedFlowCallback);
 120             }
 121
 122             function namedFlowCallback(namedFlow)
 123             {
 124                 InspectorTest.addResult("=== Named Flow \"flow2\" from main document ===");
 125
 126                 if (!namedFlow) {
 127                     InspectorTest.addResult("[!] Failed to get Named Flow");
 128                     InspectorTest.completeTest();
 129                     return;
 130                 }
 131
 132                 printNamedFlow(namedFlow);
 133
 134                 next();
 135             }
 136         },
 137
 138         function testGetFlowByNameWithInvalidName(next)
 139         {
 140             WebInspector.domAgent.requestDocument(documentCallback);
 141
 142             function documentCallback(document)
 143             {
 144                 WebInspector.cssModel.getFlowByNameAsync(document.id, "flow4", namedFlowCallback);
 145             }
 146
 147             function namedFlowCallback(namedFlow)
 148             {
 149                 InspectorTest.addResult("=== Name Flow \"flow4\" from main document ===");
 150
 151                 if (namedFlow) {
 152                     InspectorTest.addResult("[!] Failed")
 153                     InspectorTest.completeTest();
 154                     return;
 155                 }
 156
 157                 InspectorTest.addResult("There is no Named Flow \"flow4\" in the main document");
 158                 next();
 159             }
 160         },
 161
 162         function testNamedFlowCreated(next)
 163         {
 164             WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.NamedFlowCreated, callback, this);
 165             InspectorTest.evaluateInPage("createNamedFlow()");
 166
 167             function callback(event)
 168             {
 169                 if (event.data.name !== "tmpNamedFlow")
 170                     return;
 171
 172                 WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.NamedFlowCreated, callback, this);
 173
 174                 InspectorTest.addResult("NamedFlowCreated: \"tmpNamedFlow\"");
 175                 next();
 176             }
 177         },
 178
 179         function testRegionOversetChanged(next)
 180         {
 181             WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.RegionOversetChanged, callback, this);
 182             InspectorTest.evaluateInPage("window.document.getElementById(\"region3\").style.webkitFlowFrom=\"flow3\"");
 183
 184             function callback(event)
 185             {
 186                 if (event.data.name !== "flow3")
 187                     return;
 188
 189                 WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.RegionOversetChanged, callback, this);
 190
 191                 InspectorTest.addResult("RegionOversetChanged: \"flow3\"");
 192                 next();
 193             }
 194         },
 195
 196         function testNamedFlowRemoved(next)
 197         {
 198             WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.NamedFlowRemoved, callback, this);
 199             InspectorTest.evaluateInPage("removeNamedFlow()");
 200
 201             function callback(event)
 202             {
 203                 if (event.data.flowName !== "tmpNamedFlow")
 204                     return;
 205
 206                 WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.NamedFlowRemoved, callback, this);
 207
 208                 InspectorTest.addResult("NamedFlowRemoved: \"tmpNamedFlow\"");
 209                 next();
 210             }
 211         }
 212     ]);
 213
 214     function printNamedFlow(namedFlow)
 215     {
 216         InspectorTest.addResult("* Named Flow \"" + namedFlow.name + "\"");
 217         InspectorTest.addResult("Content Elements: " + namedFlow.content.length);
 218         InspectorTest.addResult("Regions: " + namedFlow.regions.length);
 219     }
 220 }
 221 </script>
 222 </head>
 223
 224 <body onload="createDynamicElements()">
 225 <p>
 226 Tests the following commands and events:
 227 <ul>
 228     <li>getNamedFlowCollection <a href="https://bugs.webkit.org/show_bug.cgi?id=91607">Bug 91607</a></li>
 229     <li>getFlowByName <a href="https://bugs.webkit.org/show_bug.cgi?id=91855">Bug 91855</a></li>
 230     <li>namedFlowCreated <a href="https://bugs.webkit.org/show_bug.cgi?id=92739">Bug 92739</a></li>
 231     <li>namedFlowRemoved <a href="https://bugs.webkit.org/show_bug.cgi?id=92739">Bug 92739</a></li>
 232     <li>regionOversetChanged <a href="https://code.google.com/p/chromium/issues/detail?id=252250">Bug 252250</a></li>
 233 </ul>
 234 </p>
 235
 236 <article style="-webkit-flow-into: flow1"></article>
 237 <div style="-webkit-flow-from: flow1"></div>
 238 <div style="-webkit-flow-from: flow1"></div>
 239 <div style="-webkit-flow-from: flow1"></div>
 240
 241 <article style="-webkit-flow-into: flow2"></article>
 242 <div style="-webkit-flow-from: flow2"></div>
 243 <div style="-webkit-flow-from: flow2"></div>
 244
 245 <article style="-webkit-flow-into: flow3">
 246     This text is from CSS Named Flow "flow3".
 247 </article>
 248 <div id="region3" style="-webkit-flow-from: none; height: 20px; width: 5px"></div>
 249
 250 <div id="fake-document"></div>
 251
 252 <iframe></iframe>
 253
 254 </body>
 255 </html>