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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style>
   6 .gridWithFixed {
   7     grid-template-columns: 7px 11px;
   8     grid-template-rows: 17px 2px;
   9 }
  10
  11 .gridWithPercent {
  12     grid-template-columns: 53% 99%;
  13     grid-template-rows: 27% 52%;
  14 }
  15 .gridWithAuto {
  16     grid-template-columns: auto auto;
  17     grid-template-rows: auto auto;
  18 }
  19 .gridWithEM {
  20     grid-template-columns: 10em 12em;
  21     grid-template-rows: 15em 17em;
  22     font: 10px Ahem;
  23 }
  24 .gridWithNoneAndAuto {
  25     grid-template-columns: none auto;
  26     grid-template-rows: none auto;
  27 }
  28 .gridNoneWithAndFixed {
  29     grid-template-columns: none 15px;
  30     grid-template-rows: none 22px;
  31 }
  32 .gridWithThreeItems {
  33     grid-template-columns: 15px auto 10em;
  34     grid-template-rows: 12em 18px auto;
  35     font: 10px Ahem;
  36 }
  37 .gridWithPercentAndViewportPercent {
  38     grid-template-columns: 50% 15vw;
  39     grid-template-rows: 35% 28vh;
  40 }
  41 .gridWithFitContentAndFitAvailable {
  42     grid-template-columns: -webkit-content-available;
  43     grid-template-rows: -webkit-fit-content -webkit-fit-available;
  44 }
  45 .gridWithMinMaxContent {
  46     grid-template-columns: min-content max-content;
  47     grid-template-rows: max-content min-content;
  48 }
  49 .gridWithMinMaxAndFixed {
  50     grid-template-columns: minmax(45px, 30%) 15px;
  51     grid-template-rows: 12em minmax(35%, 10px);
  52     font: 10px Ahem;
  53 }
  54 .gridWithMinMaxAndMinMaxContent {
  55     grid-template-columns: minmax(min-content, 30%) 15px;
  56     grid-template-rows: 12em minmax(35%, max-content);
  57     font: 10px Ahem;
  58 }
  59 .gridWithFractionFraction {
  60     grid-template-columns: 1fr 2fr;
  61     grid-template-rows: 3fr 4fr;
  62 }
  63 .gridWithFractionMinMax {
  64     grid-template-columns: minmax(min-content, 45px) 2fr;
  65     grid-template-rows: 3fr minmax(14px, max-content);
  66 }
  67 .gridWithCalcCalc {
  68     grid-template-columns: calc(200px) calc(10em);
  69     grid-template-rows: calc(15em) calc(75px);
  70     font: 10px Ahem;
  71 }
  72 .gridWithCalcAndFixed {
  73     grid-template-columns: calc(50%) 8em;
  74     grid-template-rows: 88px calc(25%);
  75     font: 10px Ahem;
  76 }
  77 .gridWithCalcAndMinMax {
  78     grid-template-columns: calc(30px + 20%) minmax(min-content, 80px);
  79     grid-template-rows: minmax(25%, max-content) calc(10% - 7px);
  80 }
  81 .gridWithCalcInsideMinMax {
  82     grid-template-columns: minmax(calc(23px + 10%), 400px) 12em;
  83     grid-template-rows: calc(150px) minmax(5%, calc(50% - 125px));
  84     font: 10px Ahem;
  85 }
  86 .gridWithAutoInsideMinMax {
  87     grid-template-columns: minmax(auto, 20px) 10%;
  88     grid-template-rows: max-content minmax(min-content, auto);
  89 }
  90 </style>
  91 <script src="../../resources/js-test.js"></script>
  92 </head>
  93 <body>
  94 <div class="gridWithFixed" id="gridWithFixedElement"></div>
  95 <div class="gridWithPercent" id="gridWithPercentElement"></div>
  96 <div class="gridWithAuto" id="gridWithAutoElement"></div>
  97 <div class="gridWithEM" id="gridWithEMElement"></div>
  98 <div class="gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div>
  99 <div class="gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div>
 100 <div class="gridWithThreeItems" id="gridWithThreeItems"></div>
 101 <div class="gridWithPercentAndViewportPercent" id="gridWithPercentAndViewportPercent"></div>
 102 <div class="gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div>
 103 <div class="gridWithMinMaxContent" id="gridWithMinMaxContent"></div>
 104 <div class="gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div>
 105 <div class="gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"></div>
 106 <div class="gridWithFractionFraction" id="gridWithFractionFraction"></div>
 107 <div class="gridWithFractionMinMax" id="gridWithFractionMinMax"></div>
 108 <div class="gridWithCalcCalc" id="gridWithCalcCalc"></div>
 109 <div class="gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div>
 110 <div class="gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div>
 111 <div class="gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div>
 112 <div class="gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMax"></div>
 113 <script src="resources/grid-definitions-parsing-utils.js"></script>
 114 <script src="resources/non-grid-columns-rows-get-set-multiple.js"></script>
 115 </body>
 116 </html>