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

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