src/third_party/WebKit/LayoutTests/fast/regions/cssom/webkit-named-flow-first-empty-region-index.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <script src="../../../resources/js-test.js"></script>
   6 <script src="../resources/helper.js"></script>
   7 <style>
   8     body { font-family: monospace }
   9     .content { -webkit-flow-into: flow }
  10     .region {  -webkit-flow-from: flow}
  11     #region, #region2, #region3 { width: 250px; height: 50px; }
  12 </style>
  13 </head>
  14 <body>
  15 <div id="article" class="content">
  16 <p>Content inside article</p>
  17 </div>
  18 <script>
  19     description("Test for 90608: [CSSRegions]Implement NamedFlow::firstEmptyRegionIndex attribute.");
  20
  21     if (window.testRunner)
  22         testRunner.dumpAsText();
  23
  24     // Named flow does not have any regions yet
  25     var namedFlow = getFlowByName("flow");
  26
  27     // FirstEmptyRegionIndex should be -1 for an empty named flow
  28     shouldBe("namedFlow.firstEmptyRegionIndex", "-1");
  29
  30     // Add a region to take the content, firstEmptyRegionIndex should still be -1.
  31     var region = document.createElement("div");
  32     document.body.appendChild(region);
  33     region.id = "region";
  34     region.className = "region";
  35
  36     // FirstEmptyRegions should be -1, since there are no empty regions
  37     shouldBe("namedFlow.firstEmptyRegionIndex", "-1");
  38
  39     // Add another region, firstEmptyRegionIndex should be 1 since content only flows within the first region.
  40     var region2 = document.createElement("div");
  41     document.body.appendChild(region2);
  42     region2.id = "region2";
  43     region2.className = "region";
  44
  45     // FirstEmptyRegionIndex should be 1
  46     shouldBe("namedFlow.firstEmptyRegionIndex", "1");
  47
  48     // Add content until some is flowed inside second region
  49     while (region2.webkitRegionOverset == "empty") {
  50         var p = document.createElement("p");
  51         p.appendChild(document.createTextNode("Content inside article"));
  52         document.getElementById("article").appendChild(p);
  53     }
  54     // Add the third region, firstEmptyRegionIndex should be 2.
  55     var region3 = document.createElement("div");
  56     document.body.appendChild(region3);
  57     region3.id = "region3";
  58     region3.className = "region";
  59
  60     // FirstEmptyRegionIndex should be 2 since the content fits in the first two regions.
  61     shouldBe("namedFlow.firstEmptyRegionIndex", "2");
  62
  63     // Remove the first region from the flow, firstEmptyRegionIndex should be -1.
  64     region.className = "";
  65
  66     // Overset should be true since the content does not fit the regions
  67     shouldBe("namedFlow.firstEmptyRegionIndex", "-1");
  68
  69     // Remove the content from the flow, firstEmptyRegionIndex should be 0.
  70     document.getElementById("article").className = "";
  71
  72     // FirstEmptyRegionIndex should be 0, since there is no more content.
  73     shouldBe("namedFlow.firstEmptyRegionIndex", "0");
  74
  75     // Remove all the regions from the flow
  76     region2.className = region3.className = "";
  77
  78     // FirstEmptyRegionIndex should be -1, since there are no more regions in the named flow.
  79     shouldBe("namedFlow.firstEmptyRegionIndex", "-1");
  80
  81     document.getElementById("article").style.display = "none";
  82     region.style.display = "none";
  83     region2.style.display = "none";
  84     region3.style.display = "none";
  85 </script>
  86 </body>
  87 </html>