src/third_party/WebKit/LayoutTests/fast/regions/webkit-flow-renderer.html

   1 <!DOCTYPE HTML>
   2
   3 <style>
   4 #DIV1 { -webkit-flow-into:flowA; }
   5 #SPAN2 { -webkit-flow-into: flowB; }
   6 #DIV3 { -webkit-flow-into: flowC; }
   7
   8 #REGION1, #REGION2, #REGION3 {
   9     width: 100%;
  10     height: 100px;
  11 }
  12 #REGION1 { -webkit-flow-from: flowA; }
  13 #REGION2 { -webkit-flow-from: flowB; }
  14 #REGION3 { -webkit-flow-from: flowC; }
  15 </style>
  16
  17 <div id="DIV1">DIV1 - flowA</div>
  18 <span id="SPAN2">SPAN2 - flowB</span>
  19 <div id="DIV3">DIV3 - flowC</div>
  20
  21 <!-- Make some regions, so that the flow has a size and it's visible in the render tree. -->
  22 <div id="REGION1"></div>
  23 <div id="REGION2"></div>
  24 <div id="REGION3"></div>
  25
  26 <script>
  27 function test(name, flow, before) {
  28     var el = document.createElement("div");
  29     el.id = name;
  30     el.setAttribute("style", "-webkit-flow-into:"+ flow);
  31     el.innerHTML = name + " - " + flow;
  32     if (before)
  33         document.body.insertBefore(el, document.getElementById(before));
  34     else
  35         document.body.appendChild(el);
  36 }
  37
  38 // Insert a new element in flowA, before DIV1 (same flow-thread).
  39 test("DIV4", "flowA", "DIV1");
  40
  41 // Insert a new element in flowB, before DIV1 (different flow-thread).
  42 test("DIV5", "flowB", "DIV1");
  43
  44 // Insert a new element in flowB, before DIV3 (different flow-thread).
  45 test("DIV6", "flowB", "DIV3");
  46
  47 // Insert a new element in flowB, before SPAN2 (same flow-thread, span inside anonymous block).
  48 test("DIV7", "flowB", "SPAN2");
  49
  50 // Append a new element in flowC.
  51 test("DIV8", "flowC");
  52 </script>