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

   1 <!doctype html>
   2 <html>
   3     <head>
   4         <style>
   5             .content { -webkit-flow-into: content-flow; }
   6
   7             .region {
   8                 -webkit-flow-from: content-flow;
   9                 height: 300px;
  10                 width: 500px;
  11                 border: 1px solid black;
  12             }
  13
  14             p, div, body {
  15                 margin: 0px;
  16                 font-size: 20px;
  17             }
  18
  19             p {
  20                 display: inline;
  21             }
  22         </style>
  23     </head>
  24     <body>
  25         <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>
  26         <p>The test verifies the order of elements preserves when the text nodes have flow-into set because of style cloning.</p>
  27         <p>On success, you should see the first inline, the paragraph and the second inline.</p>
  28         <div class="content">
  29             First inline.
  30             <p id="para">A paragraph that can be block or inline.</p>
  31             Second inline.
  32         </div>
  33         <div class="region"></div>
  34
  35         <script>
  36             document.body.offsetTop;
  37             var para = document.getElementById("para");
  38             para.style.display = "block";
  39             document.body.offsetTop;
  40             para.style.display = "inline";
  41         </script>
  42     </body>
  43 </html>