4 <link href="resources/grid.css" rel="stylesheet">
13 grid-template-columns: (first) 10px;
14 grid-template-rows: (first) 15px;
17 grid-template-columns: 53% (last);
18 grid-template-rows: 27% (last);
21 grid-template-columns: (first) auto;
22 grid-template-rows: auto (last);
25 grid-template-columns: (first) minmax(10%, 15px);
26 grid-template-rows: minmax(20px, 50%) (last);
28 .gridWithFixedMultiple {
29 grid-template-columns: (first nav) 10px (last);
30 grid-template-rows: (first nav) 15px (last);
32 .gridWithPercentageSameStringMultipleTimes {
33 grid-template-columns: (first nav) 10% (nav) 15% (last);
34 grid-template-rows: (first nav2) 25% (nav2) 75% (last);
37 grid-template-columns: (first) 10px repeat(2, (nav nav2) 50%);
38 grid-template-rows: 100px repeat(2, (nav nav2) 25%) (last);
40 .gridWithEmptyParentheses {
41 grid-template-columns: () 10px;
42 grid-template-rows: 20px ( ) 50px ();
45 <script src="../../resources/js-test.js"></script>
48 <div class="gridWithFixed" id="gridWithFixedElement"></div>
49 <div class="gridWithPercent" id="gridWithPercentElement"></div>
50 <div class="gridWithAuto" id="gridWithAutoElement"></div>
51 <div class="gridWithAuto" id="gridWithAutoWithChildrenElement">
52 <div class="gridItem"></div>
54 <div class="gridWithMinMax" id="gridWithMinMax"></div>
55 <div class="gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
56 <div class="gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSameStringMultipleTimes"></div>
57 <div class="gridWithRepeat" id="gridWithRepeatElement"></div>
58 <div class="gridWithEmptyParentheses" id="gridWithEmptyParentheses"></div>
60 <script src="resources/grid-definitions-parsing-utils.js"></script>
62 description('Test that setting and getting grid-template-columns and grid-template-rows works as expected');
64 debug("Test getting grid-template-columns and grid-template-rows set through CSS");
65 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "(first) 10px", "(first) 15px");
66 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53% (last)", "27% (last)");
67 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "(first) auto", "auto (last)");
68 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "(first) minmax(10%, 15px)", "minmax(20px, 50%) (last)");
69 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "(first nav) 10px (last)", "(first nav) 15px (last)");
70 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStringMultipleTimes"), "(first nav) 10% (nav) 15% (last)", "(first nav2) 25% (nav2) 75% (last)");
71 testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "(first) 10px (nav nav2) 50% (nav nav2) 50%", "100px (nav nav2) 25% (nav nav2) 25% (last)");
72 testGridDefinitionsValues(document.getElementById("gridWithEmptyParentheses"), "10px", "20px 50px");
75 debug("Test getting and setting grid-template-columns and grid-template-rows through JS");
76 testNonGridDefinitionsSetJSValues("(first) 18px", "66px (last)", "(first) 18px", "66px (last)", "(first) 18px", "66px (last)");
77 testNonGridDefinitionsSetJSValues("(first) 55%", "40% (last)", "(first) 55%", "40% (last)", "(first) 55%", "40% (last)");
78 testNonGridDefinitionsSetJSValues("(first) auto", "auto (last)", "(first) auto", "auto (last)", "(first) auto", "auto (last)");
79 testNonGridDefinitionsSetJSValues("(first) min-content", "min-content (last)", "(first) min-content", "min-content (last)", "(first) min-content", "min-content (last)");
80 testNonGridDefinitionsSetJSValues("(first) max-content", "max-content (last)", "(first) max-content", "max-content (last)", "(first) max-content", "max-content (last)");
81 testNonGridDefinitionsSetJSValues("(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)", "(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)", "(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)");
82 testNonGridDefinitionsSetJSValues("(first) minmax(22em, max-content)", "minmax(max-content, 5em) (last)", "(first) minmax(220px, max-content)", "minmax(max-content, 50px) (last)", "(first) minmax(22em, max-content)", "minmax(max-content, 5em) (last)", "(first) minmax(220px, max-content)", "minmax(max-content, 50px) (last)", "minmax(max-content, 50px) (last)");
83 testNonGridDefinitionsSetJSValues("(first) minmax(22em, min-content)", "minmax(min-content, 5em) (last)", "(first) minmax(220px, min-content)", "minmax(min-content, 50px) (last)", "(first) minmax(22em, min-content)", "minmax(min-content, 5em) (last)", "(first) minmax(220px, min-content)", "minmax(min-content, 50px) (last)", "minmax(min-content, 50px) (last)");
84 testNonGridDefinitionsSetJSValues("(first) minmax(min-content, max-content)", "minmax(max-content, min-content) (last)", "(first) minmax(min-content, max-content)", "minmax(max-content, min-content) (last)", "(first) minmax(min-content, max-content)", "minmax(max-content, min-content) (last)");
85 testNonGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-content) (last)", "(first nav) minmax(max-content, min-content) (last)", "(first nav) minmax(min-content, max-content) (last)", "(first nav) minmax(max-content, min-content) (last)", "(first nav) minmax(min-content, max-content) (last)", "(first nav) minmax(max-content, min-content) (last)");
86 testNonGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-content) (nav) auto (last)", "(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 15px) (last)", "(first nav) minmax(min-content, max-content) (nav) auto (last)", "(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 15px) (last)", "(first nav) minmax(min-content, max-content) (nav) auto (last)", "(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 15px) (last)");;
87 testNonGridDefinitionsSetJSValues("(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)");
90 debug("Test getting and setting invalid grid-template-columns and grid-template-rows through JS");
91 element = document.createElement("div");
92 document.body.appendChild(element);
93 element.style.gridTemplateColumns = "'foo'";
94 element.style.gridTemplateRows = "'bar";
95 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none");
96 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "none");
98 element = document.createElement("div");
99 document.body.appendChild(element);
100 element.style.gridTemplateColumns = "'foo' 'bar'";
101 element.style.gridTemplateRows = "'bar' 'foo'";
102 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none");
103 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "none");