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

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style>
   6 .gridWithNone {
   7     grid-template-columns: none;
   8     grid-template-rows: none;
   9 }
  10 .gridWithFixed {
  11     grid-template-columns: 10px;
  12     grid-template-rows: 15px;
  13 }
  14 .gridWithPercent {
  15     grid-template-columns: 53%;
  16     grid-template-rows: 27%;
  17 }
  18 .gridWithAuto {
  19     grid-template-columns: auto;
  20     grid-template-rows: auto;
  21 }
  22 .gridWithEM {
  23     grid-template-columns: 10em;
  24     grid-template-rows: 15em;
  25     font: 10px Ahem;
  26 }
  27 .gridWithViewPortPercentage {
  28     grid-template-columns: 8vw;
  29     grid-template-rows: 10vh;
  30 }
  31 .gridWithFitContent {
  32     grid-template-columns: -webkit-fit-content;
  33     grid-template-rows: -webkit-fit-content;
  34 }
  35 .gridWithFitAvailable {
  36     grid-template-columns: -webkit-fit-available;
  37     grid-template-rows: -webkit-fit-available;
  38 }
  39 .gridWithMinMax {
  40     grid-template-columns: minmax(10%, 15px);
  41     grid-template-rows: minmax(20px, 50%);
  42 }
  43 .gridWithMinContent {
  44     grid-template-columns: min-content;
  45     grid-template-rows: min-content;
  46 }
  47 .gridWithMaxContent {
  48     grid-template-columns: max-content;
  49     grid-template-rows: max-content;
  50 }
  51 .gridWithFraction {
  52     grid-template-columns: 1fr;
  53     grid-template-rows: 2fr;
  54 }
  55 .gridWithCalc {
  56     grid-template-columns: calc(150px);
  57     grid-template-rows: calc(75px);
  58 }
  59 .gridWithCalcComplex {
  60     grid-template-columns: calc(50% + 150px);
  61     grid-template-rows: calc(65% + 75px);
  62 }
  63 .gridWithCalcInsideMinMax {
  64     grid-template-columns: minmax(10%, calc(15px));
  65     grid-template-rows: minmax(calc(20px), 50%);
  66 }
  67 .gridWithCalcComplexInsideMinMax {
  68     grid-template-columns: minmax(10%, calc(50% + 15px));
  69     grid-template-rows: minmax(calc(20px + 10%), 50%);
  70 }
  71 .gridWithAutoInsideMinMax {
  72     grid-template-columns: minmax(auto, 20px);
  73     grid-template-rows: minmax(min-content, auto);
  74 }
  75 </style>
  76 <script src="../../resources/js-test.js"></script>
  77 </head>
  78 <body>
  79 <div class="gridWithNone" id="gridWithNoneElement"></div>
  80 <div class="gridWithFixed" id="gridWithFixedElement"></div>
  81 <div class="gridWithPercent" id="gridWithPercentElement"></div>
  82 <div class="gridWithAuto" id="gridWithAutoElement"></div>
  83 <div class="gridWithEM" id="gridWithEMElement"></div>
  84 <div class="gridWithViewPortPercentage" id="gridWithViewPortPercentageElement"></div>
  85 <div class="gridWithFitContent" id="gridWithFitContentElement"></div>
  86 <div class="gridWithFitAvailable" id="gridWithFitAvailableElement"></div>
  87 <div class="gridWithMinMax" id="gridWithMinMax"></div>
  88 <div class="gridWithMinContent" id="gridWithMinContent"></div>
  89 <div class="gridWithMaxContent" id="gridWithMaxContent"></div>
  90 <div class="gridWithFraction" id="gridWithFraction"></div>
  91 <div class="gridWithCalc" id="gridWithCalc"></div>
  92 <div class="gridWithCalcComplex" id="gridWithCalcComplex"></div>
  93 <div class="gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div>
  94 <div class="gridWithCalcComplexInsideMinMax" id="gridWithCalcComplexInsideMinMax"></div>
  95 <div class="gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMax"></div>
  96 <script src="resources/grid-definitions-parsing-utils.js"></script>
  97 <script src="resources/non-grid-columns-rows-get-set.js"></script>
  98 </body>
  99 </html>