third_party/WebKit/LayoutTests/fast/css-intrinsic-dimensions/width-avoid-floats.html

   1 <!doctype html>
   2 <!--
   3     Tests intrinsic width keywords for float avoiding behavior. The way the
   4     spec is written only width: auto elements will allow a float to flow
   5     through them with overflow: auto, so all elements below should avoid the
   6     float by shifting to the right except fill-available which should be forced
   7     below the float since it can't become smaller than the available width.
   8
   9     Note: This is weird behavior, not sure it was intended by the spec.
  10 -->
  11 <style>
  12     @import "resources/width-keyword-classes.css";
  13
  14     body * {
  15         border: 5px solid red;
  16         padding: 5px;
  17     }
  18
  19     span {
  20         display: inline-block;
  21         width: 200px;
  22         border-color: green;
  23     }
  24
  25     .float {
  26         float: left;
  27         height: 300px;
  28     }
  29
  30     .auto,
  31     .max-content,
  32     .min-content,
  33     .fill-available,
  34     .fit-content {
  35         overflow: auto;
  36     }
  37 </style>
  38
  39 <body>
  40
  41     <div class="float">Float</div>
  42
  43     <div class="min-content">
  44         <span>Min Content</span> on this box.
  45     </div>
  46
  47     <div class="max-content">
  48         <span>Max Content</span> on this box.
  49     </div>
  50
  51     <div class="fit-content">
  52         <span>Fit Content</span> on this box.
  53     </div>
  54
  55     <div>
  56         <span>Auto</span> on this box.
  57     </div>
  58
  59     <div class="fill-available">
  60         <span>Fill Available</span> on this box.
  61     </div>
  62
  63 </body>