src/third_party/WebKit/LayoutTests/fast/regions/cssom/get-regions-by-content-horiz-tb.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             body { font-family: monospace; }
   8             #article { -webkit-flow-into: flow; }
   9             #region { -webkit-flow-from: flow; width: 250px; height: 50px; }
  10             #region2 { -webkit-flow-from: flow; width: 250px; height: 50px; }
  11             #region3 { -webkit-flow-from: flow; width: 250px; height: 50px; }
  12
  13             #article2 { -webkit-flow-into: flow2; }
  14             #region4 { -webkit-flow-from: flow2; width: 250px; height: 50px; }
  15             #region5 { -webkit-flow-from: flow2; width: 250px; height: 50px; }
  16
  17             .noRegion { -webkit-flow-from: none; }
  18         </style>
  19     </head>
  20     <body>
  21         <!-- some tests with inline elements -->
  22         <div id="article">
  23             <span id="spanNode">Text inside span.</span>
  24             Text outside span. Text outside span. Text outside span.
  25             <span id="spanNode2">Text inside span2.</span>
  26             <span id="spanNode3">Text inside span3</span>
  27         </div>
  28         <div id="region"></div>
  29         <div id="region2"></div>
  30
  31         <!-- some tests with block elements -->
  32         <div id="article2">
  33             <p id="p1">Text inside paragraph p1.</p>
  34         </div>
  35         <div id="region4"></region>
  36
  37         <script>
  38             if (window.testRunner)
  39                 window.testRunner.dumpAsText();
  40
  41             description("Test for 90759: [CSSRegions] Rename NamedFlow::getRegionsByContentNode to NamedFlow::getRegionsByContent");
  42
  43             function hideRegions()
  44             {
  45                 document.getElementById("article").style.visibility = "hidden";
  46                 document.getElementById("article2").style.visibility = "hidden";
  47                 document.getElementById("region").style.visibility = "hidden";
  48                 document.getElementById("region2").style.visibility = "hidden";
  49                 document.getElementById("region3").style.visibility = "hidden";
  50                 document.getElementById("region4").style.visibility = "hidden";
  51                 document.getElementById("region5").style.visibility = "hidden";
  52             }
  53
  54             var namedFlow = getFlowByName("flow");
  55
  56             var regionListArticle = namedFlow.getRegionsByContent(document.getElementById("article"));
  57             shouldBeNonNull("regionListArticle ");
  58             shouldEvaluateTo("regionListArticle.length", 2);
  59             shouldBeEqualToString("regionListArticle.item(0).id", "region");
  60             shouldBeEqualToString("regionListArticle.item(1).id", "region2");
  61
  62             var spanNode = document.getElementById("spanNode");
  63             var regionListSpan = namedFlow.getRegionsByContent(spanNode);
  64             shouldBeNonNull("regionListSpan");
  65             shouldEvaluateTo("regionListSpan.length", 1);
  66             shouldBeEqualToString("regionListSpan.item(0).id", "region");
  67
  68             var spanNode2 = document.getElementById("spanNode2");
  69             var regionListSpan2 = namedFlow.getRegionsByContent(spanNode2);
  70             shouldBeNonNull("regionListSpan2");
  71             shouldEvaluateTo("regionListSpan2.length", 2);
  72
  73             var spanNode3 = document.getElementById("spanNode3");
  74             var regionListSpan3 = namedFlow.getRegionsByContent(spanNode3);
  75             shouldBeNonNull("regionListSpan3");
  76             shouldEvaluateTo("regionListSpan3.length", 1);
  77             shouldBeEqualToString("regionListSpan3.item(0).id", "region2");
  78
  79             var textNode = document.createTextNode("Text node. Text node. Text node. Text node. Text node. Text node. Text node. ");
  80             document.getElementById("article").appendChild(textNode);
  81             var regionListTextNode = namedFlow.getRegionsByContent(textNode);
  82             shouldBeNonNull("regionListTextNode");
  83             shouldEvaluateTo("regionListTextNode.length", 1);
  84             shouldBeEqualToString("regionListTextNode.item(0).id", "region2");
  85
  86             // Add another text node that will overflow the region2.
  87             var textNode2 = document.createTextNode("Text node2.");
  88             document.getElementById("article").appendChild(textNode2);
  89             var regionListTextNode2 = namedFlow.getRegionsByContent(textNode2);
  90             shouldBeNonNull("regionListTextNode2");
  91             shouldEvaluateTo("regionListTextNode2.length", 1);
  92             shouldBeEqualToString("regionListTextNode2.item(0).id", "region2");
  93
  94             // Add another text node that is in the overflow of the last region.
  95             var textNode3 = document.createTextNode("Text node3.");
  96             document.getElementById("article").appendChild(textNode3);
  97             var regionListTextNode3 = namedFlow.getRegionsByContent(textNode3);
  98             shouldBeNonNull("regionListTextNode3");
  99             shouldEvaluateTo("regionListTextNode3.length", 1);
 100             shouldBeEqualToString("regionListTextNode3.item(0).id", "region2");
 101
 102             // Add another region to take the overflowing elements from second region.
 103             var region3 = document.createElement("div");
 104             region3.id = "region3";
 105             document.body.appendChild(region3);
 106
 107             var regionListTextNode2 = namedFlow.getRegionsByContent(textNode);
 108             shouldEvaluateTo("regionListTextNode2.length", 2);
 109             shouldBeEqualToString("regionListTextNode2.item(0).id", "region2");
 110             shouldBeEqualToString("regionListTextNode2.item(1).id", "region3");
 111
 112             var regionListTextNode32 = namedFlow.getRegionsByContent(textNode3);
 113             shouldEvaluateTo("regionListTextNode32.length", 1);
 114             shouldBeEqualToString("regionListTextNode32.item(0).id", "region3");
 115
 116             var namedFlow2 = getFlowByName("flow2");
 117             var regionListP1 = namedFlow2.getRegionsByContent(document.getElementById("p1"));
 118             shouldBeNonNull("regionListP1");
 119             shouldEvaluateTo("regionListP1.length", 1);
 120             shouldBeEqualToString("regionListP1.item(0).id", "region4");
 121
 122             var p2 = document.createElement("p");
 123             p2.id = "p2";
 124             p2.appendChild(document.createTextNode("Text inside paragraph p2."));
 125             document.getElementById("article2").appendChild(p2);
 126             var regionListP2 = namedFlow2.getRegionsByContent(p2);
 127             shouldBeNonNull("regionListP2");
 128             shouldEvaluateTo("regionListP2.length", 1);
 129             shouldBeEqualToString("regionListP2.item(0).id", "region4");
 130
 131             // add another element p, in the overflow part of the region4
 132             var p3 = document.createElement("p");
 133             p3.id = "p3";
 134             p3.appendChild(document.createTextNode("Text inside paragraph p3."));
 135             document.getElementById("article2").appendChild(p3);
 136             var regionListP3 = namedFlow2.getRegionsByContent(p3);
 137             shouldBeNonNull("regionListP3");
 138             shouldEvaluateTo("regionListP3.length", 1);
 139             shouldBeEqualToString("regionListP3.item(0).id", "region4");
 140
 141             // add another region to flow2, p2 and p3 go to region5
 142             var region5 = document.createElement("div");
 143             region5.id = "region5";
 144             document.body.appendChild(region5);
 145
 146             var regionListP22 = namedFlow2.getRegionsByContent(p2);
 147             shouldEvaluateTo("regionListP22.length", 1);
 148             shouldBeEqualToString("regionListP22.item(0).id", "region5");
 149
 150             hideRegions();
 151         </script>
 152     </body>
 153 </html>
 154