third_party/WebKit/LayoutTests/fast/css-grid-layout/auto-content-resolution-columns.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5 .gridAutoContent {
   6     grid-template-columns: auto;
   7     grid-template-rows: 50px;
   8 }
   9
  10 .firstRowFirstColumn {
  11     font: 10px/1 Ahem;
  12     /* Make us fit our grid area. */
  13     width: 100%;
  14     height: 100%;
  15 }
  16 </style>
  17 <script src="../../resources/check-layout.js"></script>
  18 <body onload="checkLayout('.gridAutoContent');">
  19
  20 <p>Test that resolving auto tracks on grid items works properly.</p>
  21
  22 <div class="constrainedContainer">
  23     <div class="grid gridAutoContent">
  24         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="50">XXX XXX XXX</div>
  25     </div>
  26 </div>
  27
  28 <!-- Allow the extra logical space distribution to occur. -->
  29 <div style="width: 40px; height: 10px">
  30     <div class="grid gridAutoContent">
  31         <div class="firstRowFirstColumn" data-expected-width="40" data-expected-height="50">XX XX XX XX XX XX</div>
  32     </div>
  33 </div>
  34
  35 <div style="width: 100px; height: 10px;">
  36     <div class="grid gridAutoContent">
  37         <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX</div>
  38     </div>
  39 </div>
  40
  41 </body>
  42 </html>