grid-auto-columns-valid.html (2639B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Layout Test: parsing grid-auto-columns with valid values</title> 6 <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> 7 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns"> 8 <meta name="assert" content="grid-auto-columns supports the full grammar '<track-size>+'."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/css/support/parsing-testcommon.js"></script> 12 </head> 13 <body> 14 <script> 15 // <track-breadth> 16 // <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto 17 test_valid_value("grid-auto-columns", "1px"); 18 test_valid_value("grid-auto-columns", "2em"); 19 test_valid_value("grid-auto-columns", "calc(2em + 3ex)"); 20 test_valid_value("grid-auto-columns", "4%"); 21 test_valid_value("grid-auto-columns", "5fr"); 22 test_valid_value("grid-auto-columns", "min-content"); 23 test_valid_value("grid-auto-columns", "max-content"); 24 test_valid_value("grid-auto-columns", "auto"); 25 test_valid_value("grid-auto-columns", "auto /**/", "auto"); 26 27 // minmax( <inflexible-breadth> , <track-breadth> ) 28 // <inflexible-breadth> = <length-percentage> | min-content | max-content | auto 29 test_valid_value("grid-auto-columns", "minmax(1px, 5fr)"); 30 test_valid_value("grid-auto-columns", "minmax(2em, min-content)"); 31 test_valid_value("grid-auto-columns", "minmax(calc(2em + 3ex), max-content)"); 32 test_valid_value("grid-auto-columns", "minmax(4%, auto)"); 33 test_valid_value("grid-auto-columns", "minmax(5vmin, 1px)"); 34 test_valid_value("grid-auto-columns", "minmax(min-content, 2em)"); 35 test_valid_value("grid-auto-columns", "minmax(max-content, calc(2em + 3ex))"); 36 test_valid_value("grid-auto-columns", "minmax(auto, 4%)"); 37 38 // fit-content( <length-percentage> ) 39 test_valid_value("grid-auto-columns", "fit-content(1px)"); 40 test_valid_value("grid-auto-columns", "fit-content(2em)"); 41 test_valid_value("grid-auto-columns", "fit-content(calc(2em + 3ex))"); 42 test_valid_value("grid-auto-columns", "fit-content(4%)"); 43 44 test_valid_value("grid-auto-columns", "0px"); 45 test_valid_value("grid-auto-columns", "0%"); 46 test_valid_value("grid-auto-columns", "0fr"); 47 test_valid_value("grid-auto-columns", "minmax(auto, 0%)"); 48 test_valid_value("grid-auto-columns", "fit-content(0px)"); 49 50 // <track-size>+ 51 test_valid_value("grid-auto-columns", "auto auto"); 52 test_valid_value("grid-auto-columns", "auto 10px"); 53 test_valid_value("grid-auto-columns", "1px 2px 3px 0px"); 54 test_valid_value("grid-auto-columns", "fit-content(1px) minmax(2px, 3px) 4px"); 55 </script> 56 </body> 57 </html>