[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"), "53%", "27%");
 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "auto", "auto");
 testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px", "150px");
 testGridDefinitionsValues(document.getElementById("gridWithViewPortPercentageElement"), "64px", "60px");
 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "minmax(10%, 15px)", "minmax(20px, 50%)");
 testGridDefinitionsValues(document.getElementById("gridWithMinContent"), "min-content", "min-content");
 testGridDefinitionsValues(document.getElementById("gridWithMaxContent"), "max-content", "max-content");
 testGridDefinitionsValues(document.getElementById("gridWithFraction"), "1fr", "2fr");
+testGridDefinitionsValues(document.getElementById("gridWithCalcElement"), "150px", "75px");
+testGridDefinitionsValues(document.getElementById("gridWithCalcComplexElement"), "550px", "465px");
+testGridDefinitionsValues(document.getElementById("gridWithCalcInsideMinMaxElement"), "minmax(10%, 15px)", "minmax(20px, 50%)");
+testGridDefinitionsValues(document.getElementById("gridWithCalcComplexInsideMinMaxElement"), "minmax(10%, 415px)", "minmax(80px, 50%)");
 
 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)", "minmax(220px, max-content)", "minmax(max-content, 50px)");
 testGridDefinitionsSetJSValues("minmax(min-content, max-content)", "minmax(max-content, min-content)");
 // Unit comparison should be case-insensitive.
 testGridDefinitionsSetJSValues("3600Fr", "154fR", "3600fr", "154fr", "3600fr", "154fr");
 // Float values are allowed.
 testGridDefinitionsSetJSValues("3.1459fr", "2.718fr");
 // A leading '+' is allowed.
 testGridDefinitionsSetJSValues("+3fr", "+4fr", "3fr", "4fr", "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)", "minmax(25%, 30px)", "minmax(75%, 40px)");

[Julien - ping for review, 2013/09/24 19:09:16]

The expected results are actually wrong here. We should resolve the minmax to
its pixel value.

This is an existing issue and I would argue to fix it upfront but could live
with having some FIXMEs in this code and expected output that points to the
right bug.

[svillar, 2013/09/25 08:31:45]

Yes you're right, but I decided not to add those FIXMEs there because these
files have some other examples of bad results using minmax, it'd be weird to
have some results with the FIXMEs and some others without them.

I guess we can land this without adding all the FIXMEs and then fix them all in
the patch for http://crbug.com/297158

+testGridDefinitionsSetJSValues("minmax(10%, calc(30px + 10%))", "minmax(calc(25% - 50px), 200px)", "minmax(10%, 110px)", "minmax(100px, 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%(");
+testGridDefinitionsSetBadJSValues("calc(2px = 2px)", "calc(2fr + 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 25 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();