third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-content-sized-columns-resize.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 1fr;
   8         }
   9
  10         #grid-2 {
  11             grid-template-columns: auto;
  12         }
  13     </style>
  14     <script>
  15         function runTest() {
  16             if (window.testRunner) {
  17                 testRunner.useUnfortunateSynchronousResizeMode();
  18                 window.resizeTo(600, 600);
  19             }
  20         }
  21     </script>
  22 </head>
  23 <body onLoad="runTest();">
  24     <h1>Description</h1>
  25     <p>Grid flex and content sized columns width should be updated properly when you resize the window (you should not see the grid background in grey color).</p>
  26     <h1>Grid 2 flex columns</h1>
  27     <div id="grid-1" class="grid">
  28         <div class="firstRowFirstColumn">first column</div>
  29         <div class="firstRowSecondColumn">second column</div>
  30     </div>
  31     <h1>Grid 1 auto column</h1>
  32     <div id="grid-2" class="grid">
  33         <div class="firstRowFirstColumn">
  34             one column one column one column one column one column one column one column one column
  35             one column one column one column one column one column one column one column one column
  36             one column one column one column one column one column one column one column one column
  37             one column one column one column one column one column one column one column one column
  38         </div>
  39     </div>
  40 </body>
  41 </html>