third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-stacked-001.html

   1 <!DOCTYPE html>
   2 <style>
   3 .container {
   4     width: 200px;
   5     height: 100px;
   6     font: 50px/1 Ahem, sans-serif;
   7     background-color: red;
   8     margin-bottom: 50px;
   9     color: green;
  10 }
  11 .float-left-outer {
  12     width: 100px;
  13     height: 100px;
  14     float: left;
  15     background-color: green;
  16     shape-outside: inset(50% 0 0 0);
  17 }
  18 .float-left-inner {
  19     margin-top: 50px;
  20     width: 100px;
  21     height: 50px;
  22     float: left;
  23     background-color: green;
  24     shape-outside: inset(0 100% 0 0);
  25 }
  26 .float-right-outer {
  27     width: 100px;
  28     height: 100px;
  29     float: right;
  30     background-color: green;
  31     shape-outside: inset(50% 0 0 0);
  32 }
  33 .float-right-inner {
  34     margin-top: 50px;
  35     width: 100px;
  36     height: 50px;
  37     float: right;
  38     background-color: green;
  39     shape-outside: inset(0 0 0 100%);
  40 }
  41 </style>
  42 <script src="../../../resources/ahem.js"></script>
  43 <body>
  44     <p>If a shape on a stacked float does not affect the line, then the line should be affected by the shape on the previous stacked float.</p>
  45     <p>You should see two green rectanges. There should be no red.</p>
  46     <div class="container">
  47         <div class="float-left-inner"></div>
  48         <div class="float-left-outer"></div>
  49         XXXX
  50     </div>
  51     <div class="container" style="text-align: right">
  52         <div class="float-right-inner"></div>
  53         <div class="float-right-outer"></div>
  54         XXXX
  55     </div>
  56 </body>