src/third_party/WebKit/LayoutTests/fast/regions/named-flow-content-order-1.html

   1 <!doctype html>
   2 <html>
   3     <head>
   4         <style>
   5             .region {
   6                 -webkit-flow-from: content-flow;
   7                 height: 60px;
   8                 width: 120px;
   9                 border: 2px solid black;
  10             }
  11
  12             .float {
  13                 float: left;
  14                 -webkit-flow-into: content-flow;
  15                 height: 60px;
  16                 width: 40px;
  17             }
  18
  19             #red {
  20                 background-color: red;
  21             }
  22
  23             #green {
  24                 background-color: green;
  25             }
  26
  27             #blue {
  28                 background-color: blue;
  29             }
  30         </style>
  31     </head>
  32     <body onload="shuffle()">
  33         <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=103501">Fix content node renderers ordering inside the named flow thread</a>.</p>
  34         <p>The test adds three colored content nodes (blocks) to a flow and then modifies the flow-into properties to force renderers to shuffle.</p>
  35         <p>On success, you should see the blocks ordered: red, green, blue.</p>
  36
  37         <div id="red" class="float">1</div>
  38         <div id="green"class="float">2</div>
  39         <div id="blue" class="float">3</div>
  40         <div class="region"></div>
  41
  42         <script>
  43         function readd(content) {
  44             content.style.webkitFlowInto = "none";
  45             document.body.offsetTop;
  46             content.style.webkitFlowInto = "content-flow";
  47             document.body.offsetTop;
  48         }
  49         function shuffle() {
  50             var greenElement = document.getElementById("green");
  51             readd(greenElement);
  52             var redElement = document.getElementById("red");
  53             readd(redElement);
  54         }
  55         </script>
  56     </body>
  57 </html>