src/third_party/WebKit/LayoutTests/fast/css-grid-layout/resources/non-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"), "53%", "27%");
   7 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "auto", "auto");
   8 testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px", "150px");
   9 testGridDefinitionsValues(document.getElementById("gridWithViewPortPercentageElement"), "64px", "60px");
  10 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "minmax(10%, 15px)", "minmax(20px, 50%)");
  11 testGridDefinitionsValues(document.getElementById("gridWithMinContent"), "min-content", "min-content");
  12 testGridDefinitionsValues(document.getElementById("gridWithMaxContent"), "max-content", "max-content");
  13 testGridDefinitionsValues(document.getElementById("gridWithFraction"), "1fr", "2fr");
  14 testGridDefinitionsValues(document.getElementById("gridWithCalc"), "150px", "75px");
  15 testGridDefinitionsValues(document.getElementById("gridWithCalcComplex"), "calc(150px + 50%)", "calc(75px + 65%)");
  16 testGridDefinitionsValues(document.getElementById("gridWithCalcInsideMinMax"), "minmax(10%, 15px)", "minmax(20px, 50%)");
  17 testGridDefinitionsValues(document.getElementById("gridWithCalcComplexInsideMinMax"), "minmax(10%, calc(15px + 50%))", "minmax(calc(20px + 10%), 50%)");
  18
  19 debug("");
  20 debug("Test getting wrong values for grid-template-columns and grid-template-rows through CSS (they should resolve to the default: 'none')");
  21 var gridWithFitContentElement = document.getElementById("gridWithFitContentElement");
  22 testGridDefinitionsValues(gridWithFitContentElement, "none", "none");
  23
  24 var gridWithFitAvailableElement = document.getElementById("gridWithFitAvailableElement");
  25 testGridDefinitionsValues(gridWithFitAvailableElement, "none", "none");
  26
  27 debug("");
  28 debug("Test the initial value");
  29 var element = document.createElement("div");
  30 document.body.appendChild(element);
  31 testGridDefinitionsValues(element, "none", "none");
  32 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
  33 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
  34
  35 debug("");
  36 debug("Test getting and setting grid-template-columns and grid-template-rows through JS");
  37 testNonGridDefinitionsSetJSValues("18px", "66px");
  38 testNonGridDefinitionsSetJSValues("55%", "40%");
  39 testNonGridDefinitionsSetJSValues("auto", "auto");
  40 testNonGridDefinitionsSetJSValues("10vw", "25vh", "80px", "150px");
  41 testNonGridDefinitionsSetJSValues("min-content", "min-content");
  42 testNonGridDefinitionsSetJSValues("max-content", "max-content");
  43
  44 debug("");
  45 debug("Test getting and setting grid-template-columns and grid-template-rows to minmax() values through JS");
  46 testNonGridDefinitionsSetJSValues("minmax(55%, 45px)", "minmax(30px, 40%)");
  47 testNonGridDefinitionsSetJSValues("minmax(22em, 8vh)", "minmax(10vw, 5em)", "minmax(220px, 48px)", "minmax(80px, 50px)");
  48 testNonGridDefinitionsSetJSValues("minmax(min-content, 8vh)", "minmax(10vw, min-content)", "minmax(min-content, 48px)", "minmax(80px, min-content)");
  49 testNonGridDefinitionsSetJSValues("minmax(22em, max-content)", "minmax(max-content, 5em)", "minmax(220px, max-content)", "minmax(max-content, 50px)");
  50 testNonGridDefinitionsSetJSValues("minmax(min-content, max-content)", "minmax(max-content, min-content)");
  51 // Unit comparison should be case-insensitive.
  52 testNonGridDefinitionsSetJSValues("3600Fr", "154fR", "3600fr", "154fr", "3600fr", "154fr");
  53 // Float values are allowed.
  54 testNonGridDefinitionsSetJSValues("3.1459fr", "2.718fr");
  55 // A leading '+' is allowed.
  56 testNonGridDefinitionsSetJSValues("+3fr", "+4fr", "3fr", "4fr", "3fr", "4fr");
  57
  58 debug("");
  59 debug("Test setting grid-template-columns and grid-template-rows to bad values through JS");
  60 // No comma and only 1 argument provided.
  61 testGridDefinitionsSetBadJSValues("minmax(10px 20px)", "minmax(10px)")
  62 // Nested minmax and only 2 arguments are allowed.
  63 testGridDefinitionsSetBadJSValues("minmax(minmax(10px, 20px), 20px)", "minmax(10px, 20px, 30px)");
  64 // No breadth value and no comma.
  65 testGridDefinitionsSetBadJSValues("minmax()", "minmax(30px 30% 30em)");
  66 // Auto is not allowed inside minmax.
  67 testGridDefinitionsSetBadJSValues("minmax(auto, 8vh)", "minmax(10vw, auto)");
  68 testGridDefinitionsSetBadJSValues("-2fr", "3ffr");
  69 testGridDefinitionsSetBadJSValues("-2.05fr", "+-3fr");
  70 testGridDefinitionsSetBadJSValues("0fr", "1r");
  71 // A dimension doesn't allow spaces between the number and the unit.
  72 testGridDefinitionsSetBadJSValues(".0000fr", "13 fr");
  73 testGridDefinitionsSetBadJSValues("7.-fr", "-8,0fr");
  74 // Negative values are not allowed.
  75 testGridDefinitionsSetBadJSValues("-1px", "-6em");
  76 testGridDefinitionsSetBadJSValues("minmax(-1%, 32%)", "minmax(2vw, -6em)");
  77
  78 debug("");
  79 debug("Test setting grid-template-columns and grid-template-rows back to 'none' through JS");
  80 testNonGridDefinitionsSetJSValues("18px", "66px");
  81 testNonGridDefinitionsSetJSValues("none", "none");
  82
  83 function testInherit()
  84 {
  85     var parentElement = document.createElement("div");
  86     document.body.appendChild(parentElement);
  87     parentElement.style.gridTemplateColumns = "50px (last)";
  88     parentElement.style.gridTemplateRows = "(first) 101%";
  89
  90     element = document.createElement("div");
  91     parentElement.appendChild(element);
  92     element.style.gridTemplateColumns = "inherit";
  93     element.style.gridTemplateRows = "inherit";
  94     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'50px (last)'");
  95     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'(first) 101%'");
  96
  97     document.body.removeChild(parentElement);
  98 }
  99 debug("");
 100 debug("Test setting grid-template-columns and grid-template-rows to 'inherit' through JS");
 101 testInherit();
 102
 103 function testInitial()
 104 {
 105     element = document.createElement("div");
 106     document.body.appendChild(element);
 107     element.style.gridTemplateColumns = "150% (last)";
 108     element.style.gridTemplateRows = "(first) 1fr";
 109     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'150% (last)'");
 110     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'(first) 1fr'");
 111
 112     element.style.gridTemplateColumns = "initial";
 113     element.style.gridTemplateRows = "initial";
 114     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
 115     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
 116
 117     document.body.removeChild(element);
 118 }
 119 debug("");
 120 debug("Test setting grid-template-columns and grid-template-rows to 'initial' through JS");
 121 testInitial();