src/third_party/WebKit/LayoutTests/fast/regions/cssom/webkit-named-flow-name.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     .flow { -webkit-flow-into: flow-name; }
   9     .region { -webkit-flow-from: flow-name; }
  10     #region { width: 250px; height: 50px; }
  11 </style>
  12 </head>
  13 <body>
  14     <p id="article" class="flow">The content flow</p>
  15 <script>
  16
  17 description("This tests the implementation of the 'name' attribute on the NamedFlow object attached to a flow thread. \
  18             For more details see http://www.w3.org/TR/2012/WD-css3-regions-20120503/#dom-named-flow");
  19
  20 if (window.testRunner)
  21     testRunner.dumpAsText();
  22
  23 // Flow article does not have any regions yet
  24 var namedFlow = getFlowByName("flow-name");
  25
  26 // The name should be 'flow-name' when there are no regions to flow into
  27 shouldBe("namedFlow.name", "'flow-name'");
  28
  29 // Add a region to take the content, the name should be the same
  30 var region = document.createElement("div");
  31 document.body.appendChild(region);
  32 region.id = "region";
  33 region.className = "region";
  34
  35 // The name should be 'flow-name' when there are regions to flow into
  36 shouldBe("namedFlow.name", "'flow-name'");
  37
  38 var article = document.getElementById("article");
  39
  40 // Remove the flow and the region element, move the NamedFlow object in the NULL state
  41 region.className = "";
  42 article.className = "";
  43 region.style.display = "none";
  44 article.style.display = "none";
  45
  46 // The name should be 'flow-name' when the named flow is in the NULL state
  47 shouldBe("namedFlow.name", "'flow-name'");
  48 </script>
  49 </body>
  50 </html>