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

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