third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-stacked-002.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-inner {
  12     width: 100px;
  13     height: 100px;
  14     float: left;
  15     background-color: green;
  16     shape-outside: inset(0 50% 0 0);
  17 }
  18 .float-left-outer {
  19     margin-right: 50px;
  20     width: 50px;
  21     height: 100px;
  22     float: left;
  23     background-color: green;
  24     shape-outside: inset(0 50% 0 0);
  25 }
  26 .float-right-inner {
  27     width: 100px;
  28     height: 100px;
  29     float: right;
  30     background-color: green;
  31     shape-outside: inset(0 0 0 50%);
  32 }
  33 .float-right-outer {
  34     margin-left: 50px;
  35     width: 50px;
  36     height: 100px;
  37     float: right;
  38     background-color: green;
  39     shape-outside: inset(0 0 0 50%);
  40 }
  41 </style>
  42 <script src="../../../resources/ahem.js"></script>
  43 <body>
  44     <p>Shapes should not affact float stacking, but should affect inline content.</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         X<br/>
  50         X
  51     </div>
  52     <div class="container" style="text-align: right">
  53         <div class="float-right-inner"></div>
  54         <div class="float-right-outer"></div>
  55         X<br/>
  56         X
  57     </div>
  58 </body>