src/third_party/WebKit/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js

   1 description('Test that setting and getting grid-template-columns and grid-template-rows works as expected');
   2
   3 debug("Test getting grid-template-columns and grid-template-rows set through CSS");
   4 testGridDefinitionsValues(document.getElementById("gridWithNoneElement"), "none", "none");
   5 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "10px", "15px");
   6 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "400px", "150px");
   7 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSize"), "0px", "0px");
   8 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSizeWithChildren"), "7px", "11px");
   9 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "0px", "0px");
  10 testGridDefinitionsValues(document.getElementById("gridWithAutoWithoutSizeElement"), "0px", "0px");
  11 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenElement"), "7px", "11px");
  12 testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px", "150px");
  13 testGridDefinitionsValues(document.getElementById("gridWithViewPortPercentageElement"), "64px", "60px");
  14 testGridDefinitionsValues(document.getElementById("gridWithMinMaxElement"), "80px", "300px");
  15 testGridDefinitionsValues(document.getElementById("gridWithMinContentElement"), "0px", "0px");
  16 testGridDefinitionsValues(document.getElementById("gridWithMinContentWithChildrenElement"), "17px", "11px");
  17 testGridDefinitionsValues(document.getElementById("gridWithMaxContentElement"), "0px", "0px");
  18 testGridDefinitionsValues(document.getElementById("gridWithMaxContentWithChildrenElement"), "17px", "11px");
  19 testGridDefinitionsValues(document.getElementById("gridWithFractionElement"), "800px", "600px");
  20 testGridDefinitionsValues(document.getElementById("gridWithCalcElement"), "150px", "75px");
  21 testGridDefinitionsValues(document.getElementById("gridWithCalcComplexElement"), "550px", "465px");
  22 testGridDefinitionsValues(document.getElementById("gridWithCalcInsideMinMaxElement"), "minmax(10%, 15px)", "minmax(20px, 50%)", "80px", "300px");
  23 testGridDefinitionsValues(document.getElementById("gridWithCalcComplexInsideMinMaxElement"), "minmax(10%, 415px)", "minmax(80px, 50%)", "415px", "300px");
  24
  25 debug("");
  26 debug("Test getting wrong values for grid-template-columns and grid-template-rows through CSS (they should resolve to the default: 'none')");
  27 var gridWithFitContentElement = document.getElementById("gridWithFitContentElement");
  28 testGridDefinitionsValues(gridWithFitContentElement, "none", "none");
  29
  30 var gridWithFitAvailableElement = document.getElementById("gridWithFitAvailableElement");
  31 testGridDefinitionsValues(gridWithFitAvailableElement, "none", "none");
  32
  33 debug("");
  34 debug("Test the initial value");
  35 var element = document.createElement("div");
  36 document.body.appendChild(element);
  37 testGridDefinitionsValues(element, "none", "none");
  38 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
  39 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
  40
  41 debug("");
  42 debug("Test getting and setting grid-template-columns and grid-template-rows through JS");
  43 testGridDefinitionsSetJSValues("18px", "66px");
  44 testGridDefinitionsSetJSValues("55%", "40%", "440px", "240px");
  45 testGridDefinitionsSetJSValues("auto", "auto", "0px", "0px");
  46 testGridDefinitionsSetJSValues("10vw", "25vh", "80px", "150px");
  47 testGridDefinitionsSetJSValues("min-content", "min-content", "0px", "0px");
  48 testGridDefinitionsSetJSValues("max-content", "max-content", "0px", "0px");
  49
  50 debug("");
  51 debug("Test getting and setting grid-template-columns and grid-template-rows to minmax() values through JS");
  52 testGridDefinitionsSetJSValues("minmax(55%, 45px)", "minmax(30px, 40%)", "440px", "240px");
  53 testGridDefinitionsSetJSValues("minmax(22em, 8vh)", "minmax(10vw, 5em)", "220px", "80px");
  54 testGridDefinitionsSetJSValues("minmax(min-content, 8vh)", "minmax(10vw, min-content)", "48px", "80px");
  55 testGridDefinitionsSetJSValues("minmax(22em, max-content)", "minmax(max-content, 5em)", "220px", "50px");
  56 testGridDefinitionsSetJSValues("minmax(min-content, max-content)", "minmax(max-content, min-content)", "0px", "0px");
  57 // Unit comparison should be case-insensitive.
  58 testGridDefinitionsSetJSValues("3600Fr", "154fR", "800px", "600px", "3600fr", "154fr");
  59 // Float values are allowed.
  60 testGridDefinitionsSetJSValues("3.1459fr", "2.718fr", "800px", "600px");
  61 // A leading '+' is allowed.
  62 testGridDefinitionsSetJSValues("+3fr", "+4fr", "800px", "600px", "3fr", "4fr");
  63
  64 debug("");
  65 debug("Test getting and setting grid-template-columns and grid-template-rows to calc() values through JS");
  66 testGridDefinitionsSetJSValues("calc(150px)", "calc(75px)", "150px", "75px");
  67 testGridDefinitionsSetJSValues("calc(50% - 30px)", "calc(75px + 10%)", "370px", "135px");
  68 testGridDefinitionsSetJSValues("minmax(25%, calc(30px))", "minmax(calc(75%), 40px)", "200px", "450px", "minmax(25%, calc(30px))", "minmax(calc(75%), 40px)");
  69 testGridDefinitionsSetJSValues("minmax(10%, calc(30px + 10%))", "minmax(calc(25% - 50px), 200px)", "110px", "200px", "minmax(10%, calc(30px + 10%))", "minmax(calc(25% - 50px), 200px)");
  70
  71 debug("");
  72 debug("Test setting grid-template-columns and grid-template-rows to bad values through JS");
  73 // No comma and only 1 argument provided.
  74 testGridDefinitionsSetBadJSValues("minmax(10px 20px)", "minmax(10px)")
  75 // Nested minmax and only 2 arguments are allowed.
  76 testGridDefinitionsSetBadJSValues("minmax(minmax(10px, 20px), 20px)", "minmax(10px, 20px, 30px)");
  77 // No breadth value and no comma.
  78 testGridDefinitionsSetBadJSValues("minmax()", "minmax(30px 30% 30em)");
  79 // Auto is not allowed inside minmax.
  80 testGridDefinitionsSetBadJSValues("minmax(auto, 8vh)", "minmax(10vw, auto)");
  81 testGridDefinitionsSetBadJSValues("-2fr", "3ffr");
  82 testGridDefinitionsSetBadJSValues("-2.05fr", "+-3fr");
  83 testGridDefinitionsSetBadJSValues("0fr", "1r");
  84 // A dimension doesn't allow spaces between the number and the unit.
  85 testGridDefinitionsSetBadJSValues(".0000fr", "13 fr");
  86 testGridDefinitionsSetBadJSValues("7.-fr", "-8,0fr");
  87 // Negative values are not allowed.
  88 testGridDefinitionsSetBadJSValues("-1px", "-6em");
  89 testGridDefinitionsSetBadJSValues("minmax(-1%, 32%)", "minmax(2vw, -6em)");
  90 // Invalid expressions with calc
  91 testGridDefinitionsSetBadJSValues("calc(16px 30px)", "calc(25px + auto)");
  92 testGridDefinitionsSetBadJSValues("minmax(min-content, calc())", "calc(10%(");
  93
  94 debug("");
  95 debug("Test setting grid-template-columns and grid-template-rows back to 'none' through JS");
  96 testGridDefinitionsSetJSValues("18px", "66px");
  97 testGridDefinitionsSetJSValues("none", "none");
  98
  99 function testInherit()
 100 {
 101     var parentElement = document.createElement("div");
 102     document.body.appendChild(parentElement);
 103     parentElement.style.gridTemplateColumns = "50px (last)";
 104     parentElement.style.gridTemplateRows = "(first) 101%";
 105
 106     element = document.createElement("div");
 107     parentElement.appendChild(element);
 108     element.style.display = "grid";
 109     element.style.height = "100px";
 110     element.style.gridTemplateColumns = "inherit";
 111     element.style.gridTemplateRows = "inherit";
 112     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'50px (last)'");
 113     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'(first) 101px'");
 114
 115     document.body.removeChild(parentElement);
 116 }
 117 debug("");
 118 debug("Test setting grid-template-columns and grid-template-rows to 'inherit' through JS");
 119 testInherit();
 120
 121 function testInitial()
 122 {
 123     element = document.createElement("div");
 124     document.body.appendChild(element);
 125     element.style.display = "grid";
 126     element.style.width = "300px";
 127     element.style.height = "150px";
 128     element.style.gridTemplateColumns = "150% (last)";
 129     element.style.gridTemplateRows = "(first) 1fr";
 130     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'450px (last)'");
 131     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'(first) 150px'");
 132
 133     element.style.display = "grid";
 134     element.style.gridTemplateColumns = "initial";
 135     element.style.gridTemplateRows = "initial";
 136     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
 137     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
 138
 139     document.body.removeChild(element);
 140 }
 141 debug("");
 142 debug("Test setting grid-template-columns and grid-template-rows to 'initial' through JS");
 143 testInitial();