src/third_party/WebKit/LayoutTests/fast/regions/cssom/webkit-named-flow-get-content.html

   1 <!doctype html>
   2 <html>
   3     <head>
   4         <script src="../../../resources/js-test.js"></script>
   5         <script src="../resources/helper.js"></script>
   6         <style>
   7             #region { -webkit-flow-from: flow; width: 250px; height: 150px; }
   8         </style>
   9     </head>
  10     <body>
  11         <!--
  12         1. The content nodes collection for a named flow 'flow' contains only those elements that have
  13         the style property -webkit-flow-into set to 'flow'.
  14         2. If an element has an ancestor with -webkit-flow-into = 'flow' but does not have its '-webkit-flow-into'
  15         set to 'flow' will not be listed among the content nodes for named flow 'flow'.
  16         3. Elements with '-webkit-flow-into' set to 'flow' and 'display:none' should be listed among the content nodes
  17         for named flow object 'flow'.
  18         4. The collection of nodes is returned in document order.
  19         -->
  20         <script>
  21             if (window.testRunner)
  22                 window.testRunner.dumpAsText();
  23             description("Test for 90163: [CSSRegions]Rename NamedFlow::contentNodes to NamedFlow::getContent()");
  24
  25             // Add an element that would be collected by the named flow but do not add it to the DOM, the contentNodes should be empty.
  26             var article = document.createElement("div");
  27             article.id = "article";
  28             article.style.webkitFlowInto = "flow";
  29
  30             shouldBeNull('getFlowByName("flow")');
  31
  32             // Append the above element to the DOM. It will be collected by the flow, therefore the contentNodes should have 1 element.
  33             document.body.appendChild(article);
  34             var namedFlowContent3 = getFlowByName("flow").getContent();
  35             shouldEvaluateTo("namedFlowContent3.length", 1);
  36             shouldBeEqualToString("namedFlowContent3.item(0).id", "article");
  37
  38             // Append a child element to the article above but do not set its style to flow into 'flow'.
  39             // The contentNodes should still have 1 element.
  40             var pNode = document.createElement("p");
  41             pNode.id = "p1";
  42             document.getElementById("article").appendChild(pNode);
  43             var namedFlowContent4 = getFlowByName("flow").getContent();
  44             shouldEvaluateTo("namedFlowContent4.length", 1);
  45             shouldBeEqualToString("namedFlowContent4.item(0).id", "article");
  46
  47             // Add another element directly to the flow and set its 'display' property to 'none', it should be part of the flow.
  48             var article2 = document.createElement("div");
  49             article2.id = "article2";
  50             article2.style.webkitFlowInto = "flow";
  51             article2.style.display = "none";
  52             document.body.insertBefore(article2, article);
  53
  54             var namedFlowContent5 = getFlowByName("flow").getContent();
  55             shouldEvaluateTo("namedFlowContent5.length", 2);
  56             shouldBeEqualToString("namedFlowContent5.item(0).id", "article2");
  57             shouldBeEqualToString("namedFlowContent5.item(1).id", "article");
  58
  59             // Adding a region element to flow content into should not influence the content nodes collection.
  60             var regionNode = document.createElement("div");
  61             regionNode.id = "region";
  62             document.body.appendChild(regionNode);
  63             var namedFlowContent6 = getFlowByName("flow").getContent();
  64             shouldEvaluateTo("namedFlowContent6.length", 2);
  65
  66             // Change display:none for the 'article2' element, the list of contentNodes should stay the same
  67             document.getElementById("article2").style.display = "block";
  68             var namedFlowContent7 = getFlowByName("flow").getContent();
  69             shouldEvaluateTo("namedFlowContent7.length", 2);
  70
  71             // Add a p and a span under p. Make the span directly collected by the flow. The contentNodes collection should have 3 elements.
  72             pNode = document.createElement("p");
  73             pNode.id = "p2";
  74             var spanNode = document.createElement("span");
  75             spanNode.id = "span1";
  76             spanNode.style.webkitFlowInto = "flow";
  77             pNode.appendChild(spanNode);
  78             document.getElementById("article2").appendChild(pNode);
  79
  80             var namedFlowContent8 = getFlowByName("flow").getContent();
  81             shouldEvaluateTo("namedFlowContent8.length", 3);
  82
  83             // Change display of article node to none, the collection should still have 3 elements.
  84             document.getElementById("article").style.display = "none";
  85             var namedFlowContent9 = getFlowByName("flow").getContent();
  86             shouldEvaluateTo("namedFlowContent9.length", 3);
  87             shouldBeEqualToString("namedFlowContent9.item(0).id", "article2");
  88             shouldBeEqualToString("namedFlowContent9.item(1).id", "span1");
  89             shouldBeEqualToString("namedFlowContent9.item(2).id", "article");
  90
  91             // Take 'article' node from last position and insert it before 'article2'
  92             article = document.getElementById("article");
  93             document.body.insertBefore(document.body.removeChild(article), article2);
  94             var namedFlowContent10 = getFlowByName("flow").getContent();
  95             shouldEvaluateTo("namedFlowContent10.length", 3);
  96             shouldBeEqualToString("namedFlowContent10.item(0).id", "article");
  97
  98             // Clone 'article2' including its children.
  99             var article2Clone = document.getElementById("article2").cloneNode(true);
 100             document.body.appendChild(article2Clone);
 101             var namedFlowContent11 = getFlowByName("flow").getContent();
 102             shouldEvaluateTo("namedFlowContent11.length", 5);
 103             // Remove article2 nodes from document, they should be removed from flow.
 104             document.body.removeChild(article2);
 105             document.body.removeChild(article2Clone);
 106             var namedFlowContent12 = getFlowByName("flow").getContent();
 107             shouldEvaluateTo("namedFlowContent12.length", 1);
 108             shouldBeEqualToString("namedFlowContent12.item(0).id", "article");
 109
 110             // Move the content node 'article' from named flow 'flow' to named flow 'flow2'
 111             document.getElementById("article").style.webkitFlowInto = "flow2";
 112             var flow2 = getFlowByName("flow2");
 113             var namedFlowContent11 = getFlowByName("flow").getContent();
 114             var namedFlowContent12 = getFlowByName("flow2").getContent();
 115             shouldEvaluateTo("namedFlowContent11.length", "0");
 116             shouldEvaluateTo("namedFlowContent12.length", "1");
 117             shouldBeEqualToString("namedFlowContent12.item(0).id", "article");
 118
 119             // Remove the content node from dom, content nodes for both 'flow' and 'flow2' should be empty
 120             document.body.removeChild(document.getElementById("article"));
 121             shouldBeNull('getFlowByName("flow2")');
 122
 123             var namedFlowContent13 = getFlowByName("flow").getContent();
 124             shouldEvaluateTo("namedFlowContent13.length", "0");
 125
 126             var namedFlowContent14 = flow2.getContent();
 127             shouldEvaluateTo("namedFlowContent14.length", "0");
 128             document.body.appendChild(article);
 129             var namedFlowContent15 = flow2.getContent();
 130             shouldEvaluateTo("namedFlowContent15.length", "1");
 131
 132             document.getElementById("region").style.visibility = "hidden";
 133         </script>
 134     </body>
 135 </html>