src/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt

   1 Test that setting and getting grid-definition-columns and grid-definition-rows works as expected
   2
   3 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
   4
   5
   6 Test getting grid-definition-columns and grid-definition-rows set through CSS
   7 PASS window.getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-definition-columns') is "none"
   8 PASS window.getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-definition-rows') is "none"
   9 PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-definition-columns') is "10px"
  10 PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-definition-rows') is "15px"
  11 PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-definition-columns') is "400px"
  12 PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-definition-rows') is "150px"
  13 PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-definition-columns') is "0px"
  14 PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-definition-rows') is "0px"
  15 PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-definition-columns') is "7px"
  16 PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-definition-rows') is "11px"
  17 PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-definition-columns') is "0px"
  18 PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-definition-rows') is "0px"
  19 PASS window.getComputedStyle(gridWithAutoWithoutSizeElement, '').getPropertyValue('grid-definition-columns') is "0px"
  20 PASS window.getComputedStyle(gridWithAutoWithoutSizeElement, '').getPropertyValue('grid-definition-rows') is "0px"
  21 PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('grid-definition-columns') is "7px"
  22 PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('grid-definition-rows') is "11px"
  23 PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-definition-columns') is "100px"
  24 PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-definition-rows') is "150px"
  25 PASS window.getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('grid-definition-columns') is "64px"
  26 PASS window.getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('grid-definition-rows') is "60px"
  27 PASS window.getComputedStyle(gridWithMinMaxElement, '').getPropertyValue('grid-definition-columns') is "80px"
  28 PASS window.getComputedStyle(gridWithMinMaxElement, '').getPropertyValue('grid-definition-rows') is "300px"
  29 PASS window.getComputedStyle(gridWithMinContentElement, '').getPropertyValue('grid-definition-columns') is "0px"
  30 PASS window.getComputedStyle(gridWithMinContentElement, '').getPropertyValue('grid-definition-rows') is "0px"
  31 PASS window.getComputedStyle(gridWithMinContentWithChildrenElement, '').getPropertyValue('grid-definition-columns') is "17px"
  32 PASS window.getComputedStyle(gridWithMinContentWithChildrenElement, '').getPropertyValue('grid-definition-rows') is "11px"
  33 PASS window.getComputedStyle(gridWithMaxContentElement, '').getPropertyValue('grid-definition-columns') is "0px"
  34 PASS window.getComputedStyle(gridWithMaxContentElement, '').getPropertyValue('grid-definition-rows') is "0px"
  35 PASS window.getComputedStyle(gridWithMaxContentWithChildrenElement, '').getPropertyValue('grid-definition-columns') is "17px"
  36 PASS window.getComputedStyle(gridWithMaxContentWithChildrenElement, '').getPropertyValue('grid-definition-rows') is "11px"
  37 PASS window.getComputedStyle(gridWithFractionElement, '').getPropertyValue('grid-definition-columns') is "800px"
  38 PASS window.getComputedStyle(gridWithFractionElement, '').getPropertyValue('grid-definition-rows') is "600px"
  39 PASS window.getComputedStyle(gridWithCalcElement, '').getPropertyValue('grid-definition-columns') is "150px"
  40 PASS window.getComputedStyle(gridWithCalcElement, '').getPropertyValue('grid-definition-rows') is "75px"
  41 PASS window.getComputedStyle(gridWithCalcComplexElement, '').getPropertyValue('grid-definition-columns') is "550px"
  42 PASS window.getComputedStyle(gridWithCalcComplexElement, '').getPropertyValue('grid-definition-rows') is "465px"
  43 PASS window.getComputedStyle(gridWithCalcInsideMinMaxElement, '').getPropertyValue('grid-definition-columns') is "80px"
  44 PASS window.getComputedStyle(gridWithCalcInsideMinMaxElement, '').getPropertyValue('grid-definition-rows') is "300px"
  45 PASS window.getComputedStyle(gridWithCalcComplexInsideMinMaxElement, '').getPropertyValue('grid-definition-columns') is "415px"
  46 PASS window.getComputedStyle(gridWithCalcComplexInsideMinMaxElement, '').getPropertyValue('grid-definition-rows') is "300px"
  47
  48 Test getting wrong values for grid-definition-columns and grid-definition-rows through CSS (they should resolve to the default: 'none')
  49 PASS window.getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid-definition-columns') is "none"
  50 PASS window.getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid-definition-rows') is "none"
  51 PASS window.getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('grid-definition-columns') is "none"
  52 PASS window.getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('grid-definition-rows') is "none"
  53
  54 Test the initial value
  55 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "none"
  56 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "none"
  57 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is 'none'
  58 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is 'none'
  59
  60 Test getting and setting grid-definition-columns and grid-definition-rows through JS
  61 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "18px"
  62 PASS element.style.gridDefinitionColumns is "18px"
  63 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "66px"
  64 PASS element.style.gridDefinitionRows is "66px"
  65 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "440px"
  66 PASS element.style.gridDefinitionColumns is "55%"
  67 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "240px"
  68 PASS element.style.gridDefinitionRows is "40%"
  69 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "0px"
  70 PASS element.style.gridDefinitionColumns is "auto"
  71 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "0px"
  72 PASS element.style.gridDefinitionRows is "auto"
  73 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "80px"
  74 PASS element.style.gridDefinitionColumns is "10vw"
  75 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "150px"
  76 PASS element.style.gridDefinitionRows is "25vh"
  77 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "0px"
  78 PASS element.style.gridDefinitionColumns is "min-content"
  79 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "0px"
  80 PASS element.style.gridDefinitionRows is "min-content"
  81 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "0px"
  82 PASS element.style.gridDefinitionColumns is "max-content"
  83 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "0px"
  84 PASS element.style.gridDefinitionRows is "max-content"
  85
  86 Test getting and setting grid-definition-columns and grid-definition-rows to minmax() values through JS
  87 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "440px"
  88 PASS element.style.gridDefinitionColumns is "minmax(55%, 45px)"
  89 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "240px"
  90 PASS element.style.gridDefinitionRows is "minmax(30px, 40%)"
  91 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "220px"
  92 PASS element.style.gridDefinitionColumns is "minmax(22em, 8vh)"
  93 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "80px"
  94 PASS element.style.gridDefinitionRows is "minmax(10vw, 5em)"
  95 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "48px"
  96 PASS element.style.gridDefinitionColumns is "minmax(min-content, 8vh)"
  97 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "80px"
  98 PASS element.style.gridDefinitionRows is "minmax(10vw, min-content)"
  99 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "220px"
 100 PASS element.style.gridDefinitionColumns is "minmax(22em, max-content)"
 101 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "50px"
 102 PASS element.style.gridDefinitionRows is "minmax(max-content, 5em)"
 103 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "0px"
 104 PASS element.style.gridDefinitionColumns is "minmax(min-content, max-content)"
 105 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "0px"
 106 PASS element.style.gridDefinitionRows is "minmax(max-content, min-content)"
 107 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "800px"
 108 PASS element.style.gridDefinitionColumns is "3600fr"
 109 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "600px"
 110 PASS element.style.gridDefinitionRows is "154fr"
 111 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "800px"
 112 PASS element.style.gridDefinitionColumns is "3.1459fr"
 113 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "600px"
 114 PASS element.style.gridDefinitionRows is "2.718fr"
 115 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "800px"
 116 PASS element.style.gridDefinitionColumns is "3fr"
 117 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "600px"
 118 PASS element.style.gridDefinitionRows is "4fr"
 119
 120 Test getting and setting grid-definition-columns and grid-definition-rows to calc() values through JS
 121 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "150px"
 122 PASS element.style.gridDefinitionColumns is "calc(150px)"
 123 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "75px"
 124 PASS element.style.gridDefinitionRows is "calc(75px)"
 125 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "370px"
 126 PASS element.style.gridDefinitionColumns is "calc(50% - 30px)"
 127 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "135px"
 128 PASS element.style.gridDefinitionRows is "calc(75px + 10%)"
 129 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "200px"
 130 PASS element.style.gridDefinitionColumns is "minmax(25%, calc(30px))"
 131 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "450px"
 132 PASS element.style.gridDefinitionRows is "minmax(calc(75%), 40px)"
 133 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "110px"
 134 PASS element.style.gridDefinitionColumns is "minmax(10%, calc(30px + 10%))"
 135 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "200px"
 136 PASS element.style.gridDefinitionRows is "minmax(calc(25% - 50px), 200px)"
 137
 138 Test setting grid-definition-columns and grid-definition-rows to bad values through JS
 139 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "none"
 140 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "none"
 141 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "none"
 142 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "none"
 143 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "none"
 144 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "none"
 145 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "none"
 146 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "none"
 147 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "none"
 148 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "none"
 149 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "none"
 150 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "none"
 151 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "none"
 152 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "none"
 153 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "none"
 154 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "none"
 155 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "none"
 156 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "none"
 157 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "none"
 158 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "none"
 159 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "none"
 160 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "none"
 161 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "none"
 162 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "none"
 163 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "none"
 164 PASS window.getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "none"
 165
 166 Test setting grid-definition-columns and grid-definition-rows back to 'none' through JS
 167 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "18px"
 168 PASS element.style.gridDefinitionColumns is "18px"
 169 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "66px"
 170 PASS element.style.gridDefinitionRows is "66px"
 171 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is "none"
 172 PASS element.style.gridDefinitionColumns is "none"
 173 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is "none"
 174 PASS element.style.gridDefinitionRows is "none"
 175
 176 Test setting grid-definition-columns and grid-definition-rows to 'inherit' through JS
 177 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is '50px (last)'
 178 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is '(first) 101px'
 179
 180 Test setting grid-definition-columns and grid-definition-rows to 'initial' through JS
 181 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is '450px (last)'
 182 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is '(first) 150px'
 183 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-columns') is 'none'
 184 PASS getComputedStyle(element, '').getPropertyValue('grid-definition-rows') is 'none'
 185 PASS successfullyParsed is true
 186
 187 TEST COMPLETE
 188