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