src/third_party/WebKit/LayoutTests/fast/regions/cssom/webkit-named-flow-overset.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     .flow { -webkit-flow-into: flow }
  10     .region { -webkit-flow-from: flow; }
  11     #region { width: 250px; height: 50px; }
  12     #region2 { width: 250px; height: 50px; }
  13     #region3 { width: 250px; height: 50px; }
  14 </style>
  15 </head>
  16 <body>
  17 <div id="article" class="flow">
  18     <p>Content inside article</p>
  19 </div>
  20 <script>
  21     description("Test for https://bugs.webkit.org/show_bug.cgi?id=87491 [CSS Regions]Rename NamedFlow::overflow to NamedFlow::overset. \
  22                 For more details see http://www.w3.org/TR/2012/WD-css3-regions-20120503/");
  23
  24     if (window.testRunner)
  25         window.testRunner.dumpAsText();
  26
  27     // Flow article does not have any regions yet
  28     var namedFlow = getFlowByName("flow");
  29
  30     // Overset should be false for a flow without regions
  31     shouldBe("namedFlow.overset", "true");
  32
  33     // Add a region to take the content, overset should be false since the content first the regions.
  34     var region = document.createElement("div");
  35     document.body.appendChild(region);
  36     region.id = "region";
  37     region.className = "region";
  38
  39     // Overset should be false since the content fits the regions
  40     shouldBe("namedFlow.overset", "false");
  41
  42     // Add more content to the flow, overset should be true.
  43     var p = document.createElement("p");
  44     p.appendChild(document.createTextNode("Content inside article"));
  45     document.getElementById("article").appendChild(p);
  46
  47     // Overset should be true since the content does not fit the regions
  48     shouldBe("namedFlow.overset", "true");
  49
  50     // Add another region, overset should be false
  51     var region2 = document.createElement("div");
  52     document.body.appendChild(region2);
  53     region2.id = "region2";
  54     region2.className = "region";
  55
  56     // Overset should be false since the content fits in the regions
  57     shouldBe("namedFlow.overset", "false");
  58
  59     // Add visual overset, overset should be true.
  60     document.getElementById("article").style.webkitBoxShadow="0px 50px lime";
  61
  62     // Overset should be true since the content does not fit in regions
  63     shouldBe("namedFlow.overset", "true");
  64
  65     // Add the third region, overset should be false.
  66     var region3 = document.createElement("div");
  67     document.body.appendChild(region3);
  68     region3.id = "region3";
  69     region3.className = "region";
  70
  71     // Overset should be false since the content fits in regions
  72     shouldBe("namedFlow.overset", "false");
  73
  74     // Remove the first region from the flow, overset should be true.
  75     region.className = "";
  76
  77     // Overset should be true since the content does not fit the regions
  78     shouldBe("namedFlow.overset", "true");
  79
  80     // Remove the content from the flow, overset should be false.
  81     document.getElementById("article").className = "";
  82
  83     // Overset should be false since the flow does not have any content
  84     shouldBe("namedFlow.overset", "false");
  85
  86     // Remove all the regions from the flow
  87     region2.className = region3.className = "";
  88
  89     // Overset should be true since the flow does not have any region chain
  90     shouldBe("namedFlow.overset", "true");
  91
  92     document.getElementById("article").style.display = "none";
  93     region.style.display = "none";
  94     region2.style.display = "none";
  95     region3.style.display = "none";
  96 </script>
  97 </body>
  98 </html>