grid-template-shorthand.html (2753B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Layout Test: grid-template sets longhands</title> 6 <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> 7 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template"> 8 <meta name="assert" content="grid-template supports the full grammar 'none | [ <grid-template-rows> / <grid-template-columns> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?'."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/css/support/shorthand-testcommon.js"></script> 12 </head> 13 <body> 14 <script> 15 test_shorthand_value('grid-template', 'none', { 16 'grid-template-rows': 'none', 17 'grid-template-columns': 'none', 18 'grid-template-areas': 'none' 19 }); 20 21 // <grid-template-rows> / <grid-template-columns> 22 test_shorthand_value('grid-template', '10px / 20%', { 23 'grid-template-rows': '10px', 24 'grid-template-columns': '20%', 25 'grid-template-areas': 'none' 26 }); 27 28 test_shorthand_value('grid-template', 'fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))', { 29 'grid-template-rows': 'fit-content(calc(-0.5em + 10px))', 30 'grid-template-columns': 'fit-content(calc(0.5em + 10px))', 31 'grid-template-areas': 'none' 32 }); 33 34 // [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]? 35 test_shorthand_value('grid-template', 36 '[header-top] "a a a" [header-bottom]' + 37 ' [main-top] "b b b" 1fr [main-bottom]' + 38 ' / auto 1fr auto', { 39 'grid-template-rows': '[header-top] auto [header-bottom main-top] 1fr [main-bottom]', 40 'grid-template-columns': 'auto 1fr auto', 41 'grid-template-areas': '"a a a" "b b b"' 42 }); 43 44 test_shorthand_value('grid-template', 45 ' "a a a"' + 46 ' "b b b" 1fr' + 47 '/ auto 1fr auto', { 48 'grid-template-rows': 'auto 1fr', 49 'grid-template-columns': 'auto 1fr auto', 50 'grid-template-areas': '"a a a" "b b b"' 51 }); 52 53 test_shorthand_value('grid-template', 54 ' [] "a a a" []' + 55 ' [] "b b b" 1fr []' + 56 ' / [] auto 1fr [] auto []', { 57 'grid-template-rows': 'auto 1fr', 58 'grid-template-columns': 'auto 1fr auto', 59 'grid-template-areas': '"a a a" "b b b"' 60 }); 61 62 test_shorthand_value('grid-template', 63 ' [] "a a a" []' + 64 ' [] "b b b" 1fr []' + 65 ' "c c c" / [] auto 1fr [] auto []', { 66 'grid-template-rows': 'auto 1fr auto', 67 'grid-template-columns': 'auto 1fr auto', 68 'grid-template-areas': '"a a a" "b b b" "c c c"' 69 }); 70 </script> 71 </body> 72 </html>