grid-area-shorthand.html (2415B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Layout Test: grid-area sets longhands</title> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-area"> 7 <meta name="assert" content="grid-area supports the full grammar '<grid-line> [ / <grid-line> ]{0,3}'."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/shorthand-testcommon.js"></script> 11 </head> 12 <body> 13 <script> 14 test_shorthand_value('grid-area', 'auto', { 15 'grid-row-start': 'auto', 16 'grid-column-start': 'auto', 17 'grid-row-end': 'auto', 18 'grid-column-end': 'auto' 19 }); 20 21 // <custom-ident> 22 test_shorthand_value('grid-area', '--a', { 23 'grid-row-start': '--a', 24 'grid-column-start': '--a', 25 'grid-row-end': '--a', 26 'grid-column-end': '--a' 27 }); 28 29 test_shorthand_value('grid-area', 'a / b', { 30 'grid-row-start': 'a', 31 'grid-column-start': 'b', 32 'grid-row-end': 'a', 33 'grid-column-end': 'b' 34 }); 35 36 test_shorthand_value('grid-area', 'a / b / c', { 37 'grid-row-start': 'a', 38 'grid-column-start': 'b', 39 'grid-row-end': 'c', 40 'grid-column-end': 'b' 41 }); 42 43 test_shorthand_value('grid-area', 'a / b / c / d', { 44 'grid-row-start': 'a', 45 'grid-column-start': 'b', 46 'grid-row-end': 'c', 47 'grid-column-end': 'd' 48 }); 49 50 // <integer> && <custom-ident>? 51 // span && [ <integer> || <custom-ident> ] 52 test_shorthand_value('grid-area', '+90 -a- / 2 i span', { 53 'grid-row-start': '90 -a-', 54 'grid-column-start': 'span 2 i', 55 'grid-row-end': 'auto', 56 'grid-column-end': 'auto' 57 }); 58 59 test_shorthand_value('grid-area', '1 / 2 / 3 / 4', { 60 'grid-row-start': '1', 61 'grid-column-start': '2', 62 'grid-row-end': '3', 63 'grid-column-end': '4' 64 }); 65 66 67 test_shorthand_value('grid-row', 'auto', { 68 'grid-row-start': 'auto', 69 'grid-row-end': 'auto' 70 }); 71 72 test_shorthand_value('grid-row', 'one / 2', { 73 'grid-row-start': 'one', 74 'grid-row-end': '2' 75 }); 76 77 test_shorthand_value('grid-row', '1 two / four 3', { 78 'grid-row-start': '1 two', 79 'grid-row-end': '3 four' 80 }); 81 82 83 test_shorthand_value('grid-column', '5 span', { 84 'grid-column-start': 'span 5', 85 'grid-column-end': 'auto' 86 }); 87 88 test_shorthand_value('grid-column', '1 / two', { 89 'grid-column-start': '1', 90 'grid-column-end': 'two' 91 }); 92 93 test_shorthand_value('grid-column', 'span 1 two / four 3 span', { 94 'grid-column-start': 'span two', 95 'grid-column-end': 'span 3 four' 96 }); 97 </script> 98 </body> 99 </html>