layout/style/test/test_grid_item_shorthands.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta charset=utf-8>
   5   <title>Test parsing of grid item shorthands (grid-column, grid-row, grid-area)</title>
   6   <link rel="author" title="Simon Sapin" href="mailto:simon.sapin@exyr.org">
   7   <script src="/resources/testharness.js"></script>
   8   <script src="/resources/testharnessreport.js"></script>
   9   <link rel='stylesheet' href='/resources/testharness.css'>
  10 </head>
  11 <body>
  12
  13 <script>
  14
  15 // For various specified values of the grid-column and grid-row shorthands,
  16 // test the computed values of the corresponding longhands.
  17 var grid_column_row_test_cases = [
  18     {
  19         specified: "3 / 4",
  20         expected_start: "3",
  21         expected_end: "4",
  22     },
  23     {
  24         specified: "foo / span bar",
  25         expected_start: "foo",
  26         expected_end: "span bar",
  27     },
  28     // http://dev.w3.org/csswg/css-grid/#placement-shorthands
  29     // "When the second value is omitted,
  30     //  if the first value is a <custom-ident>,
  31     //  the grid-row-end/grid-column-end longhand
  32     //  is also set to that <custom-ident>;
  33     //  otherwise, it is set to auto."
  34     {
  35         specified: "foo",
  36         expected_start: "foo",
  37         expected_end: "foo",
  38     },
  39     {
  40         specified: "7",
  41         expected_start: "7",
  42         expected_end: "auto",
  43     },
  44     {
  45         specified: "foo 7",
  46         expected_start: "7 foo",
  47         expected_end: "auto",
  48     },
  49     {
  50         specified: "span foo",
  51         expected_start: "span foo",
  52         expected_end: "auto",
  53     },
  54     {
  55         specified: "foo 7 span",
  56         expected_start: "span 7 foo",
  57         expected_end: "auto",
  58     },
  59     {
  60         specified: "7 span",
  61         expected_start: "span 7",
  62         expected_end: "auto",
  63     },
  64 ];
  65
  66 // For various specified values of the grid-area shorthand,
  67 // test the computed values of the corresponding longhands.
  68 var grid_area_test_cases = [
  69     {
  70         specified: "10 / 20 / 30 / 40",
  71         gridRowStart: "10",
  72         gridColumnStart: "20",
  73         gridRowEnd: "30",
  74         gridColumnEnd: "40",
  75     },
  76     {
  77         specified: "foo / bar / baz",
  78         gridRowStart: "foo",
  79         gridColumnStart: "bar",
  80         gridRowEnd: "baz",
  81         gridColumnEnd: "bar",
  82     },
  83     {
  84         specified: "foo / span bar / baz",
  85         gridRowStart: "foo",
  86         gridColumnStart: "span bar",
  87         gridRowEnd: "baz",
  88         gridColumnEnd: "auto",
  89     },
  90     {
  91         specified: "foo / bar",
  92         gridRowStart: "foo",
  93         gridColumnStart: "bar",
  94         gridRowEnd: "foo",
  95         gridColumnEnd: "bar",
  96     },
  97     {
  98         specified: "foo / 4",
  99         gridRowStart: "foo",
 100         gridColumnStart: "4",
 101         gridRowEnd: "foo",
 102         gridColumnEnd: "auto",
 103     },
 104     {
 105         specified: "foo",
 106         gridRowStart: "foo",
 107         gridColumnStart: "foo",
 108         gridRowEnd: "foo",
 109         gridColumnEnd: "foo",
 110     },
 111     {
 112         specified: "7",
 113         gridRowStart: "7",
 114         gridColumnStart: "auto",
 115         gridRowEnd: "auto",
 116         gridColumnEnd: "auto",
 117     },
 118 ]
 119
 120 grid_column_row_test_cases.forEach(function(test_case) {
 121     ["Column", "Row"].forEach(function(axis) {
 122         var shorthand = "grid" + axis;
 123         var start_longhand = "grid" + axis + "Start";
 124         var end_longhand = "grid" + axis + "End";
 125         test(function() {
 126             var element = document.createElement('div');
 127             document.body.appendChild(element);
 128             element.style[shorthand] = test_case.specified;
 129             var computed = window.getComputedStyle(element);
 130             assert_equals(computed[start_longhand], test_case.expected_start);
 131             assert_equals(computed[end_longhand], test_case.expected_end);
 132         }, "test parsing of '" + shorthand + ": " + test_case.specified + "'");
 133     });
 134 });
 135
 136 grid_area_test_cases.forEach(function(test_case) {
 137     test(function() {
 138         var element = document.createElement('div');
 139         document.body.appendChild(element);
 140         element.style.gridArea = test_case.specified;
 141         var computed = window.getComputedStyle(element);
 142         [
 143             "gridRowStart", "gridColumnStart", "gridRowEnd", "gridColumnEnd"
 144         ].forEach(function(longhand) {
 145             assert_equals(computed[longhand], test_case[longhand], longhand);
 146         });
 147     }, "test parsing of 'grid-area: " + test_case.specified + "'");
 148 });
 149
 150 </script>
 151
 152 </body>
 153 </html>