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

   1 <!doctype html>
   2 <style>
   3     body * {
   4         border: 5px solid red;
   5         padding: 5px;
   6         clear: both;
   7     }
   8
   9     span {
  10         display: inline-block;
  11         width: 200px;
  12         border-color: green;
  13     }
  14
  15     .float {
  16         float: left;
  17     }
  18
  19     #container {
  20         width: 150px;
  21         border-color: blue;
  22     }
  23
  24     #container::after {
  25         content: ".";
  26         clear: both;
  27         height: 0;
  28         width: 0;
  29         display: block;
  30         visibility: hidden;
  31     }
  32
  33     /*
  34         fit-content and min-content in this test should both do float like
  35         shrink wrapping.
  36     */
  37     .fit-content,
  38     .min-content {
  39         float: left;
  40     }
  41
  42     /*
  43         max-content acts as though no line breaks were taken.
  44     */
  45     .max-content {
  46         white-space: nowrap;
  47         display: inline-block;
  48     }
  49
  50 </style>
  51
  52 <div id="container">
  53
  54     <div class="min-content">
  55         <span>Min Content</span> on this box.
  56     </div>
  57
  58     <div class="max-content">
  59         <span>Max Content</span> on this box.
  60     </div>
  61
  62     <div class="float">
  63         <span>Float</span> on this box.
  64     </div>
  65
  66     <div>
  67         <span>Fill Available</span> on this box.
  68     </div>
  69
  70     <div class="fit-content">
  71         <span>Fit Content</span> on this box.
  72     </div>
  73
  74 </div>