src/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-definition-columns: none;
   8     grid-definition-rows: none;
   9 }
  10 .gridWithFixed {
  11     grid-definition-columns: 10px;
  12     grid-definition-rows: 15px;
  13 }
  14 .gridWithPercent {
  15     grid-definition-columns: 53%;
  16     grid-definition-rows: 27%;
  17 }
  18 .gridWithAuto {
  19     grid-definition-columns: auto;
  20     grid-definition-rows: auto;
  21 }
  22 .gridWithEM {
  23     grid-definition-columns: 10em;
  24     grid-definition-rows: 15em;
  25     font: 10px Ahem;
  26 }
  27 .gridWithViewPortPercentage {
  28     grid-definition-columns: 8vw;
  29     grid-definition-rows: 10vh;
  30 }
  31 .gridWithFitContent {
  32     grid-definition-columns: -webkit-fit-content;
  33     grid-definition-rows: -webkit-fit-content;
  34 }
  35 .gridWithFitAvailable {
  36     grid-definition-columns: -webkit-fit-available;
  37     grid-definition-rows: -webkit-fit-available;
  38 }
  39 .gridWithMinMax {
  40     grid-definition-columns: minmax(10%, 15px);
  41     grid-definition-rows: minmax(20px, 50%);
  42 }
  43 .gridWithMinContent {
  44     grid-definition-columns: min-content;
  45     grid-definition-rows: min-content;
  46 }
  47 .gridWithMaxContent {
  48     grid-definition-columns: max-content;
  49     grid-definition-rows: max-content;
  50 }
  51 .gridWithFraction {
  52     grid-definition-columns: 1fr;
  53     grid-definition-rows: 2fr;
  54 }
  55 </style>
  56 <script src="../js/resources/js-test-pre.js"></script>
  57 </head>
  58 <body>
  59 <div class="gridWithNone" id="gridWithNoneElement"></div>
  60 <div class="gridWithFixed" id="gridWithFixedElement"></div>
  61 <div class="gridWithPercent" id="gridWithPercentElement"></div>
  62 <div class="gridWithAuto" id="gridWithAutoElement"></div>
  63 <div class="gridWithEM" id="gridWithEMElement"></div>
  64 <div class="gridWithViewPortPercentage" id="gridWithViewPortPercentageElement"></div>
  65 <div class="gridWithFitContent" id="gridWithFitContentElement"></div>
  66 <div class="gridWithFitAvailable" id="gridWithFitAvailableElement"></div>
  67 <div class="gridWithMinMax" id="gridWithMinMax"></div>
  68 <div class="gridWithMinContent" id="gridWithMinContent"></div>
  69 <div class="gridWithMaxContent" id="gridWithMaxContent"></div>
  70 <div class="gridWithFraction" id="gridWithFraction"></div>
  71 <script src="resources/grid-definitions-parsing-utils.js"></script>
  72 <script src="resources/non-grid-columns-rows-get-set.js"></script>
  73 </body>
  74 </html>