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

   1 <!doctype html>
   2 <html>
   3 <head>
   4 <style>
   5     .size1 {
   6         width: 50px;
   7         height: 50px;
   8     }
   9     .size2 {
  10         width: 50px;
  11         height: 100px;
  12     }
  13
  14     #div1 {
  15         -webkit-flow-into: flowA;
  16         position: absolute;
  17         background-color: green;
  18     }
  19     #div2 {
  20         -webkit-flow-into: flowB;
  21         background-color: green;
  22     }
  23     #div3 {
  24         background-color: orange;
  25     }
  26     #div4 {
  27         background-color: blue;
  28         position: absolute;
  29         z-index: -1;
  30     }
  31
  32     #region1 {
  33         -webkit-flow-from: flowA;
  34         background-color: red;
  35     }
  36     #region2 {
  37         -webkit-flow-from: flowB;
  38         background-color: red;
  39     }
  40 </style>
  41 </head>
  42 <body>
  43 <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=64516"> [CSSRegions] Collect flowed elements in different render element</a>.</p>
  44 <p>Test that elements requiring a layer, collected in a flow thread, are correctly displayed in a region.</p>
  45 <p>On success, you should not see a red rectangle below.</p>
  46 <div id="div1" class="size1"></div>
  47
  48 <div id="div2">
  49     <div id="div3" class="size1"></div>
  50     <div id="div4" class="size1"></div>
  51 </div>
  52
  53 <div id="region1" class="size1"></div>
  54 <div id="region2" class="size2"></div>
  55 </body>
  56 </html>