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