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

   1 <!doctype html>
   2 <!--
   3     Tests the intrinsic width keywords defined in the writing mode spec by
   4     setting up a bunch of boxes with content and a wrapper that has a small
   5     fixed width.
   6
   7     Visually there should be a min-content, fit-content, and float box that are
   8     identical widths, a fill-available box that's constrained by the #container,
   9     and a max-content box that has text all on one line. All boxes except
  10     fill-available should overflow the #container.
  11 -->
  12 <style>
  13     @import "resources/width-keyword-classes.css";
  14
  15     body * {
  16         border: 5px solid red;
  17         padding: 5px;
  18         clear: both;
  19     }
  20
  21     span {
  22         display: inline-block;
  23         width: 200px;
  24         border-color: green;
  25     }
  26
  27     .float {
  28         float: left;
  29     }
  30
  31     #container {
  32         width: 150px;
  33         border-color: blue;
  34     }
  35
  36     #container::after {
  37         content: ".";
  38         clear: both;
  39         height: 0;
  40         width: 0;
  41         display: block;
  42         visibility: hidden;
  43     }
  44 </style>
  45
  46 <div id="container">
  47
  48     <div class="min-content">
  49         <span>Min Content</span> on this box.
  50     </div>
  51
  52     <div class="max-content">
  53         <span>Max Content</span> on this box.
  54     </div>
  55
  56     <div class="float">
  57         <span>Float</span> on this box.
  58     </div>
  59
  60     <div class="fill-available">
  61         <span>Fill Available</span> on this box.
  62     </div>
  63
  64     <div class="fit-content">
  65         <span>Fit Content</span> on this box.
  66     </div>
  67
  68 </div>