test_grid_item_shorthands.html (4363B)
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>