[CSS Grid Layout] Support calc() breadth track size

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

 description('Test that setting and getting grid-definition-columns and grid-definition-rows works as expected');
 
 debug("Test getting grid-definition-columns and grid-definition-rows set through CSS");
 testGridDefinitionsValues(document.getElementById("gridWithNoneElement"), "none", "none");
 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "10px", "15px");
 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "400px", "150px");
 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "0px", "0px");
 testGridDefinitionsValues(document.getElementById("gridWithAutoWithoutSizeElement"), "0px", "0px");
 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenElement"), "7px", "11px");
 testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px", "150px");
 testGridDefinitionsValues(document.getElementById("gridWithViewPortPercentageElement"), "64px", "60px");
 testGridDefinitionsValues(document.getElementById("gridWithMinMaxElement"), "80px", "300px");
 testGridDefinitionsValues(document.getElementById("gridWithMinContentElement"), "0px", "0px");
 testGridDefinitionsValues(document.getElementById("gridWithMinContentWithChildrenElement"), "17px", "11px");
 testGridDefinitionsValues(document.getElementById("gridWithMaxContentElement"), "0px", "0px");
 testGridDefinitionsValues(document.getElementById("gridWithMaxContentWithChildrenElement"), "17px", "11px");
 testGridDefinitionsValues(document.getElementById("gridWithFractionElement"), "800px", "600px");
+testGridDefinitionsValues(document.getElementById("gridWithCalcElement"), "150px", "75px");
+testGridDefinitionsValues(document.getElementById("gridWithCalcComplexElement"), "550px", "465px");
+testGridDefinitionsValues(document.getElementById("gridWithCalcInsideMinMaxElement"), "minmax(10%, 15px)", "minmax(20px, 50%)", "80px", "300px");
+testGridDefinitionsValues(document.getElementById("gridWithCalcComplexInsideMinMaxElement"), "minmax(10%, 415px)", "minmax(80px, 50%)", "415px", "300px");
 
 debug("");
 debug("Test getting wrong values for grid-definition-columns and grid-definition-rows through CSS (they should resolve to the default: 'none')");
 var gridWithFitContentElement = document.getElementById("gridWithFitContentElement");
 testGridDefinitionsValues(gridWithFitContentElement, "none", "none");
 
 var gridWithFitAvailableElement = document.getElementById("gridWithFitAvailableElement");
 testGridDefinitionsValues(gridWithFitAvailableElement, "none", "none");
 
 debug("");
@@ skipping 21 matching lines @@
 testGridDefinitionsSetJSValues("minmax(22em, max-content)", "minmax(max-content, 5em)", "220px", "50px");
 testGridDefinitionsSetJSValues("minmax(min-content, max-content)", "minmax(max-content, min-content)", "0px", "0px");
 // Unit comparison should be case-insensitive.
 testGridDefinitionsSetJSValues("3600Fr", "154fR", "800px", "600px", "3600fr", "154fr");
 // Float values are allowed.
 testGridDefinitionsSetJSValues("3.1459fr", "2.718fr", "800px", "600px");
 // A leading '+' is allowed.
 testGridDefinitionsSetJSValues("+3fr", "+4fr", "800px", "600px", "3fr", "4fr");
 
 debug("");
+debug("Test getting and setting grid-definition-columns and grid-definition-rows to calc() values through JS");
+testGridDefinitionsSetJSValues("calc(150px)", "calc(75px)", "150px", "75px");
+testGridDefinitionsSetJSValues("calc(50% - 30px)", "calc(75px + 10%)", "370px", "135px");
+testGridDefinitionsSetJSValues("minmax(25%, calc(30px))", "minmax(calc(75%), 40px)", "200px", "450px", "minmax(25%, calc(30px))", "minmax(calc(75%), 40px)");
+testGridDefinitionsSetJSValues("minmax(10%, calc(30px + 10%))", "minmax(calc(25% - 50px), 200px)", "110px", "200px", "minmax(10%, calc(30px + 10%))", "minmax(calc(25% - 50px), 200px)");
+
+debug("");
 debug("Test setting grid-definition-columns and grid-definition-rows to bad values through JS");
 // No comma and only 1 argument provided.
 testGridDefinitionsSetBadJSValues("minmax(10px 20px)", "minmax(10px)")
 // Nested minmax and only 2 arguments are allowed.
 testGridDefinitionsSetBadJSValues("minmax(minmax(10px, 20px), 20px)", "minmax(10px, 20px, 30px)");
 // No breadth value and no comma.
 testGridDefinitionsSetBadJSValues("minmax()", "minmax(30px 30% 30em)");
 // Auto is not allowed inside minmax.
 testGridDefinitionsSetBadJSValues("minmax(auto, 8vh)", "minmax(10vw, auto)");
 testGridDefinitionsSetBadJSValues("-2fr", "3ffr");
 testGridDefinitionsSetBadJSValues("-2.05fr", "+-3fr");
 testGridDefinitionsSetBadJSValues("0fr", "1r");
 // A dimension doesn't allow spaces between the number and the unit.
 testGridDefinitionsSetBadJSValues(".0000fr", "13 fr");
 testGridDefinitionsSetBadJSValues("7.-fr", "-8,0fr");
 // Negative values are not allowed.
 testGridDefinitionsSetBadJSValues("-1px", "-6em");
 testGridDefinitionsSetBadJSValues("minmax(-1%, 32%)", "minmax(2vw, -6em)");
+// Invalid expressions with calc
+testGridDefinitionsSetBadJSValues("calc(16px 30px)", "calc(25px + auto)");
+testGridDefinitionsSetBadJSValues("minmax(min-content, calc())", "calc(10%(");
 
 debug("");
 debug("Test setting grid-definition-columns and grid-definition-rows back to 'none' through JS");
 testGridDefinitionsSetJSValues("18px", "66px");
 testGridDefinitionsSetJSValues("none", "none");
 
 function testInherit()
 {
     var parentElement = document.createElement("div");
     document.body.appendChild(parentElement);
@@ skipping 31 matching lines @@
     element.style.gridDefinitionColumns = "initial";
     element.style.gridDefinitionRows = "initial";
     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'none'");
     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'none'");
 
     document.body.removeChild(element);
 }
 debug("");
 debug("Test setting grid-definition-columns and grid-definition-rows to 'initial' through JS");
 testInitial();