зеркало из https://github.com/mozilla/gecko-dev.git
225 строки
6.3 KiB
HTML
225 строки
6.3 KiB
HTML
<!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: "",
|
|
},
|
|
{
|
|
gridTemplateAreas: "\"a a\"",
|
|
gridTemplateColumns: "repeat(2, 100px)",
|
|
gridTemplateRows: "auto",
|
|
shorthand: "",
|
|
},
|
|
// 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",
|
|
},
|
|
{
|
|
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",
|
|
},
|
|
// Test that grid-gap properties don't affect serialization.
|
|
{
|
|
gridRowGap: "1px",
|
|
shorthand: "none",
|
|
},
|
|
{
|
|
gridColumnGap: "1px",
|
|
shorthand: "none",
|
|
},
|
|
]);
|
|
|
|
var grid_important_test_cases = [
|
|
{
|
|
"grid-auto-flow": "row",
|
|
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"]);
|
|
|
|
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"]);
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|