src/third_party/WebKit/LayoutTests/fast/regions/fit-content-height-region.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4         <title>Region with fit-content height</title>
   5         <style type="text/css">
   6                 .content {
   7                         font-family: Ahem;
   8                         font-size: 20px;
   9                         line-height: 1em;
  10                         color: green;
  11                         background-color: green;
  12                         -webkit-flow-into: flow;
  13                 }
  14
  15                 #region {
  16                         height: -webkit-fit-content;
  17                         width: -webkit-fit-content;
  18                         -webkit-flow-from: flow;
  19                         overflow: hidden;
  20                         position: absolute;
  21                 }
  22
  23                 #red {
  24                         height: 20px;
  25                         width: 80px;
  26                         position: absolute;
  27                         background-color: red;
  28                 }
  29         </style>
  30 </head>
  31 <body>
  32         <ul>
  33                 <li>Test passes if you see a green horizontal stripe.</li>
  34                 <li>You shouldn't see any red.</li>
  35         </ul>
  36         <span class="content">XXXX</span>
  37         <div id="red"></div>
  38         <div id="region"></div>
  39 </body>
  40 </html>