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

   1 <!doctype html>
   2 <html>
   3     <head>
   4         <style>
   5             .region {
   6                 -webkit-flow-from: content-flow;
   7                 height: 180px;
   8                 width: 80px;
   9                 border: 2px solid black;
  10             }
  11
  12             .content {
  13                 -webkit-flow-into: content-flow;
  14                 height: 60px;
  15                 width: 40px;
  16             }
  17
  18             #red {
  19                 background-color: red;
  20             }
  21
  22             #green {
  23                 background-color: green;
  24                 display: inline-block;
  25             }
  26
  27             #yellow {
  28                 background-color: yellow;
  29                 display: inline-block;
  30             }
  31
  32             #blue {
  33                 background-color: blue;
  34             }
  35         </style>
  36     </head>
  37     <body onload="shuffle()">
  38         <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>
  39         <p>The test adds four colored content nodes (mix of inline and block) to a flow and then modifies the flow-into properties to force renderers to shuffle.</p>
  40         <p>On success, you should see the blocks ordered: red (top), green, yellow (middle), blue (bottom).</p>
  41
  42         <div id="red" class="content">1</div>
  43         <div id="green"class="content">2</div>
  44         <div id="yellow"class="content">3</div>
  45         <div id="blue" class="content">4</div>
  46         <div class="region"></div>
  47         <script>
  48         function readd(content) {
  49             content.style.webkitFlowInto = "none";
  50             document.body.offsetTop;
  51             content.style.webkitFlowInto = "content-flow";
  52             document.body.offsetTop;
  53         }
  54         function shuffle() {
  55             var greenElement = document.getElementById("green");
  56             var redElement = document.getElementById("red");
  57             var yellowElement = document.getElementById("yellow");
  58             var blueElement = document.getElementById("blue");
  59             readd(greenElement);
  60             readd(redElement);
  61             readd(blueElement);
  62             readd(yellowElement);
  63         }
  64         </script>
  65     </body>
  66 </html>