third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-content-sized-column-use-available-width.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <link href="resources/grid.css" rel="stylesheet">
   5     <style type="text/css">
   6         #grid-1 {
   7             grid-template-columns: 1fr;
   8         }
   9
  10         #grid-2 {
  11             grid-template-columns: auto;
  12         }
  13     </style>
  14 </head>
  15 <body>
  16     <h1>Description</h1>
  17     <p>Flex and content sized column should use all the available width and you should not see the grid background (grey at the end).</p>
  18     <h1>Grid 1 flex column</h1>
  19     <div id="grid-1" class="grid">
  20         <div class="firstRowFirstColumn">grid item</div>
  21     </div>
  22     <h1>Grid 1 auto column</h1>
  23     <div id="grid-2" class="grid">
  24         <div class="firstRowFirstColumn">
  25             grid item grid item grid item grid item grid item grid item grid item grid item grid item grid item
  26             grid item grid item grid item grid item grid item grid item grid item grid item grid item grid item
  27             grid item grid item grid item grid item grid item grid item grid item grid item grid item grid item
  28             grid item grid item grid item grid item grid item grid item grid item grid item grid item grid item
  29         </div>
  30     </div>
  31 </body>
  32 </html>