third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-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(gridWithFixedElement, '').getPropertyValue('grid-template-columns') is "7px 11px"
   8 PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-rows') is "17px 2px"
   9 PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is "424px 792px"
  10 PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is "162px 312px"
  11 PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-columns') is "7px 0px"
  12 PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-rows') is "11px 0px"
  13 PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-columns') is "0px 17px"
  14 PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-rows') is "0px 3px"
  15 PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-template-columns') is "100px 120px"
  16 PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-template-rows') is "150px 170px"
  17 PASS window.getComputedStyle(gridWithThreeItems, '').getPropertyValue('grid-template-columns') is "15px 0px 100px"
  18 PASS window.getComputedStyle(gridWithThreeItems, '').getPropertyValue('grid-template-rows') is "120px 18px 0px"
  19 PASS window.getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('grid-template-columns') is "400px 120px"
  20 PASS window.getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('grid-template-rows') is "210px 168px"
  21 PASS window.getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('grid-template-columns') is "none"
  22 PASS window.getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('grid-template-rows') is "none"
  23 PASS window.getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('grid-template-columns') is "0px 0px"
  24 PASS window.getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('grid-template-rows') is "0px 0px"
  25 PASS window.getComputedStyle(gridWithMinMaxContentWithChildrenElement, '').getPropertyValue('grid-template-columns') is "7px 17px"
  26 PASS window.getComputedStyle(gridWithMinMaxContentWithChildrenElement, '').getPropertyValue('grid-template-rows') is "11px 3px"
  27 PASS window.getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('grid-template-columns') is "240px 15px"
  28 PASS window.getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('grid-template-rows') is "120px 210px"
  29 PASS window.getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('grid-template-columns') is "240px 15px"
  30 PASS window.getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('grid-template-rows') is "120px 210px"
  31 PASS window.getComputedStyle(gridWithFractionFraction, '').getPropertyValue('grid-template-columns') is "320px 480px"
  32 PASS window.getComputedStyle(gridWithFractionFraction, '').getPropertyValue('grid-template-rows') is "225px 375px"
  33 PASS window.getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('grid-template-columns') is "45px 755px"
  34 PASS window.getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('grid-template-rows') is "586px 14px"
  35 PASS window.getComputedStyle(gridWithCalcCalc, '').getPropertyValue('grid-template-columns') is "200px 100px"
  36 PASS window.getComputedStyle(gridWithCalcCalc, '').getPropertyValue('grid-template-rows') is "150px 75px"
  37 PASS window.getComputedStyle(gridWithCalcAndFixed, '').getPropertyValue('grid-template-columns') is "400px 80px"
  38 PASS window.getComputedStyle(gridWithCalcAndFixed, '').getPropertyValue('grid-template-rows') is "88px 150px"
  39 PASS window.getComputedStyle(gridWithCalcAndMinMax, '').getPropertyValue('grid-template-columns') is "190px 80px"
  40 PASS window.getComputedStyle(gridWithCalcAndMinMax, '').getPropertyValue('grid-template-rows') is "150px 53px"
  41 PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('grid-template-columns') is "400px 120px"
  42 PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('grid-template-rows') is "150px 175px"
  43 PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('grid-template-columns') is "0px 30px"
  44 PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('grid-template-rows') is "132px 60px"
  45
  46 Test the initial value
  47 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is 'none'
  48 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is 'none'
  49
  50 Test getting and setting grid-template-rows and grid-template-columns through JS
  51 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "18px 22px"
  52 PASS element.style.gridTemplateColumns is "18px 22px"
  53 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "66px 70px"
  54 PASS element.style.gridTemplateRows is "66px 70px"
  55 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "440px 640px"
  56 PASS element.style.gridTemplateColumns is "55% 80%"
  57 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "240px 378px"
  58 PASS element.style.gridTemplateRows is "40% 63%"
  59 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px 0px"
  60 PASS element.style.gridTemplateColumns is "auto auto"
  61 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px 0px"
  62 PASS element.style.gridTemplateRows is "auto auto"
  63 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px 160px 22px"
  64 PASS element.style.gridTemplateColumns is "auto 16em 22px"
  65 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "336px 100px 0px"
  66 PASS element.style.gridTemplateRows is "56% 10em auto"
  67 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "160px 20px"
  68 PASS element.style.gridTemplateColumns is "16em minmax(16px, 20px)"
  69 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "90px 0px"
  70 PASS element.style.gridTemplateRows is "minmax(10%, 15%) auto"
  71 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "160px 640px"
  72 PASS element.style.gridTemplateColumns is "16em 2fr"
  73 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "600px 0px"
  74 PASS element.style.gridTemplateRows is "14fr auto"
  75 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "400px 96px"
  76 PASS element.style.gridTemplateColumns is "50% 12vw"
  77 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "30px 510px"
  78 PASS element.style.gridTemplateRows is "5% 85vh"
  79 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "25px 20px"
  80 PASS element.style.gridTemplateColumns is "calc(25px) calc(2em)"
  81 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px 60px"
  82 PASS element.style.gridTemplateRows is "auto calc(10%)"
  83 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "345px 92px"
  84 PASS element.style.gridTemplateColumns is "calc(25px + 40%) minmax(min-content, calc(10% + 12px))"
  85 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "100px 0px"
  86 PASS element.style.gridTemplateRows is "minmax(calc(75% - 350px), max-content) auto"
  87 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px 16px"
  88 PASS element.style.gridTemplateColumns is "auto minmax(16px, auto)"
  89 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "90px 80px"
  90 PASS element.style.gridTemplateRows is "minmax(auto, 15%) 10vw"
  91
  92 Test getting wrong values set from CSS
  93 PASS getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-template-columns') is 'none'
  94 PASS getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-template-rows') is 'none'
  95 PASS getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-template-columns') is 'none'
  96 PASS getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-template-rows') is 'none'
  97
  98 Test setting and getting wrong values from JS
  99 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
 100 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
 101 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
 102 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
 103 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
 104 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
 105 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
 106 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
 107 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
 108 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
 109 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
 110 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
 111 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
 112 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
 113 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
 114 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
 115 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
 116 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
 117 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
 118 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
 119
 120 Test setting grid-template-columns and grid-template-rows to 'inherit' through JS
 121 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "50px 750px [last]"
 122 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "20px [middle] 45px"
 123 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "50px 0px [last]"
 124 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "20px [middle] 45px"
 125
 126 Test setting grid-template-columns and grid-template-rows to 'initial' through JS
 127 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "1200px [middle] 55px"
 128 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "200px [line] 400px [line]"
 129 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is 'none'
 130 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is 'none'
 131 PASS successfullyParsed is true
 132
 133 TEST COMPLETE
 134