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