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

   1 <!doctype html>
   2 <!--
   3     Tests the behavior of the intrinsic width keywords when applied to max-width
   4     by placing them inside a constrained container. This test passes if all
   5     blocks are constrained inside the container since all intrinsic widths
   6     should be too large to fit.
   7 -->
   8 <style>
   9     @import "resources/width-keyword-classes.css";
  10
  11     body * {
  12         border: 5px solid red;
  13         padding: 5px;
  14     }
  15
  16     span {
  17         display: inline-block;
  18         width: 200px;
  19         border-color: green;
  20     }
  21
  22     #container {
  23         width: 150px;
  24     }
  25 </style>
  26
  27 <div id="container">
  28
  29     <div class="max-width-min-content">
  30         <span>Min Content</span> on this box.
  31     </div>
  32
  33     <div class="max-width-max-content">
  34         <span>Max Content</span> on this box.
  35     </div>
  36
  37     <div class="max-width-fill-available">
  38         <span>Fill Available</span> on this box.
  39     </div>
  40
  41     <div class="max-width-fit-content">
  42         <span>Fit Content</span> on this box.
  43     </div>
  44
  45 </div>