diff options
Diffstat (limited to 'layout/style/test/test_grid_container_shorthands.html')
| -rw-r--r-- | layout/style/test/test_grid_container_shorthands.html | 271 |
1 files changed, 271 insertions, 0 deletions
diff --git a/layout/style/test/test_grid_container_shorthands.html b/layout/style/test/test_grid_container_shorthands.html new file mode 100644 index 0000000000..1b7a434208 --- /dev/null +++ b/layout/style/test/test_grid_container_shorthands.html @@ -0,0 +1,271 @@ +<!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> |