}
.singleSingleTrackRepeat {
- grid-definition-rows: repeat(1, 18px);
- grid-definition-columns: repeat(1, 15%);
+ grid-template-rows: repeat(1, 18px);
+ grid-template-columns: repeat(1, 15%);
}
.twoSingleTrackRepeat {
- grid-definition-rows: repeat(2, auto);
- grid-definition-columns: repeat(2, minmax(15px, 50%));
+ grid-template-rows: repeat(2, auto);
+ grid-template-columns: repeat(2, minmax(15px, 50%));
}
.twoDoubleTrackRepeat {
- grid-definition-rows: repeat(2, minmax(5px, 10px) auto);
- grid-definition-columns: repeat(2, auto minmax(100px, 120px));
+ grid-template-rows: repeat(2, minmax(5px, 10px) auto);
+ grid-template-columns: repeat(2, auto minmax(100px, 120px));
}
.twoDoubleTrackWithNamedGridLineRepeat {
- grid-definition-rows: repeat(2, 10px (start) auto (end));
- grid-definition-columns: repeat(2, auto (middle) 250px (end));
+ grid-template-rows: repeat(2, 10px (start) auto (end));
+ grid-template-columns: repeat(2, auto (middle) 250px (end));
}
.twoDoubleTrackWithTrailingNamedGridLineRepeat {
- grid-definition-rows: repeat(2, (before) 10px);
- grid-definition-columns: repeat(2, (before) auto);
+ grid-template-rows: repeat(2, (before) 10px);
+ grid-template-columns: repeat(2, (before) auto);
}
.trailingNamedGridLineRepeat {
- grid-definition-rows: repeat(1, 10px) (end);
- grid-definition-columns: repeat(1, 250px) (end);
+ grid-template-rows: repeat(1, 10px) (end);
+ grid-template-columns: repeat(1, 250px) (end);
}
.leadingNamedGridLineRepeat {
- grid-definition-rows: (start) repeat(2, 10px);
- grid-definition-columns: (start) repeat(2, 250px);
+ grid-template-rows: (start) repeat(2, 10px);
+ grid-template-columns: (start) repeat(2, 250px);
}
.mixRepeatAfterNonRepeat {
- grid-definition-rows: auto repeat(2, 10px);
- grid-definition-columns: (start) 140px repeat(2, 250px);
+ grid-template-rows: auto repeat(2, 10px);
+ grid-template-columns: (start) 140px repeat(2, 250px);
}
.mixNonRepeatAfterRepeat {
- grid-definition-rows: repeat(2, 10px) (end) auto;
- grid-definition-columns: repeat(2, 250px) 15% (last);
+ grid-template-rows: repeat(2, 10px) (end) auto;
+ grid-template-columns: repeat(2, 250px) 15% (last);
}
</style>
<script src="../../resources/js-test.js"></script>
<script src="resources/grid-definitions-parsing-utils.js"></script>
<script>
- description('Test that setting and getting grid-definition-columns and grid-definition-rows with repeat() works as expected');
+ description('Test that setting and getting grid-template-columns and grid-template-rows with repeat() works as expected');
- debug("Test getting grid-definition-columns and grid-definition-rows set through CSS");
+ 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");
function testInvalidSyntax(gridColumn) {
element = document.createElement("div");
document.body.appendChild(element);
- element.style.gridDefinitionColumns = gridColumn;
- shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "none");
+ element.style.gridTemplateColumns = gridColumn;
+ shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none");
document.body.removeChild(element);
}
testInvalidSyntax("repeat(");