1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/style/test/test_grid_shorthand_serialization.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,134 @@
1.4 +<!DOCTYPE html>
1.5 +<html>
1.6 +<head>
1.7 + <meta charset=utf-8>
1.8 + <title>Test serialization of CSS Grid shorthand properties</title>
1.9 + <link rel="author" title="Simon Sapin" href="mailto:simon.sapin@exyr.org">
1.10 + <script src="/resources/testharness.js"></script>
1.11 + <script src="/resources/testharnessreport.js"></script>
1.12 + <link rel='stylesheet' href='/resources/testharness.css'>
1.13 +</head>
1.14 +<body>
1.15 +
1.16 +<script>
1.17 +
1.18 +var initial_values = {
1.19 + gridTemplateAreas: "none",
1.20 + gridTemplateColumns: "none",
1.21 + gridTemplateRows: "none",
1.22 + gridAutoFlow: "none",
1.23 + gridAutoColumns: "auto",
1.24 + gridAutoRows: "auto",
1.25 +};
1.26 +
1.27 +// For various specified values of the grid-template subproperties,
1.28 +// test the serialization of the shorthand.
1.29 +var grid_template_test_cases = [
1.30 + {
1.31 + gridTemplateRows: "100px",
1.32 + shorthand: "none / 100px",
1.33 + },
1.34 + {
1.35 + gridTemplateColumns: "40px",
1.36 + shorthand: "40px / none",
1.37 + },
1.38 + {
1.39 + gridTemplateColumns: "40px",
1.40 + gridTemplateRows: "subgrid",
1.41 + shorthand: "40px / subgrid",
1.42 + },
1.43 + {
1.44 + gridTemplateColumns: "(foo) 40px (bar)",
1.45 + gridTemplateRows: "(baz) 100px (fizz)",
1.46 + shorthand: "(foo) 40px (bar) / (baz) 100px (fizz)",
1.47 + },
1.48 + {
1.49 + gridTemplateAreas: "\"a\"",
1.50 + gridTemplateRows: "20px",
1.51 + shorthand: "\"a\" 20px",
1.52 + },
1.53 + {
1.54 + gridTemplateAreas: "\"a\"",
1.55 + gridTemplateRows: "(foo) 20px (bar)",
1.56 + shorthand: "(foo) \"a\" 20px (bar)",
1.57 + },
1.58 + // Combinations of longhands that make the shorthand non-serializable:
1.59 + {
1.60 + gridTemplateAreas: "\"a\"",
1.61 + gridTemplateRows: "20px 100px",
1.62 + shorthand: "",
1.63 + },
1.64 + {
1.65 + gridTemplateAreas: "\"a\" \"b\"",
1.66 + gridTemplateRows: "20px",
1.67 + shorthand: "",
1.68 + },
1.69 + {
1.70 + gridTemplateAreas: "\"a\"",
1.71 + gridTemplateRows: "subgrid",
1.72 + shorthand: "",
1.73 + },
1.74 + {
1.75 + gridTemplateAreas: "\"a\"",
1.76 + gridTemplateRows: "subgrid (foo)",
1.77 + shorthand: "",
1.78 + },
1.79 + {
1.80 + gridTemplateAreas: "\"a\"",
1.81 + gridTemplateRows: "20px",
1.82 + gridTemplateColumns: "subgrid",
1.83 + shorthand: "",
1.84 + },
1.85 +];
1.86 +
1.87 +grid_test_cases = grid_template_test_cases.concat([
1.88 + {
1.89 + gridAutoFlow: "row",
1.90 + shorthand: "row auto / auto",
1.91 + },
1.92 + {
1.93 + gridAutoColumns: "40px",
1.94 + shorthand: "none 40px / auto",
1.95 + },
1.96 + {
1.97 + gridAutoFlow: "column dense",
1.98 + gridAutoColumns: "minmax(min-content, max-content)",
1.99 + shorthand: "column dense minmax(min-content, max-content) / auto",
1.100 + },
1.101 + {
1.102 + gridAutoFlow: "row dense",
1.103 + gridAutoRows: "minmax(min-content, 2fr)",
1.104 + shorthand: "row dense auto / minmax(min-content, 2fr)",
1.105 + },
1.106 + {
1.107 + gridAutoFlow: "row",
1.108 + gridAutoColumns: "40px",
1.109 + gridAutoRows: "100px",
1.110 + shorthand: "row 40px / 100px",
1.111 + },
1.112 +]);
1.113 +
1.114 +function run_tests(test_cases, shorthand, subproperties) {
1.115 + test_cases.forEach(function(test_case) {
1.116 + test(function() {
1.117 + var element = document.createElement('div');
1.118 + document.body.appendChild(element);
1.119 + subproperties.forEach(function(longhand) {
1.120 + element.style[longhand] = test_case[longhand] ||
1.121 + initial_values[longhand];
1.122 + });
1.123 + assert_equals(element.style[shorthand], test_case.shorthand);
1.124 + }, "test shorthand serialization " + JSON.stringify(test_case));
1.125 + });
1.126 +}
1.127 +
1.128 +run_tests(grid_template_test_cases, "gridTemplate", [
1.129 + "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows"]);
1.130 +
1.131 +run_tests(grid_test_cases, "grid", [
1.132 + "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows",
1.133 + "gridAutoFlow", "gridAutoColumns", "gridAutoRows"]);
1.134 +
1.135 +</script>
1.136 +</body>
1.137 +</html>
