third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-percent-track-scrollbar.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style>
   6 .grid {
   7     width: 100px;
   8     height: 100px;
   9     grid-template-columns: 20% 50% 30%;
  10     grid-template-rows: 40% 60%;
  11 }
  12
  13 .scroll {
  14     width: 115px;
  15     height: 115px;
  16     overflow: scroll;
  17 }
  18
  19 </style>
  20 <script src="../../resources/check-layout.js"></script>
  21 </head>
  22 <body onload="checkLayout('.grid');">
  23     <p>This test checks that percentage tracks reduce the grid's scrollbars if any in order to calculate their breadths.</p>
  24
  25     <div class="grid">
  26         <div data-expected-width="20" data-expected-height="40"></div>
  27         <div data-expected-width="50" data-expected-height="40"></div>
  28         <div data-expected-width="30" data-expected-height="40"></div>
  29         <div data-expected-width="20" data-expected-height="60"></div>
  30         <div data-expected-width="50" data-expected-height="60"></div>
  31         <div data-expected-width="30" data-expected-height="60"></div>
  32     </div>
  33
  34     <div class="grid scroll">
  35         <div data-expected-width="20" data-expected-height="40"></div>
  36         <div data-expected-width="50" data-expected-height="40"></div>
  37         <div data-expected-width="30" data-expected-height="40"></div>
  38         <div data-expected-width="20" data-expected-height="60"></div>
  39         <div data-expected-width="50" data-expected-height="60"></div>
  40         <div data-expected-width="30" data-expected-height="60"></div>
  41     </div>
  42
  43 </body>
  44 </html>