1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
4 <link href="resources/grid.css" rel="stylesheet">
7 /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
26 .singleSingleTrackRepeat {
27 grid-template-rows: repeat(1, 18px);
28 grid-template-columns: repeat(1, 15%);
31 .twoSingleTrackRepeat {
32 grid-template-rows: repeat(2, auto);
33 grid-template-columns: repeat(2, minmax(15px, 50%));
36 .twoDoubleTrackRepeat {
37 grid-template-rows: repeat(2, minmax(5px, 10px) auto);
38 grid-template-columns: repeat(2, auto minmax(100px, 120px));
41 .twoDoubleTrackWithNamedGridLineRepeat {
42 grid-template-rows: repeat(2, 10px (start) auto (end));
43 grid-template-columns: repeat(2, auto (middle) 250px (end));
46 .twoDoubleTrackWithTrailingNamedGridLineRepeat {
47 grid-template-rows: repeat(2, (before) 10px);
48 grid-template-columns: repeat(2, (before) auto);
51 .trailingNamedGridLineRepeat {
52 grid-template-rows: repeat(1, 10px) (end);
53 grid-template-columns: repeat(1, 250px) (end);
56 .leadingNamedGridLineRepeat {
57 grid-template-rows: (start) repeat(2, 10px);
58 grid-template-columns: (start) repeat(2, 250px);
61 .mixRepeatAfterNonRepeat {
62 grid-template-rows: auto repeat(2, 10px);
63 grid-template-columns: (start) 140px repeat(2, 250px);
66 .mixNonRepeatAfterRepeat {
67 grid-template-rows: repeat(2, 10px) (end) auto;
68 grid-template-columns: repeat(2, 250px) 15% (last);
71 <script src="../../resources/js-test.js"></script>
74 <div class="grid singleSingleTrackRepeat" id="singleSingleTrackRepeatWithSize"></div>
75 <div class="indefiniteSizeGrid singleSingleTrackRepeat" id="singleSingleTrackRepeatWithoutSize"></div>
76 <div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeat"></div>
77 <div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeatWithChildren">
78 <div class="gridItem"></div>
79 <div class="gridItem2"></div>
81 <div class="grid twoDoubleTrackRepeat" id="twoDoubleTrackRepeat">
82 <div class="gridItem"></div>
83 <div class="gridItem2"></div>
85 <div class="grid twoDoubleTrackWithNamedGridLineRepeat" id="twoDoubleTrackWithNamedGridLineRepeat">
86 <div class="gridItem"></div>
87 <div class="gridItem2"></div>
89 <div class="grid twoDoubleTrackWithTrailingNamedGridLineRepeat" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div>
90 <div class="grid trailingNamedGridLineRepeat" id="trailingNamedGridLineRepeat"></div>
91 <div class="grid leadingNamedGridLineRepeat" id="leadingNamedGridLineRepeat"></div>
92 <div class="grid mixRepeatAfterNonRepeat" id="mixRepeatAfterNonRepeat">
93 <div class="gridItem"></div>
95 <div class="grid mixNonRepeatAfterRepeat" id="mixNonRepeatAfterRepeat"></div>
97 <script src="resources/grid-definitions-parsing-utils.js"></script>
99 description('Test that setting and getting grid-template-columns and grid-template-rows with repeat() works as expected');
101 debug("Test getting grid-template-columns and grid-template-rows set through CSS");
102 testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWithSize"), "120px", "18px");
103 testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWithoutSize"), "0px", "18px");
104 testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeat"), "400px 400px", "0px 0px");
105 testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeatWithChildren"), "400px 400px", "44px 77px");
106 testGridDefinitionsValues(document.getElementById("twoDoubleTrackRepeat"), "33px 120px 0px 120px", "10px 77px 10px 0px");
107 testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithNamedGridLineRepeat"), "33px (middle) 250px (end) 0px (middle) 250px (end)", "10px (start) 77px (end) 10px (start) 0px (end)");
108 testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithTrailingNamedGridLineRepeat"), "(before) 0px (before) 0px", "(before) 10px (before) 10px");
109 testGridDefinitionsValues(document.getElementById("trailingNamedGridLineRepeat"), "250px (end)", "10px (end)");
110 testGridDefinitionsValues(document.getElementById("leadingNamedGridLineRepeat"), "(start) 250px 250px", "(start) 10px 10px");
111 testGridDefinitionsValues(document.getElementById("mixRepeatAfterNonRepeat"), "(start) 140px 250px 250px", "44px 10px 10px");
112 testGridDefinitionsValues(document.getElementById("mixNonRepeatAfterRepeat"), "250px 250px 120px (last)", "10px 10px (end) 0px");
115 debug("Test invalid repeat syntax.");
116 function testInvalidSyntax(gridColumn) {
117 element = document.createElement("div");
118 document.body.appendChild(element);
119 element.style.gridTemplateColumns = gridColumn;
120 shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none");
121 document.body.removeChild(element);
123 testInvalidSyntax("repeat(");
124 testInvalidSyntax("repeat()");
125 testInvalidSyntax("repeat(3 / auto)");
126 testInvalidSyntax("repeat(3 , ,)");
127 testInvalidSyntax("repeat(0, 15px)");
128 testInvalidSyntax("repeat(-1, auto)");
129 testInvalidSyntax("repeat(1, (foo))");
130 testInvalidSyntax("repeat(1, )");
131 testInvalidSyntax("repeat(1)");
132 // Nesting is no allowed.
133 testInvalidSyntax("repeat(2, repeat(1, auto))");