| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <style> |
| .grid { |
| /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */ |
| width: 800px; |
| height: 600px; |
| } |
| |
| .gridItem { |
| grid-column: 1; |
| grid-row: 1; |
| width: 33px; |
| height: 44px; |
| } |
| |
| .gridItem2 { |
| grid-column: 2; |
| grid-row: 2; |
| width: 66px; |
| height: 77px; |
| } |
| |
| .singleSingleTrackRepeat { |
| grid-template-rows: repeat(1, 18px); |
| grid-template-columns: repeat(1, 15%); |
| } |
| |
| .twoSingleTrackRepeat { |
| grid-template-rows: repeat(2, auto); |
| grid-template-columns: repeat(2, minmax(15px, 50%)); |
| } |
| |
| .twoDoubleTrackRepeat { |
| grid-template-rows: repeat(2, minmax(5px, 10px) auto); |
| grid-template-columns: repeat(2, auto minmax(100px, 120px)); |
| } |
| |
| .twoDoubleTrackWithNamedGridLineRepeat { |
| grid-template-rows: repeat(2, 10px (start) auto (end)); |
| grid-template-columns: repeat(2, auto (middle) 250px (end)); |
| } |
| |
| .twoDoubleTrackWithTrailingNamedGridLineRepeat { |
| grid-template-rows: repeat(2, (before) 10px); |
| grid-template-columns: repeat(2, (before) auto); |
| } |
| |
| .trailingNamedGridLineRepeat { |
| grid-template-rows: repeat(1, 10px) (end); |
| grid-template-columns: repeat(1, 250px) (end); |
| } |
| |
| .leadingNamedGridLineRepeat { |
| grid-template-rows: (start) repeat(2, 10px); |
| grid-template-columns: (start) repeat(2, 250px); |
| } |
| |
| .mixRepeatAfterNonRepeat { |
| grid-template-rows: auto repeat(2, 10px); |
| grid-template-columns: (start) 140px repeat(2, 250px); |
| } |
| |
| .mixNonRepeatAfterRepeat { |
| grid-template-rows: repeat(2, 10px) (end) auto; |
| grid-template-columns: repeat(2, 250px) 15% (last); |
| } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <div class="grid singleSingleTrackRepeat" id="singleSingleTrackRepeatWithSize"></div> |
| <div class="indefiniteSizeGrid singleSingleTrackRepeat" id="singleSingleTrackRepeatWithoutSize"></div> |
| <div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeat"></div> |
| <div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeatWithChildren"> |
| <div class="gridItem"></div> |
| <div class="gridItem2"></div> |
| </div> |
| <div class="grid twoDoubleTrackRepeat" id="twoDoubleTrackRepeat"> |
| <div class="gridItem"></div> |
| <div class="gridItem2"></div> |
| </div> |
| <div class="grid twoDoubleTrackWithNamedGridLineRepeat" id="twoDoubleTrackWithNamedGridLineRepeat"> |
| <div class="gridItem"></div> |
| <div class="gridItem2"></div> |
| </div> |
| <div class="grid twoDoubleTrackWithTrailingNamedGridLineRepeat" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div> |
| <div class="grid trailingNamedGridLineRepeat" id="trailingNamedGridLineRepeat"></div> |
| <div class="grid leadingNamedGridLineRepeat" id="leadingNamedGridLineRepeat"></div> |
| <div class="grid mixRepeatAfterNonRepeat" id="mixRepeatAfterNonRepeat"> |
| <div class="gridItem"></div> |
| </div> |
| <div class="grid mixNonRepeatAfterRepeat" id="mixNonRepeatAfterRepeat"></div> |
| |
| <script src="resources/grid-definitions-parsing-utils.js"></script> |
| <script> |
| description('Test that setting and getting grid-template-columns and grid-template-rows with repeat() works as expected'); |
| |
| debug("Test getting grid-template-columns and grid-template-rows set through CSS"); |
| testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWithSize"), "120px", "18px"); |
| testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWithoutSize"), "0px", "18px"); |
| testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeat"), "400px 400px", "0px 0px"); |
| testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeatWithChildren"), "400px 400px", "44px 77px"); |
| testGridDefinitionsValues(document.getElementById("twoDoubleTrackRepeat"), "33px 120px 0px 120px", "10px 77px 10px 0px"); |
| testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithNamedGridLineRepeat"), "33px (middle) 250px (end) 0px (middle) 250px (end)", "10px (start) 77px (end) 10px (start) 0px (end)"); |
| testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithTrailingNamedGridLineRepeat"), "(before) 0px (before) 0px", "(before) 10px (before) 10px"); |
| testGridDefinitionsValues(document.getElementById("trailingNamedGridLineRepeat"), "250px (end)", "10px (end)"); |
| testGridDefinitionsValues(document.getElementById("leadingNamedGridLineRepeat"), "(start) 250px 250px", "(start) 10px 10px"); |
| testGridDefinitionsValues(document.getElementById("mixRepeatAfterNonRepeat"), "(start) 140px 250px 250px", "44px 10px 10px"); |
| testGridDefinitionsValues(document.getElementById("mixNonRepeatAfterRepeat"), "250px 250px 120px (last)", "10px 10px (end) 0px"); |
| |
| debug(""); |
| debug("Test invalid repeat syntax."); |
| function testInvalidSyntax(gridColumn) { |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| element.style.gridTemplateColumns = gridColumn; |
| shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none"); |
| document.body.removeChild(element); |
| } |
| testInvalidSyntax("repeat("); |
| testInvalidSyntax("repeat()"); |
| testInvalidSyntax("repeat(3 / auto)"); |
| testInvalidSyntax("repeat(3 , ,)"); |
| testInvalidSyntax("repeat(0, 15px)"); |
| testInvalidSyntax("repeat(-1, auto)"); |
| testInvalidSyntax("repeat(1, (foo))"); |
| testInvalidSyntax("repeat(1, )"); |
| testInvalidSyntax("repeat(1)"); |
| // Nesting is no allowed. |
| testInvalidSyntax("repeat(2, repeat(1, auto))"); |
| </script> |
| </body> |
| </html> |
