LayoutTests/inspector-protocol/model/content-flow-content-nodes.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4 <style>
   5 .content
   6 {
   7     -webkit-flow-into: flow;
   8 }
   9 .hidden
  10 {
  11     -webkit-flow-into: none;
  12 }
  13 </style>
  14 <script type="text/javascript" src="../../http/tests/inspector-protocol/resources/protocol-test.js"></script>
  15 <script>
  16 function changeFlowContent()
  17 {
  18     document.getElementById("contentAddedAtTheTop").classList.remove("hidden");
  19     // Force a layout to make sure the events are always fired in the expected order.
  20     document.body.offsetTop;
  21     document.getElementById("contentAddedAtTheBottom").classList.remove("hidden");
  22     document.body.offsetTop;
  23     document.getElementById("contentRemoved").classList.add("hidden");
  24 }
  25
  26 function test()
  27 {
  28     InspectorTest.initializeInspectorModels();
  29
  30     var contentFlow;
  31
  32     WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.MainFrameDidChange, function(event) {
  33         var domTree = WebInspector.frameResourceManager.mainFrame.domTree;
  34         domTree.addEventListener(WebInspector.DOMTree.Event.RootDOMNodeInvalidated, onRootDOMNodeInvalidated, null);
  35         domTree.addEventListener(WebInspector.DOMTree.Event.ContentFlowWasAdded, onContentFlowWasAdded, null);
  36         domTree.requestContentFlowList();
  37     });
  38
  39     function onRootDOMNodeInvalidated()
  40     {
  41         WebInspector.frameResourceManager.mainFrame.domTree.requestContentFlowList();
  42     }
  43
  44     function onContentFlowWasAdded(event)
  45     {
  46         contentFlow = event.data.flow;
  47         InspectorTest.assert(contentFlow.name === "flow", "ContentFlow was added.");
  48         InspectorTest.assert(contentFlow.contentNodes.length == 2, "ContentFlow.contentNodes has a length of 2.");
  49         InspectorTest.assert(contentFlow.contentNodes[0].getAttribute("id") === "contentStatic", "ContentFlow.contentNodes[0].id is \"#contentStatic\".");
  50         InspectorTest.assert(contentFlow.contentNodes[1].getAttribute("id") === "contentRemoved", "ContentFlow.contentNodes[1].id is \"#contentRemoved\".");
  51
  52         contentFlow.addEventListener(WebInspector.ContentFlow.Event.ContentNodeWasAdded, onContentNodeWasAdded, null);
  53         contentFlow.addEventListener(WebInspector.ContentFlow.Event.ContentNodeWasRemoved, onContentNodeWasRemoved, null);
  54
  55         InspectorTest.sendCommand("Runtime.evaluate", {expression: "changeFlowContent()"});
  56     }
  57
  58     function onContentNodeWasAdded(event)
  59     {
  60         switch (event.data.node.getAttribute("id")) {
  61         case "contentAddedAtTheTop":
  62             InspectorTest.assert(event.data.before.getAttribute("id") === "contentStatic", "\"#contentAddedAtTheTop\" was added before \"#contentStatic\".");
  63             InspectorTest.assert(contentFlow.contentNodes[0] === event.data.node, "\"#contentAddedAtTheTop\" is first in the contentNodes list.");
  64             break;
  65         case "contentAddedAtTheBottom":
  66             InspectorTest.assert(!event.data.before, "\"#contentAddedAtTheBottom\" was added last.");
  67             InspectorTest.assert(contentFlow.contentNodes.lastValue === event.data.node, "\"#contentAddedAtTheBottom\" is last in the contentNodes list.");
  68             break;
  69         default:
  70             InspectorTest.log("FAIL: Only two add events are expected.");
  71         }
  72
  73     }
  74
  75     function onContentNodeWasRemoved(event)
  76     {
  77         InspectorTest.assert(event.data.node.getAttribute("id") === "contentRemoved", "\"#contentRemoved\" was removed.");
  78         InspectorTest.assert(contentFlow.contentNodes.indexOf(event.data.node) === -1, "\"#contentRemoved\" cannot be found in the contentNodes list.");
  79         InspectorTest.completeTest();
  80     }
  81 }
  82 </script>
  83 </head>
  84 <body onload="runTest()">
  85     <p>Testing that the ContentFlows events are correctly dispatched when nodes are attached to/detached from a flow.</p>
  86
  87     <div id="contentAddedAtTheTop" class="content hidden"></div>
  88     <div id="contentStatic" class="content"></div>
  89     <div id="contentRemoved" class="content"></div>
  90     <div id="contentAddedAtTheBottom" class="content hidden"></div>
  91
  92 </body>
  93 </html>