products/sources/formale Sprachen/C/Firefox/layout/style/test/test_grid_container_shorthands.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 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:
"minmax(auto,1fr) / minmax(auto,1fr)" ,
gridTemplateRows:
"1fr" ,
gridTemplateColumns:
"1fr" ,
},
{
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:
"repeat(1, 20px)" ,
},
{
specified:
"40px/[a]repeat(1, 20px)" ,
gridTemplateRows:
"40px" ,
gridTemplateColumns:
"[a] repeat(1, 20px)" ,
},
{
specified:
"40px/repeat(1, [a] 20px)" ,
gridTemplateRows:
"40px" ,
gridTemplateColumns:
"repeat(1, [a] 20px)" ,
},
{
specified:
"40px/[a]repeat(2, [b]20px)" ,
gridTemplateRows:
"40px" ,
gridTemplateColumns:
"[a] repeat(2, [b] 20px)" ,
},
{
specified:
"40px/[a]repeat(2, 20px)" ,
gridTemplateRows:
"40px" ,
gridTemplateColumns:
"[a] repeat(2, 20px)" ,
},
{
specified:
"40px/repeat(2, [a] 20px)" ,
gridTemplateRows:
"40px" ,
gridTemplateColumns:
"repeat(2, [a] 20px)" ,
},
{
specified:
"40px/[a]repeat(2, [b]20px)" ,
gridTemplateRows:
"40px" ,
gridTemplateColumns:
"[a] repeat(2, [b] 20px)" ,
},
{
specified:
"40px/repeat(2, 20px[a])" ,
gridTemplateRows:
"40px" ,
gridTemplateColumns:
"repeat(2, 20px [a])" ,
},
{
specified:
"40px/repeat(2, 20px[a]) [b]" ,
gridTemplateRows:
"40px" ,
gridTemplateColumns:
"repeat(2, 20px [a]) [b]" ,
},
{
specified:
"40px/repeat(2, [a] 20px[b]) [c]" ,
gridTemplateRows:
"40px" ,
gridTemplateColumns:
"repeat(2, [a] 20px [b]) [c]" ,
},
{
specified:
"40px/[a] repeat(3, [b c] 20px [d] 100px [e f]) [g]" ,
gridTemplateRows:
"40px" ,
gridTemplateColumns:
"[a] repeat(3, [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 / subgrid" ,
gridTemplateColumns:
"subgrid" ,
gridTemplateRows:
"subgrid" ,
},
{
specified:
"subgrid [foo] / subgrid" ,
gridTemplateColumns:
"subgrid" ,
gridTemplateRows:
"subgrid [foo]" ,
},
{
specified:
"subgrid [foo] repeat(3, [] [a b] [c]) / subgrid" ,
gridTemplateColumns:
"subgrid" ,
gridTemplateRows:
"subgrid [foo] repeat(3, [] [a b] [c])" ,
},
{
// Test that the number of lines is clamped to kMaxLine = 10000.
//
https://drafts.csswg.org/css-grid/#overlarge-grids
specified:
"subgrid [foo] repeat(999999999, [a]) / subgrid" ,
gridTemplateColumns:
"subgrid" ,
gridTemplateRows:
"subgrid [foo] repeat(10000, [a])" ,
},
{
specified:
"subgrid [bar]/ subgrid [] [foo" ,
gridTemplateColumns:
"subgrid [] [foo]" ,
gridTemplateRows:
"subgrid [bar]" ,
},
{
specified:
"'fizz' repeat(1, 100px)" ,
},
{
specified:
"'fizz' repeat(auto-fill, 100px)" ,
},
{
specified:
"'fizz' / repeat(1, 100px)" ,
},
{
specified:
"'fizz' / repeat(auto-fill, 100px)" ,
},
];
grid_test_cases = grid_template_test_cases.concat([
{
specified:
"auto-flow / 0" ,
gridAutoFlow:
"row" ,
gridAutoRows:
"auto" ,
gridTemplateColumns:
"0px" ,
},
{
specified:
"auto-flow dense / 0" ,
gridAutoFlow:
"dense" ,
gridAutoRows:
"auto" ,
gridTemplateColumns:
"0px" ,
},
{
specified:
"auto-flow minmax(auto,1fr) / none" ,
gridAutoFlow:
"row" ,
gridAutoRows:
"1fr" ,
},
{
specified:
"auto-flow 40px / none" ,
gridAutoFlow:
"row" ,
gridAutoRows:
"40px" ,
},
{
specified:
"none / auto-flow 40px" ,
gridAutoFlow:
"column" ,
gridAutoRows:
"auto" ,
gridAutoColumns:
"40px" ,
},
{
specified:
"none / auto-flow minmax(auto,1fr)" ,
gridAutoFlow:
"column" ,
gridAutoRows:
"auto" ,
gridAutoColumns:
"1fr" ,
},
{
specified:
"0 / auto-flow dense auto" ,
gridAutoFlow:
"column dense" ,
gridAutoRows:
"auto" ,
gridAutoColumns:
"auto" ,
gridTemplateRows:
"0px" ,
},
{
specified:
"dense auto-flow minmax(min-content, 2fr) / 0" ,
gridAutoFlow:
"dense" ,
gridAutoRows:
"minmax(min-content, 2fr)" ,
gridAutoColumns:
"auto" ,
gridTemplateColumns:
"0px" ,
},
{
specified:
"auto-flow 40px / 100px" ,
gridAutoFlow:
"row" ,
gridAutoRows:
"40px" ,
gridAutoColumns:
"auto" ,
gridTemplateColumns:
"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 >
Messung V0.5 C=98 H=89 G=93
¤ Dauer der Verarbeitung: 0.1 Sekunden
(vorverarbeitet)
¤ *© Formatika GbR, Deutschland
