<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Test serialization of CSS 'grid' shorthand property</title>
<link rel="author" title="Simon Sapin" href="mailto:simon.sapin@exyr.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel='stylesheet' href='/resources/testharness.css'>
</head>
<body>
<script>
var isGridTemplateSubgridValueEnabled =
SpecialPowers.getBoolPref("layout.css.grid-template-subgrid-value.enabled");
var initial_values = {
gridTemplateAreas: "none",
gridTemplateRows: "none",
gridTemplateColumns: "none",
gridAutoFlow: "row",
gridAutoRows: "auto",
gridAutoColumns: "auto",
gridRowGap: "0px",
gridColumnGap: "0px",
};
// For various specified values of the grid-template subproperties,
// test the serialization of the shorthand.
var grid_template_test_cases = [
{
gridTemplateColumns: "100px",
shorthand: "none / 100px",
},
{
gridTemplateRows: "minmax(auto,1fr)",
shorthand: "1fr / none",
},
{
gridTemplateColumns: "minmax(auto,1fr)",
shorthand: "none / 1fr",
},
{
gridTemplateRows: "40px",
shorthand: "40px / none",
},
{
gridTemplateRows: "40px",
gridTemplateColumns: "subgrid",
shorthand: isGridTemplateSubgridValueEnabled ? "40px / subgrid" : "",
},
{
gridTemplateRows: "[foo] 40px [bar]",
gridTemplateColumns: "[baz] 100px [fizz]",
shorthand: "[foo] 40px [bar] / [baz] 100px [fizz]",
},
{
gridTemplateAreas: "\"a\"",
gridTemplateRows: "20px",
shorthand: "\"a\" 20px",
},
{
gridTemplateAreas: "\"a\"",
gridTemplateRows: "[foo] 20px [bar]",
shorthand: "[foo] \"a\" 20px [bar]",
},
{
gridTemplateAreas: "\"a\"",
gridTemplateRows: "[foo] repeat(1, 20px) [bar]",
shorthand: "[foo] \"a\" 20px [bar]",
},
{
gridTemplateAreas: "\"a a\"",
gridTemplateColumns: "repeat(2, 100px)",
gridTemplateRows: "auto",
shorthand: "\"a a\" auto / 100px 100px",
},
// Combinations of longhands that make the shorthand non-serializable:
{
gridTemplateAreas: "\"a\"",
gridTemplateRows: "20px 100px",
shorthand: "",
},
{
gridTemplateAreas: "\"a\" \"b\"",
gridTemplateRows: "20px",
shorthand: "",
},
{
gridTemplateAreas: "\"a\"",
gridTemplateRows: "subgrid",
shorthand: "",
},
{
gridTemplateAreas: "\"a\"",
gridTemplateRows: "subgrid [foo]",
shorthand: "",
},
{
gridTemplateAreas: "\"a\"",
gridTemplateRows: "20px",
gridTemplateColumns: "subgrid",
shorthand: "",
},
{
gridTemplateAreas: "\"a\"",
gridTemplateRows: "repeat(auto-fill, 20px)",
shorthand: "",
},
{
gridTemplateAreas: "\"a\"",
gridTemplateColumns: "repeat(auto-fill, 100px)",
gridTemplateRows: "auto",
shorthand: "",
},
];
grid_test_cases = grid_template_test_cases.concat([
{
gridAutoFlow: "row",
shorthand: "none / none",
},
{
gridAutoRows: "40px",
shorthand: "auto-flow 40px / none",
},
{
gridAutoRows: "minmax(auto,1fr)",
shorthand: "auto-flow 1fr / none",
},
{
gridAutoFlow: "column dense",
gridAutoRows: "minmax(min-content, max-content)",
shorthand: "",
},
{
gridAutoFlow: "column dense",
gridAutoColumns: "minmax(min-content, max-content)",
shorthand: "none / auto-flow dense minmax(min-content, max-content)",
},
{
gridAutoFlow: "column",
gridAutoColumns: "minmax(auto,1fr)",
shorthand: "none / auto-flow 1fr",
},
{
gridAutoFlow: "row dense",
gridAutoColumns: "minmax(min-content, 2fr)",
shorthand: "",
},
{
gridAutoFlow: "row dense",
gridAutoRows: "minmax(min-content, 2fr)",
shorthand: "auto-flow dense minmax(min-content, 2fr) / none",
},
{
gridAutoFlow: "row",
gridAutoRows: "40px",
gridTemplateColumns: "100px",
shorthand: "auto-flow 40px / 100px",
},
{
gridAutoFlow: "row",
gridRowGap: "0px",
shorthand: "none / none",
},
{
gridAutoFlow: "row",
gridRowGap: "1px",
shorthand: "",
},
{
gridAutoFlow: "row",
gridColumnGap: "1px",
shorthand: "",
},
]);
var grid_important_test_cases = [
{
"grid-auto-flow": "row",
"grid-row-gap": "0px",
shorthand: "",
},
{
"grid-auto-flow": "row",
"grid-column-gap": "1px",
shorthand: "",
},
];
function run_tests(test_cases, shorthand, subproperties) {
test_cases.forEach(function(test_case) {
test(function() {
var element = document.createElement('div');
document.body.appendChild(element);
subproperties.forEach(function(longhand) {
element.style[longhand] = test_case[longhand] ||
initial_values[longhand];
});
assert_equals(element.style[shorthand], test_case.shorthand);
}, "test shorthand serialization " + JSON.stringify(test_case));
});
}
function run_important_tests(test_cases, shorthand, subproperties) {
test_cases.forEach(function(test_case) {
test(function() {
var element = document.createElement('div');
document.body.appendChild(element);
subproperties.forEach(function(longhand) {
element.style.setProperty(longhand,
test_case[longhand] || initial_values[longhand],
"important");
});
assert_equals(element.style[shorthand], test_case.shorthand);
}, "test shorthand serialization " + JSON.stringify(test_case));
});
}
run_tests(grid_template_test_cases, "gridTemplate", [
"gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows"]);
run_tests(grid_test_cases, "grid", [
"gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows",
"gridAutoFlow", "gridAutoColumns", "gridAutoRows", "gridColumnGap", "gridRowGap"]);
run_important_tests(grid_important_test_cases, "grid", [
"grid-template-areas", "grid-template-columns", "grid-template-rows",
"grid-auto-flow", "grid-auto-columns", "grid-auto-rows", "grid-column-gap", "grid-row-gap"]);
</script>
</body>
</html>