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

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