summaryrefslogtreecommitdiffstats
path: root/layout/style/test/test_grid_container_shorthands.html
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /layout/style/test/test_grid_container_shorthands.html
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/style/test/test_grid_container_shorthands.html')
-rw-r--r--layout/style/test/test_grid_container_shorthands.html282
1 files changed, 282 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 000000000..741404bc4
--- /dev/null
+++ b/layout/style/test/test_grid_container_shorthands.html
@@ -0,0 +1,282 @@
+<!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: "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: "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",
+ },
+ {
+ 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: "row 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: "row 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>
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-10 20:43:08 +0000