1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/style/test/test_grid_item_shorthands.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,153 @@
1.4 +<!DOCTYPE html>
1.5 +<html>
1.6 +<head>
1.7 + <meta charset=utf-8>
1.8 + <title>Test parsing of grid item shorthands (grid-column, grid-row, grid-area)</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 +// For various specified values of the grid-column and grid-row shorthands,
1.19 +// test the computed values of the corresponding longhands.
1.20 +var grid_column_row_test_cases = [
1.21 + {
1.22 + specified: "3 / 4",
1.23 + expected_start: "3",
1.24 + expected_end: "4",
1.25 + },
1.26 + {
1.27 + specified: "foo / span bar",
1.28 + expected_start: "foo",
1.29 + expected_end: "span bar",
1.30 + },
1.31 + // http://dev.w3.org/csswg/css-grid/#placement-shorthands
1.32 + // "When the second value is omitted,
1.33 + // if the first value is a <custom-ident>,
1.34 + // the grid-row-end/grid-column-end longhand
1.35 + // is also set to that <custom-ident>;
1.36 + // otherwise, it is set to auto."
1.37 + {
1.38 + specified: "foo",
1.39 + expected_start: "foo",
1.40 + expected_end: "foo",
1.41 + },
1.42 + {
1.43 + specified: "7",
1.44 + expected_start: "7",
1.45 + expected_end: "auto",
1.46 + },
1.47 + {
1.48 + specified: "foo 7",
1.49 + expected_start: "7 foo",
1.50 + expected_end: "auto",
1.51 + },
1.52 + {
1.53 + specified: "span foo",
1.54 + expected_start: "span foo",
1.55 + expected_end: "auto",
1.56 + },
1.57 + {
1.58 + specified: "foo 7 span",
1.59 + expected_start: "span 7 foo",
1.60 + expected_end: "auto",
1.61 + },
1.62 + {
1.63 + specified: "7 span",
1.64 + expected_start: "span 7",
1.65 + expected_end: "auto",
1.66 + },
1.67 +];
1.68 +
1.69 +// For various specified values of the grid-area shorthand,
1.70 +// test the computed values of the corresponding longhands.
1.71 +var grid_area_test_cases = [
1.72 + {
1.73 + specified: "10 / 20 / 30 / 40",
1.74 + gridRowStart: "10",
1.75 + gridColumnStart: "20",
1.76 + gridRowEnd: "30",
1.77 + gridColumnEnd: "40",
1.78 + },
1.79 + {
1.80 + specified: "foo / bar / baz",
1.81 + gridRowStart: "foo",
1.82 + gridColumnStart: "bar",
1.83 + gridRowEnd: "baz",
1.84 + gridColumnEnd: "bar",
1.85 + },
1.86 + {
1.87 + specified: "foo / span bar / baz",
1.88 + gridRowStart: "foo",
1.89 + gridColumnStart: "span bar",
1.90 + gridRowEnd: "baz",
1.91 + gridColumnEnd: "auto",
1.92 + },
1.93 + {
1.94 + specified: "foo / bar",
1.95 + gridRowStart: "foo",
1.96 + gridColumnStart: "bar",
1.97 + gridRowEnd: "foo",
1.98 + gridColumnEnd: "bar",
1.99 + },
1.100 + {
1.101 + specified: "foo / 4",
1.102 + gridRowStart: "foo",
1.103 + gridColumnStart: "4",
1.104 + gridRowEnd: "foo",
1.105 + gridColumnEnd: "auto",
1.106 + },
1.107 + {
1.108 + specified: "foo",
1.109 + gridRowStart: "foo",
1.110 + gridColumnStart: "foo",
1.111 + gridRowEnd: "foo",
1.112 + gridColumnEnd: "foo",
1.113 + },
1.114 + {
1.115 + specified: "7",
1.116 + gridRowStart: "7",
1.117 + gridColumnStart: "auto",
1.118 + gridRowEnd: "auto",
1.119 + gridColumnEnd: "auto",
1.120 + },
1.121 +]
1.122 +
1.123 +grid_column_row_test_cases.forEach(function(test_case) {
1.124 + ["Column", "Row"].forEach(function(axis) {
1.125 + var shorthand = "grid" + axis;
1.126 + var start_longhand = "grid" + axis + "Start";
1.127 + var end_longhand = "grid" + axis + "End";
1.128 + test(function() {
1.129 + var element = document.createElement('div');
1.130 + document.body.appendChild(element);
1.131 + element.style[shorthand] = test_case.specified;
1.132 + var computed = window.getComputedStyle(element);
1.133 + assert_equals(computed[start_longhand], test_case.expected_start);
1.134 + assert_equals(computed[end_longhand], test_case.expected_end);
1.135 + }, "test parsing of '" + shorthand + ": " + test_case.specified + "'");
1.136 + });
1.137 +});
1.138 +
1.139 +grid_area_test_cases.forEach(function(test_case) {
1.140 + test(function() {
1.141 + var element = document.createElement('div');
1.142 + document.body.appendChild(element);
1.143 + element.style.gridArea = test_case.specified;
1.144 + var computed = window.getComputedStyle(element);
1.145 + [
1.146 + "gridRowStart", "gridColumnStart", "gridRowEnd", "gridColumnEnd"
1.147 + ].forEach(function(longhand) {
1.148 + assert_equals(computed[longhand], test_case[longhand], longhand);
1.149 + });
1.150 + }, "test parsing of 'grid-area: " + test_case.specified + "'");
1.151 +});
1.152 +
1.153 +</script>
1.154 +
1.155 +</body>
1.156 +</html>
