grid-template-shorthand-invalid.html (4916B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Layout Test: parsing grid-template with invalid values</title> 6 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 7 <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> 8 <link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid-template"> 9 <meta name="assert" content="grid-template supports only the grammar `none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?`."> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="/css/support/parsing-testcommon.js"></script> 13 </head> 14 <body> 15 <script> 16 17 test_invalid_value("grid-template", 'auto'); 18 test_invalid_value("grid-template", 'none none'); 19 test_invalid_value("grid-template", 'none []'); 20 test_invalid_value("grid-template", '10px'); 21 test_invalid_value("grid-template", '20%'); 22 test_invalid_value("grid-template", '5fr'); 23 test_invalid_value("grid-template", '[a]'); 24 test_invalid_value("grid-template", '[a] 10px'); 25 test_invalid_value("grid-template", '[a] repeat(2, 10px)'); 26 test_invalid_value("grid-template", '[a] repeat(auto-fill, 10px)'); 27 test_invalid_value("grid-template", '[a] repeat(auto-fit, 10px)'); 28 test_invalid_value("grid-template", '[a] 10px []'); 29 test_invalid_value("grid-template", '[a] repeat(2, 10px) []'); 30 test_invalid_value("grid-template", '[a] repeat(auto-fill, 10px) []'); 31 test_invalid_value("grid-template", '[a] repeat(auto-fit, 10px) []'); 32 test_invalid_value("grid-template", '[]'); 33 test_invalid_value("grid-template", '10px "a"'); 34 test_invalid_value("grid-template", 'repeat(2, 10px) "a"'); 35 test_invalid_value("grid-template", 'repeat(auto-fill, 10px) "a"'); 36 test_invalid_value("grid-template", 'repeat(auto-fit, 10px) "a"'); 37 test_invalid_value("grid-template", '[] 10px "a"'); 38 test_invalid_value("grid-template", '[] repeat(2, 10px) "a"'); 39 test_invalid_value("grid-template", '[] repeat(auto-fill, 10px) "a"'); 40 test_invalid_value("grid-template", '[] repeat(auto-fit, 10px) "a"'); 41 test_invalid_value("grid-template", '10px [] "a"'); 42 test_invalid_value("grid-template", 'repeat(2, 10px) [] "a"'); 43 test_invalid_value("grid-template", 'repeat(auto-fill, 10px) [] "a"'); 44 test_invalid_value("grid-template", 'repeat(auto-fit, 10px) [] "a"'); 45 test_invalid_value("grid-template", '[] [] "a"'); 46 test_invalid_value("grid-template", '"a" none'); 47 test_invalid_value("grid-template", '"a" 10px 10px'); 48 test_invalid_value("grid-template", '"a" repeat(2, 10px) 10px'); 49 test_invalid_value("grid-template", '"a" 10px repeat(2, 10px)'); 50 test_invalid_value("grid-template", '"a" repeat(auto-fill, 10px) 10px'); 51 test_invalid_value("grid-template", '"a" 10px repeat(auto-fill, 10px)'); 52 test_invalid_value("grid-template", '"a" repeat(auto-fit, 10px) 10px'); 53 test_invalid_value("grid-template", '"a" 10px repeat(auto-fit, 10px)'); 54 test_invalid_value("grid-template", '"a" [a] 10px'); 55 test_invalid_value("grid-template", '"a" [a] repeat(2, 10px)'); 56 test_invalid_value("grid-template", '"a" [a] repeat(auto-fill, 10px)'); 57 test_invalid_value("grid-template", '"a" [a] repeat(auto-fit, 10px)'); 58 test_invalid_value("grid-template", '"a" [a] 10px [a]'); 59 test_invalid_value("grid-template", '"a" [a] repeat(2, 10px) [a]'); 60 test_invalid_value("grid-template", '"a" [a] repeat(auto-fill, 10px) [a]'); 61 test_invalid_value("grid-template", '"a" [a] repeat(auto-fit, 10px) [a]'); 62 test_invalid_value("grid-template", '"a" [a] [a] 10px'); 63 test_invalid_value("grid-template", '"a" [a] [a] repeat(2, 10px)'); 64 test_invalid_value("grid-template", '"a" [a] [a] repeat(auto-fill, 10px)'); 65 test_invalid_value("grid-template", '"a" [a] [a] repeat(auto-fit, 10px)'); 66 test_invalid_value("grid-template", '"a" 10px [a] [a]'); 67 test_invalid_value("grid-template", '"a" repeat(2, 10px) [a] [a]'); 68 test_invalid_value("grid-template", '"a" repeat(auto-fill, 10px) [a] [a]'); 69 test_invalid_value("grid-template", '"a" repeat(auto-fit, 10px) [a] [a]'); 70 test_invalid_value("grid-template", '"a" [a] [a]'); 71 test_invalid_value("grid-template", '[a] "a" [a] [a]'); 72 test_invalid_value("grid-template", '"a" "a" [a] [a]'); 73 test_invalid_value("grid-template", '"a" [a] [a] / none'); 74 test_invalid_value("grid-template", '"a" "a" [a] [a] / none'); 75 test_invalid_value("grid-template", 'none / "a"'); 76 test_invalid_value("grid-template", '"a" / none'); 77 test_invalid_value("grid-template", 'none / [] "a"'); 78 test_invalid_value("grid-template", 'none / "a" []'); 79 test_invalid_value("grid-template", 'none / "a" [] 10px'); 80 test_invalid_value("grid-template", 'none / "a" [] repeat(2, 10px)'); 81 test_invalid_value("grid-template", 'none / "a" [] repeat(auto-fill, 10px)'); 82 test_invalid_value("grid-template", 'none / "a" [] repeat(auto-fit, 10px)'); 83 84 // FIXME: add more values to test full syntax 85 86 </script> 87 </body> 88 </html>