зеркало из https://github.com/mozilla/gecko-dev.git
245 строки
7.5 KiB
HTML
245 строки
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset=utf-8>
|
|
<title>Test parsing of grid container shorthands (grid-template, grid)</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",
|
|
// Computed value for 'auto'
|
|
gridAutoRows: "auto",
|
|
gridAutoColumns: "auto",
|
|
};
|
|
|
|
// For various specified values of the grid-template shorthand,
|
|
// test the computed values of the corresponding longhands.
|
|
var grid_template_test_cases = [
|
|
{
|
|
specified: "none",
|
|
},
|
|
{
|
|
specified: "40px / 100px",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "100px",
|
|
},
|
|
{
|
|
specified: "[foo] 40px [bar] / [baz] 100px [fizz]",
|
|
gridTemplateRows: "[foo] 40px [bar]",
|
|
gridTemplateColumns: "[baz] 100px [fizz]",
|
|
},
|
|
{
|
|
specified: " none/100px",
|
|
gridTemplateRows: "none",
|
|
gridTemplateColumns: "100px",
|
|
},
|
|
{
|
|
specified: "40px/none",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "none",
|
|
},
|
|
{
|
|
specified: "40px/repeat(1, 20px)",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "20px",
|
|
},
|
|
{
|
|
specified: "40px/[a]repeat(1, 20px)",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "[a] 20px",
|
|
},
|
|
{
|
|
specified: "40px/repeat(1, [a] 20px)",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "[a] 20px",
|
|
},
|
|
{
|
|
specified: "40px/[a]repeat(2, [b]20px)",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "[a b] 20px [b] 20px",
|
|
},
|
|
{
|
|
specified: "40px/[a]repeat(2, 20px)",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "[a] 20px 20px",
|
|
},
|
|
{
|
|
specified: "40px/repeat(2, [a] 20px)",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "[a] 20px [a] 20px",
|
|
},
|
|
{
|
|
specified: "40px/[a]repeat(2, [b]20px)",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "[a b] 20px [b] 20px",
|
|
},
|
|
{
|
|
specified: "40px/repeat(2, 20px[a])",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "20px [a] 20px [a]",
|
|
},
|
|
{
|
|
specified: "40px/repeat(2, 20px[a]) [b]",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "20px [a] 20px [a b]",
|
|
},
|
|
{
|
|
specified: "40px/repeat(2, [a] 20px[b]) [c]",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "[a] 20px [b a] 20px [b c]",
|
|
},
|
|
{
|
|
specified: "40px/[a] repeat(3, [b c] 20px [d] 100px [e f]) [g]",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "[a b c] 20px [d] 100px [e f b c] 20px [d] 100px [e f b c] 20px [d] 100px [e f g]",
|
|
},
|
|
{
|
|
specified: "'fizz'",
|
|
gridTemplateAreas: "\"fizz\"",
|
|
gridTemplateRows: "auto",
|
|
},
|
|
{
|
|
specified: "[bar] 'fizz'",
|
|
gridTemplateAreas: "\"fizz\"",
|
|
gridTemplateRows: "[bar] auto",
|
|
},
|
|
{
|
|
specified: "'fizz' / [foo] 40px",
|
|
gridTemplateAreas: "\"fizz\"",
|
|
gridTemplateRows: "auto",
|
|
gridTemplateColumns: "[foo] 40px",
|
|
},
|
|
{
|
|
specified: "[bar] 'fizz' / [foo] 40px",
|
|
gridTemplateAreas: "\"fizz\"",
|
|
gridTemplateRows: "[bar] auto",
|
|
gridTemplateColumns: "[foo] 40px",
|
|
},
|
|
{
|
|
specified: "'fizz' 100px / [foo] 40px",
|
|
gridTemplateAreas: "\"fizz\"",
|
|
gridTemplateRows: "100px",
|
|
gridTemplateColumns: "[foo] 40px",
|
|
},
|
|
{
|
|
specified: "[bar] 'fizz' 100px [buzz] \n [a] '.' 200px [b] / [foo] 40px",
|
|
gridTemplateAreas: "\"fizz\" \".\"",
|
|
gridTemplateRows: "[bar] 100px [buzz a] 200px [b]",
|
|
gridTemplateColumns: "[foo] 40px",
|
|
},
|
|
{
|
|
specified: "subgrid",
|
|
gridTemplateColumns: isGridTemplateSubgridValueEnabled ? "subgrid" : "none",
|
|
gridTemplateRows: isGridTemplateSubgridValueEnabled ? "subgrid" : "none",
|
|
},
|
|
{
|
|
specified: "subgrid / subgrid",
|
|
gridTemplateColumns: isGridTemplateSubgridValueEnabled ? "subgrid" : "none",
|
|
gridTemplateRows: isGridTemplateSubgridValueEnabled ? "subgrid" : "none",
|
|
},
|
|
{
|
|
specified: "subgrid [foo] / subgrid",
|
|
gridTemplateColumns: isGridTemplateSubgridValueEnabled ? "subgrid" : "none",
|
|
gridTemplateRows: isGridTemplateSubgridValueEnabled ? "subgrid [foo]" : "none",
|
|
},
|
|
{
|
|
specified: "subgrid [foo] repeat(3, [] [a b] [c]) / subgrid",
|
|
gridTemplateColumns: isGridTemplateSubgridValueEnabled ? "subgrid" : "none",
|
|
gridTemplateRows: isGridTemplateSubgridValueEnabled ?
|
|
"subgrid [foo] [] [a b] [c] [] [a b] [c] [] [a b] [c]" : "none",
|
|
},
|
|
{
|
|
// Test that the number of lines is clamped to kMaxLine = 10000.
|
|
specified: "subgrid [foo] repeat(999999999, [a]) / subgrid",
|
|
gridTemplateColumns: isGridTemplateSubgridValueEnabled ? "subgrid" : "none",
|
|
// Array(n).join(s) is a hack for the non-standard s.repeat(n - 1) .
|
|
// [foo] + 9999 [a] gives us 10000 lines.
|
|
gridTemplateRows: isGridTemplateSubgridValueEnabled ?
|
|
"subgrid [foo]" + Array(10000).join(" [a]") : "none",
|
|
},
|
|
{
|
|
specified: "subgrid [bar]/ subgrid [] [foo",
|
|
gridTemplateColumns: isGridTemplateSubgridValueEnabled ? "subgrid [] [foo]" : "none",
|
|
gridTemplateRows: isGridTemplateSubgridValueEnabled ? "subgrid [bar]" : "none",
|
|
},
|
|
];
|
|
|
|
grid_test_cases = grid_template_test_cases.concat([
|
|
{
|
|
specified: "row",
|
|
gridAutoFlow: "row",
|
|
},
|
|
{
|
|
specified: "dense",
|
|
gridAutoFlow: "row dense",
|
|
},
|
|
{
|
|
specified: "row 40px",
|
|
gridAutoFlow: "row",
|
|
gridAutoRows: "40px",
|
|
},
|
|
{
|
|
specified: "column 40px",
|
|
gridAutoFlow: "column",
|
|
gridAutoRows: "40px",
|
|
},
|
|
{
|
|
specified: "column dense auto",
|
|
gridAutoFlow: "column dense",
|
|
gridAutoRows: "auto",
|
|
},
|
|
{
|
|
specified: "dense row minmax(min-content, 2fr)",
|
|
gridAutoFlow: "row dense",
|
|
gridAutoRows: "minmax(min-content, 2fr)",
|
|
},
|
|
{
|
|
specified: "row 40px / 100px",
|
|
gridAutoFlow: "row",
|
|
gridAutoRows: "40px",
|
|
gridAutoColumns: "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);
|
|
element.style[shorthand] = test_case.specified;
|
|
var computed = window.getComputedStyle(element);
|
|
subproperties.forEach(function(longhand) {
|
|
assert_equals(
|
|
computed[longhand],
|
|
test_case[longhand] || initial_values[longhand],
|
|
longhand
|
|
);
|
|
});
|
|
}, "test parsing of 'grid-template: " + test_case.specified + "'");
|
|
});
|
|
}
|
|
|
|
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>
|