grid-shorthand.html (3904B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Layout Test: grid sets longhands</title> 6 <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-shorthand"> 7 <meta name="assert" content="grid supports the full grammar '<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>'."> 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 // <grid-template> 15 test_shorthand_value('grid', 'none', { 16 'grid-template-rows': 'none', 17 'grid-template-columns': 'none', 18 'grid-template-areas': 'none', 19 20 'grid-auto-rows': 'auto', 21 'grid-auto-columns': 'auto', 22 'grid-auto-flow': 'row' 23 }); 24 25 test_shorthand_value('grid', '10px / 20%', { 26 'grid-template-rows': '10px', 27 'grid-template-columns': '20%', 28 'grid-template-areas': 'none', 29 30 'grid-auto-rows': 'auto', 31 'grid-auto-columns': 'auto', 32 'grid-auto-flow': 'row' 33 }); 34 35 // This could theoretically be serialized as "auto-flow / 10px", 36 // but spec mandates the 'grid-template-*' form when the 37 // 'grid-auto-*' properties are all initial. 38 test_shorthand_value('grid', 'none / 10px', { 39 'grid-template-rows': 'none', 40 'grid-template-columns': '10px', 41 'grid-template-areas': 'none', 42 43 'grid-auto-rows': 'auto', 44 'grid-auto-columns': 'auto', 45 'grid-auto-flow': 'row' 46 }); 47 48 test_shorthand_value('grid', 'fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))', { 49 'grid-template-rows': 'fit-content(calc(-0.5em + 10px))', 50 'grid-template-columns': 'fit-content(calc(0.5em + 10px))', 51 'grid-template-areas': 'none', 52 53 'grid-auto-rows': 'auto', 54 'grid-auto-columns': 'auto', 55 'grid-auto-flow': 'row' 56 }); 57 58 test_shorthand_value('grid', 59 '[header-top] "a a a" [header-bottom]' + 60 ' [main-top] "b b b" 1fr [main-bottom]' + 61 ' / auto 1fr auto', { 62 'grid-template-rows': '[header-top] auto [header-bottom main-top] 1fr [main-bottom]', 63 'grid-template-columns': 'auto 1fr auto', 64 'grid-template-areas': '"a a a" "b b b"', 65 66 'grid-auto-rows': 'auto', 67 'grid-auto-columns': 'auto', 68 'grid-auto-flow': 'row' 69 }); 70 71 test_shorthand_value('grid', 72 ' "a a a"' + 73 ' "b b b" 1fr' + 74 '/ auto 1fr auto', { 75 'grid-template-rows': 'auto 1fr', 76 'grid-template-columns': 'auto 1fr auto', 77 'grid-template-areas': '"a a a" "b b b"', 78 79 'grid-auto-rows': 'auto', 80 'grid-auto-columns': 'auto', 81 'grid-auto-flow': 'row' 82 }); 83 84 test_shorthand_value('grid', 85 ' [] "a a a" []' + 86 ' [] "b b b" 1fr []' + 87 ' / [] auto 1fr [] auto []', { 88 'grid-template-rows': 'auto 1fr', 89 'grid-template-columns': 'auto 1fr auto', 90 'grid-template-areas': '"a a a" "b b b"', 91 92 'grid-auto-rows': 'auto', 93 'grid-auto-columns': 'auto', 94 'grid-auto-flow': 'row' 95 }); 96 97 // <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? 98 test_shorthand_value('grid', 99 '10px' + 100 ' / auto-flow dense' + 101 ' 20px', { 102 'grid-template-rows': '10px', 103 'grid-template-columns': 'none', 104 'grid-template-areas': 'none', 105 106 'grid-auto-rows': 'auto', 107 'grid-auto-columns': '20px', 108 'grid-auto-flow': 'column dense' 109 }); 110 111 // [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'> 112 test_shorthand_value('grid', 113 'auto-flow dense' + 114 ' 30px /' + 115 ' 40px', { 116 'grid-template-rows': 'none', 117 'grid-template-columns': '40px', 118 'grid-template-areas': 'none', 119 120 'grid-auto-rows': '30px', 121 'grid-auto-columns': 'auto', 122 'grid-auto-flow': 'dense' 123 }); 124 </script> 125 </body> 126 </html>