grid-template-shorthand-composition.html (2784B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Layout Test: grid-template-rows, grid-template-columns, and grid-template-areas properly set grid-template longhand</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 serializes properly when longhands are set."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 </head> 12 <body> 13 <script> 14 function testValidGridTemplate(valueGridTemplateRows, valueGridTemplateColumns, valueGridAreas, serializedGridTemplateValue) { 15 test(()=>{ 16 const root = document.children[0]; 17 root.style.gridTemplateRows = ""; 18 root.style.gridTemplateRows = valueGridTemplateRows; 19 root.style.gridTemplateColumns = ""; 20 root.style.gridTemplateColumns = valueGridTemplateColumns; 21 root.style.gridTemplateAreas = ""; 22 root.style.gridTemplateAreas = valueGridAreas; 23 assert_equals(root.style.gridTemplate, serializedGridTemplateValue); 24 }, `grid-template-rows: ${valueGridTemplateRows}, grid-template-columns: ${valueGridTemplateColumns}, and "grid-template-areas: ${valueGridAreas};" should be valid.`); 25 } 26 27 // `none` 28 testValidGridTemplate("none", "none", "none", "none"); 29 30 // `<'grid-template-rows'> / <'grid-template-columns'>` 31 testValidGridTemplate("auto", "auto", "none", "auto / auto"); 32 33 // `[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?` 34 testValidGridTemplate( 35 "[header-top] auto [header-bottom main-top] 1fr [main-bottom]", 36 "auto 1fr auto", 37 '"a a a" "b b b"', 38 '[header-top] "a a a" [header-bottom main-top] "b b b" 1fr [main-bottom] / auto 1fr auto', 39 ); 40 testValidGridTemplate( 41 "auto", 42 "auto", 43 '"a a a" "b b b"', 44 "", 45 ); 46 testValidGridTemplate( 47 "auto", 48 "auto auto", 49 '"a a a" "b b b"', 50 "", 51 ); 52 testValidGridTemplate( 53 "auto auto", 54 "auto", 55 '"a a a" "b b b"', 56 '"a a a" "b b b" / auto', 57 ); 58 testValidGridTemplate( 59 "auto auto", 60 "auto auto", 61 '"a a a" "b b b"', 62 '"a a a" "b b b" / auto auto', 63 ); 64 testValidGridTemplate( 65 "min-content", 66 "min-content", 67 '"a a a" "b b b" "c c c" "d d d"', 68 "", 69 ); 70 testValidGridTemplate( 71 "min-content", 72 "min-content auto auto auto", 73 '"a a a" "b b b" "c c c" "d d d"', 74 "", 75 ); 76 testValidGridTemplate( 77 "min-content auto auto auto", 78 "min-content", 79 '"a a a" "b b b" "c c c" "d d d"', 80 '"a a a" min-content "b b b" "c c c" "d d d" / min-content', 81 ); 82 testValidGridTemplate( 83 "min-content auto auto auto", 84 "min-content auto auto auto", 85 '"a a a" "b b b" "c c c" "d d d"', 86 '"a a a" min-content "b b b" "c c c" "d d d" / min-content auto auto auto', 87 ); 88 </script> 89 </body> 90 </html>