third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style>
   6 .grid {
   7     /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
   8     width: 800px;
   9     height: 600px;
  10 }
  11 .gridItem {
  12     grid-column: 1;
  13     grid-row: 1;
  14     width: 7px;
  15     height: 11px;
  16 }
  17 .gridItem2 {
  18     grid-column: 1;
  19     grid-row: 1;
  20     width: 17px;
  21     height: 3px;
  22 }
  23 .gridWithNone {
  24     grid-template-columns: none;
  25     grid-template-rows: none;
  26 }
  27 .gridWithFixed {
  28     grid-template-columns: 10px;
  29     grid-template-rows: 15px;
  30 }
  31 .gridWithPercent {
  32     grid-template-columns: 50%;
  33     grid-template-rows: 25%;
  34 }
  35 .gridWithAuto {
  36     grid-template-columns: auto;
  37     grid-template-rows: auto;
  38 }
  39 .gridWithEM {
  40     grid-template-columns: 10em;
  41     grid-template-rows: 15em;
  42     font: 10px Ahem;
  43 }
  44 .gridWithViewPortPercentage {
  45     grid-template-columns: 8vw;
  46     grid-template-rows: 10vh;
  47 }
  48 .gridWithFitContent {
  49     grid-template-columns: -webkit-fit-content;
  50     grid-template-rows: -webkit-fit-content;
  51 }
  52 .gridWithFitAvailable {
  53     grid-template-columns: -webkit-fit-available;
  54     grid-template-rows: -webkit-fit-available;
  55 }
  56 .gridWithMinMax {
  57     grid-template-columns: minmax(10%, 15px);
  58     grid-template-rows: minmax(20px, 50%);
  59 }
  60 .gridWithMinContent {
  61     grid-template-columns: min-content;
  62     grid-template-rows: min-content;
  63 }
  64 .gridWithMaxContent {
  65     grid-template-columns: max-content;
  66     grid-template-rows: max-content;
  67 }
  68 .gridWithFraction {
  69     grid-template-columns: 1fr;
  70     grid-template-rows: 2fr;
  71 }
  72 .gridWithCalc {
  73     grid-template-columns: calc(150px);
  74     grid-template-rows: calc(75px);
  75 }
  76 .gridWithCalcComplex {
  77     grid-template-columns: calc(50% + 150px);
  78     grid-template-rows: calc(65% + 75px);
  79 }
  80 .gridWithCalcInsideMinMax {
  81     grid-template-columns: minmax(10%, calc(15px));
  82     grid-template-rows: minmax(calc(20px), 50%);
  83 }
  84 .gridWithCalcComplexInsideMinMax {
  85     grid-template-columns: minmax(10%, calc(50% + 15px));
  86     grid-template-rows: minmax(calc(20px + 10%), 50%);
  87 }
  88 .gridWithAutoInsideMinMax {
  89     grid-template-columns: minmax(auto, 20px);
  90     grid-template-rows: minmax(max-content, auto);
  91 }
  92 </style>
  93 <script src="../../resources/js-test.js"></script>
  94 </head>
  95 <body>
  96 <div class="grid gridWithNone" id="gridWithNoneElement"></div>
  97 <div class="grid gridWithFixed" id="gridWithFixedElement"></div>
  98 <div class="grid gridWithPercent" id="gridWithPercentElement"></div>
  99 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize"></div>
 100 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWithChildren">
 101     <div class="gridItem"></div>
 102 </div>
 103 <div class="grid gridWithAuto" id="gridWithAutoElement"></div>
 104 <div class="grid gridWithAuto" id="gridWithAutoWithoutSizeElement"></div>
 105 <div class="grid gridWithAuto fontSpec" id="gridWithAutoWithChildrenElement">
 106     <div class="gridItem"></div>
 107 </div>
 108 <div class="grid gridWithEM" id="gridWithEMElement"></div>
 109 <div class="grid gridWithViewPortPercentage" id="gridWithViewPortPercentageElement"></div>
 110 <div class="grid gridWithFitContent" id="gridWithFitContentElement"></div>
 111 <div class="grid gridWithFitAvailable" id="gridWithFitAvailableElement"></div>
 112 <div class="grid gridWithMinMax" id="gridWithMinMaxElement"></div>
 113 <div class="grid gridWithMinContent" id="gridWithMinContentElement"></div>
 114 <div class="grid gridWithMinContent" id="gridWithMinContentWithChildrenElement">
 115     <div class="gridItem"></div>
 116     <div class="gridItem2"></div>
 117 </div>
 118 <div class="grid gridWithMaxContent" id="gridWithMaxContentElement"></div>
 119 <div class="grid gridWithMaxContent" id="gridWithMaxContentWithChildrenElement">
 120     <div class="gridItem"></div>
 121     <div class="gridItem2"></div>
 122 </div>
 123 <div class="grid gridWithFraction" id="gridWithFractionElement"></div>
 124 <div class="grid gridWithCalc" id="gridWithCalcElement"></div>
 125 <div class="grid gridWithCalcComplex" id="gridWithCalcComplexElement"></div>
 126 <div class="grid gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMaxElement"></div>
 127 <div class="grid gridWithCalcComplexInsideMinMax" id="gridWithCalcComplexInsideMinMaxElement"></div>
 128 <div class="grid gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMaxElement">
 129     <div class="gridItem"></div>
 130 </div>
 131 <script src="resources/grid-definitions-parsing-utils.js"></script>
 132 <script src="resources/grid-columns-rows-get-set.js"></script>
 133 </body>
 134 </html>