gecko-dev/layout/style/test/test_grid_shorthand_seriali...

135 строки
3.7 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Test serialization of CSS Grid shorthand properties</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 initial_values = {
gridTemplateAreas: "none",
gridTemplateColumns: "none",
gridTemplateRows: "none",
gridAutoFlow: "row",
gridAutoColumns: "auto",
gridAutoRows: "auto",
};
// For various specified values of the grid-template subproperties,
// test the serialization of the shorthand.
var grid_template_test_cases = [
{
gridTemplateRows: "100px",
shorthand: "none / 100px",
},
{
gridTemplateColumns: "40px",
shorthand: "40px / none",
},
{
gridTemplateColumns: "40px",
gridTemplateRows: "subgrid",
shorthand: "40px / subgrid",
},
{
gridTemplateColumns: "[foo] 40px [bar]",
gridTemplateRows: "[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]",
},
// 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: "",
},
];
grid_test_cases = grid_template_test_cases.concat([
{
gridAutoFlow: "row",
shorthand: "row auto / auto",
},
{
gridAutoColumns: "40px",
shorthand: "row 40px / auto",
},
{
gridAutoFlow: "column dense",
gridAutoColumns: "minmax(min-content, max-content)",
shorthand: "column dense minmax(min-content, max-content) / auto",
},
{
gridAutoFlow: "row dense",
gridAutoRows: "minmax(min-content, 2fr)",
shorthand: "row dense auto / minmax(min-content, 2fr)",
},
{
gridAutoFlow: "row",
gridAutoColumns: "40px",
gridAutoRows: "100px",
shorthand: "row 40px / 100px",
},
]);
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));
});
}
run_tests(grid_template_test_cases, "gridTemplate", [
"gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows"]);
run_tests(grid_test_cases, "grid", [
"gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows",
"gridAutoFlow", "gridAutoColumns", "gridAutoRows"]);
</script>
</body>
</html>