third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-grow-tracks-to-their-max.html

   1 <!DOCTYPE html>
   2 <head>
   3 <link href="resources/grid.css" rel="stylesheet"/>
   4 <style>
   5 .grid {
   6     font: 10px/1 Ahem;
   7 }
   8
   9 .gridContentSizedColumn {
  10     grid-template-columns: minmax(min-content, 20px);
  11     grid-template-rows: 10px;
  12 }
  13
  14 .gridContentSizedColumnFreeSpace {
  15     grid-template-columns: minmax(min-content, 100px);
  16     grid-template-rows: 10px;
  17 }
  18
  19 .gridContentSizedRow {
  20     grid-template-columns: 40px;
  21     grid-template-rows: minmax(max-content, 10px);
  22 }
  23
  24 .gridContentSizedRowFreeSpace {
  25     grid-template-columns: 40px;
  26     grid-template-rows: minmax(max-content, 100px);
  27 }
  28
  29 .definiteWidth { width: 80px; }
  30 .definiteHeight { height: 80px; }
  31
  32 .indefiniteWidth { float: left; }
  33 .indefiniteHeight { height: auto; }
  34
  35 </style>
  36 <script src="resources/grid-definitions-parsing-utils.js"></script>
  37 <script src="../../resources/js-test.js"></script>
  38 </head>
  39 <body>
  40 <!-- Grids with base-size > growth-limit  -->
  41 <div class="grid gridContentSizedColumn indefiniteWidth" id="gridContentSizedColumn">
  42     <div class="firstRowFirstColumn">XXXXX</div>
  43 </div>
  44
  45 <div class="grid gridContentSizedRow indefiniteHeight" id="gridContentSizedRow">
  46     <div class="firstRowFirstColumn">XXXX XXXX</div>
  47 </div>
  48
  49 <!-- Grids with base-size < growth-limit and some size constraints.  -->
  50 <div class="grid gridContentSizedColumnFreeSpace definiteWidth" id="gridContentSizedColumnFreeSpace">
  51     <div class="firstRowFirstColumn">XX XX</div>
  52 </div>
  53
  54 <div class="grid gridContentSizedRowFreeSpace definiteHeight" id="gridContentSizedRowFreeSpace">
  55     <div class="firstRowFirstColumn">XXXX XXXX</div>
  56 </div>
  57
  58 <div class="definiteWidth">
  59     <div class="grid gridContentSizedColumnFreeSpace" id="gridContentSizedColumnFreeSpaceParentDefinite">
  60         <div class="firstRowFirstColumn">XX XX</div>
  61     </div>
  62 </div>
  63
  64 <div class="definiteHeight">
  65     <div class="grid gridContentSizedRowFreeSpace indefiniteHeight" id="gridContentSizedRowFreeSpaceParentDefinite">
  66         <div class="firstRowFirstColumn">XXXX XXXX</div>
  67     </div>
  68 </div>
  69
  70
  71 <script>
  72 debug("Check that tracks are not shrinked if the available space is indefinite.");
  73 testGridDefinitionsValues(document.getElementById("gridContentSizedColumn"), "50px", "10px");
  74 testGridDefinitionsValues(document.getElementById("gridContentSizedRow"), "40px", "20px");
  75
  76 debug("");
  77 debug("Check that tracks use the available free space if available.");
  78 testGridDefinitionsValues(document.getElementById("gridContentSizedColumnFreeSpace"), "80px", "10px");
  79 testGridDefinitionsValues(document.getElementById("gridContentSizedRowFreeSpace"), "40px", "80px");
  80 testGridDefinitionsValues(document.getElementById("gridContentSizedColumnFreeSpaceParentDefinite"), "80px", "10px");
  81 testGridDefinitionsValues(document.getElementById("gridContentSizedRowFreeSpaceParentDefinite"), "40px", "100px");
  82
  83 </script>
  84 </body>