src/third_party/WebKit/LayoutTests/fast/regions/layers/float-region-promoted-to-layer.html

   1 <!doctype html>
   2 <html>
   3     <head>
   4         <link rel="stylesheet" href="../resources/region-style.css">
   5         <style>
   6             .redBox
   7             {
   8                 position: relative;
   9             }
  10             .dummyFloat /* This float pushes away the floats in the region. So we make sure that the floats flowed in
  11             the regions are positioned correctly. */
  12             {
  13                 float: left;
  14                 width: 1px;
  15                 height: 10px;
  16             }
  17             .box1
  18             {
  19                 width: 50px;
  20                 height: 10px;
  21             }
  22             .box2
  23             {
  24                 border-left: gray 50px solid; /* The border will be painted on top of the first region */
  25                 position: relative; /* Making box2 have its own layer so if, by mistake, it gets to render the redBox
  26                 instead of box1, the redBox will be visible */
  27                 width: 200px;
  28                 height: 60px;
  29             }
  30             .borderBox
  31             {
  32                 border: none;
  33             }
  34         </style>
  35     </head>
  36     <body>
  37         <div class="flowArticle">
  38             <div class="redBox"></div>
  39             <div class="orangeBox"></div>
  40         </div>
  41
  42         <div class="box1">
  43             <div class="dummyFloat"></div>
  44             <!-- The following element will get its own layer. -->
  45             <div class="regionArticle borderBox"></div>
  46         </div>
  47
  48         <div class="box2">
  49             <div class="regionArticle borderBox"></div>
  50         </div>
  51
  52         <p>Testing that regions become layers as required by the content that display in those regions.
  53         In this case the region is also a float and we are testing that the correct enclosing
  54         layer will paint the region as needed. In this case box1 is responsible of painting
  55         the first region, even though the whole element fits inside box2.
  56         There should be two boxes: one taller gray box and one orange box. The orange box has a black border.
  57         The test fails if there's any red on screen.
  58         </p>
  59     </body>
  60 </html>