gap-decorations-style-valid.html (2244B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Gap Decorations: parsing column-rule-style with valid values</title> 6 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#column-row-rule-style"> 7 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> 8 <meta name="assert" content="*-rule-style supports the full grammar '[ <line-style-list> | <auto-line-style-list> ]'."> 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 16 const properties = ["column-rule-style", "row-rule-style", "rule-style"]; 17 for (let property of properties) { 18 // <repeat-line-style> = repeat( [ <integer [1,∞]> ] , [ <style> ]+ ) 19 test_valid_value(property, "repeat(4, dotted)"); 20 test_valid_value(property, "repeat(3, dashed double dotted)"); 21 test_valid_value(property, "repeat(1, dashed double dotted solid)"); 22 23 // <line-style-or-repeat> = [ <style> | <repeat-line-style> ] 24 test_valid_value(property, "dashed"); 25 test_valid_value(property, "repeat(4, double)"); 26 27 // <line-style-list> = [ <line-style-or-repeat> ]+ 28 test_valid_value(property, "dotted ridge"); 29 test_valid_value(property, "dotted dashed solid groove ridge"); 30 test_valid_value(property, "repeat(3, groove) repeat(4, ridge)"); 31 test_valid_value(property, "inset repeat(3, ridge) none repeat(4, groove hidden dashed)"); 32 test_valid_value(property, "repeat(4, none ridge solid) repeat(5, hidden) double"); 33 34 // <auto-repeat-line-style> = repeat( auto , [ <style> ]+ ) 35 test_valid_value(property, "repeat(auto, solid)"); 36 test_valid_value(property, "repeat(auto, dotted solid inset)"); 37 38 // <auto-line-style-list> = [ <line-style-or-repeat> ]* 39 // <auto-repeat-line-style> 40 // [ <line-style-or-repeat> ]* 41 test_valid_value(property, "repeat(auto, dashed groove) ridge"); 42 test_valid_value(property, "repeat(4, dotted double dashed) repeat(auto, solid)"); 43 test_valid_value(property, "inset repeat(auto, solid ridge) repeat(4, none groove hidden)"); 44 } 45 </script> 46 </body> 47 </html>