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

   1 <!doctype html>
   2 <html>
   3     <head>
   4         <style>
   5             .region {
   6                 height: 180px;
   7                 width: 80px;
   8                 border: 2px solid black;
   9             }
  10
  11             .content {
  12                 height: 60px;
  13                 width: 40px;
  14             }
  15
  16             #red {
  17                 background-color: red;
  18             }
  19
  20             #green {
  21                 background-color: green;
  22                 display: inline-block;
  23             }
  24
  25             #yellow {
  26                 background-color: yellow;
  27                 display: inline-block;
  28             }
  29
  30             #blue {
  31                 background-color: blue;
  32             }
  33         </style>
  34     </head>
  35     <body onload="shuffle()">
  36         <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>
  37         <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>
  38         <p>On success, you should see the blocks ordered: red (top), green, yellow (middle), blue (bottom).</p>
  39
  40         <div class="region">
  41             <div id="red" class="content">1</div>
  42             <div id="green"class="content">2</div><div id="yellow"class="content">3</div>
  43             <div id="blue" class="content">4</div>
  44         </div>
  45     </body>
  46 </html>