[gap-decorations] Parse row-rule-style property

This CL introduces parsing for the `row-rule-style` property which
sets the styles of gap decorations in rows see:
https://drafts.csswg.org/css-gaps-1/#column-row-rule-style

Bug: 357648037
Change-Id: Idcf7575a720812cf5dec7221b09adc82f1ec43f1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6283305
Reviewed-by: Sam Davis Omekara <[email protected]>
Reviewed-by: Alison Maher <[email protected]>
Commit-Queue: Javier Contreras <[email protected]>
Reviewed-by: Kevin Babbitt <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1423236}

Author: Javier Contreras Tenorio (from Dev Box)

css/css-gaps/tentative/parsing/gap-decorations-style-computed.html

@@ -5,7 +5,7 @@
 <title>CSS Gap Decoration: column-rule-style getComputedStyle()</title>
 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#column-row-rule-style">
 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:[email protected]">
-<meta name="assert" content="column-rule-style computed value is as specified.">
+<meta name="assert" content="*-rule-style computed value is as specified.">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/support/computed-testcommon.js"></script>
@@ -22,6 +22,15 @@
 test_computed_value("column-rule-style", "groove");
 test_computed_value("column-rule-style", "ridge");
 test_computed_value("column-rule-style", "inset");
+test_computed_value("row-rule-style", "none");
+test_computed_value("row-rule-style", "hidden");
+test_computed_value("row-rule-style", "dotted");
+test_computed_value("row-rule-style", "dashed");
+test_computed_value("row-rule-style", "solid");
+test_computed_value("row-rule-style", "double");
+test_computed_value("row-rule-style", "groove");
+test_computed_value("row-rule-style", "ridge");
+test_computed_value("row-rule-style", "inset");
 
 test_computed_value("column-rule-style", "dotted dashed solid");
 test_computed_value("column-rule-style", "repeat(10, double)");
@@ -35,6 +44,18 @@
 test_computed_value("column-rule-style", "repeat(4, dotted double dashed) repeat(auto, solid) repeat(4, none groove hidden)");
 test_computed_value("column-rule-style", "ridge repeat(auto, solid)");
 test_computed_value("column-rule-style", "ridge repeat(auto, solid) ridge");
+test_computed_value("row-rule-style", "dotted dashed solid");
+test_computed_value("row-rule-style", "repeat(10, double)");
+test_computed_value("row-rule-style", "repeat(3, groove) repeat(4, ridge)");
+test_computed_value("row-rule-style", "repeat(auto, solid)");
+test_computed_value("row-rule-style", "repeat(auto, dotted solid inset)");
+test_computed_value("row-rule-style", "repeat(4, none ridge solid) repeat(auto, hidden)");
+test_computed_value("row-rule-style", "inset repeat(auto, solid ridge) repeat(4, none groove hidden)");
+test_computed_value("row-rule-style", "repeat(calc(5 + 3), ridge)", "repeat(8, ridge)");
+test_computed_value("row-rule-style", "repeat(4, dotted double dashed) repeat(auto, solid) ridge");
+test_computed_value("row-rule-style", "repeat(4, dotted double dashed) repeat(auto, solid) repeat(4, none groove hidden)");
+test_computed_value("row-rule-style", "ridge repeat(auto, solid)");
+test_computed_value("row-rule-style", "ridge repeat(auto, solid) ridge");
 
 </script>
 </body>

css/css-gaps/tentative/parsing/gap-decorations-style-invalid.html

@@ -5,20 +5,26 @@
 <title>CSS Gap Decorations: column-rule-style parsing</title>
 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#column-row-rule-style">
 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:[email protected]">
-<meta name="assert" content="column-rule-style supports only the grammar '[ <line-style-list> | <auto-line-style-list> ]'.">
+<meta name="assert" content="*-rule-style supports only the grammar '[ <line-style-list> | <auto-line-style-list> ]'.">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/support/parsing-testcommon.js"></script>
 </head>
 <body>
 <script>
 test_invalid_value("column-rule-style", "auto");
+test_invalid_value("row-rule-style", "auto");
 
 test_invalid_value("column-rule-style", "dashed, dotted, solid");
+test_invalid_value("row-rule-style", "dotted, dashed");
 test_invalid_value("column-rule-style", "repeat(auto, groove, dotted, ridge)");
+test_invalid_value("row-rule-style", "repeat(auto, solid, dashed, double)");
 test_invalid_value("column-rule-style", "repeat(0, dotted, solid, double)");
+test_invalid_value("row-rule-style", "repeat(0, dotted)");
 test_invalid_value("column-rule-style", "repeat(-1, dotted, dashed, double)");
+test_invalid_value("row-rule-style", "repeat(-1 dotted)");
 test_invalid_value("column-rule-style", "repeat(auto, dotted) red repeat(auto, ridge)");
+test_invalid_value("row-rule-style", "dotted repeat(auto, solid) blue repeat(auto, ridge)");
 </script>
 </body>
 </html>

css/css-gaps/tentative/parsing/gap-decorations-style-valid.html

@@ -5,7 +5,7 @@
 <title>CSS Gap Decorations: parsing column-rule-style with valid values</title>
 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#column-row-rule-style">
 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:[email protected]">
-<meta name="assert" content="column-rule-style supports the full grammar '[ <line-style-list> | <auto-line-style-list> ]'.">
+<meta name="assert" content="*-rule-style supports the full grammar '[ <line-style-list> | <auto-line-style-list> ]'.">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/support/parsing-testcommon.js"></script>
@@ -16,28 +16,43 @@
 test_valid_value("column-rule-style", "repeat(4, dotted)");
 test_valid_value("column-rule-style", "repeat(3, dashed double dotted)");
 test_valid_value("column-rule-style", "repeat(1, dashed double dotted solid)");
+test_valid_value("row-rule-style",  "repeat(5, dashed)");
+test_valid_value("row-rule-style",  "repeat(4, dashed dotted)");
+test_valid_value("row-rule-style",  "repeat(1, dashed double dotted solid)");
 
 // <line-style-or-repeat> = [ <style> | <repeat-line-style> ]
 test_valid_value("column-rule-style", "dashed");
 test_valid_value("column-rule-style", "repeat(4, double)");
+test_valid_value("row-rule-style", "ridge");
+test_valid_value("row-rule-style", "repeat(5, solid)");
 
 // <line-style-list> = [ <line-style-or-repeat> ]+
 test_valid_value("column-rule-style", "dotted ridge");
 test_valid_value("column-rule-style", "dotted dashed solid groove ridge");
 test_valid_value("column-rule-style", "repeat(3, groove) repeat(4, ridge)");
 test_valid_value("column-rule-style", "inset repeat(3, ridge) none repeat(4, groove hidden dashed)");
 test_valid_value("column-rule-style", "repeat(4, none ridge solid) repeat(5, hidden) double");
+test_valid_value("row-rule-style", "dotted");
+test_valid_value("row-rule-style", "dotted dashed ridge");
+test_valid_value("row-rule-style", "repeat(4, solid) repeat(5, double) repeat(6, dotted)");
+test_valid_value("row-rule-style", "ridge repeat(4, solid) double repeat(6, dotted)");
+test_valid_value("row-rule-style", "repeat(4, none ridge solid) solid repeat(5, hidden) double");
 
 // <auto-repeat-line-style>   = repeat( auto , [ <style> ]+ )
 test_valid_value("column-rule-style", "repeat(auto, solid)");
 test_valid_value("column-rule-style", "repeat(auto, dotted solid inset)");
+test_valid_value("row-rule-style", "repeat(auto, dotted)");
+test_valid_value("row-rule-style", "repeat(auto, dashed solid inset double)");
 
 // <auto-line-style-list>    = [ <line-style-or-repeat> ]*
 //                              <auto-repeat-line-style>
 //                              [ <line-style-or-repeat> ]*
 test_valid_value("column-rule-style", "repeat(auto, dashed groove) ridge");
 test_valid_value("column-rule-style", "repeat(4, dotted double dashed) repeat(auto, solid)");
 test_valid_value("column-rule-style", "inset repeat(auto, solid ridge) repeat(4, none groove hidden)");
+test_valid_value("row-rule-style", "repeat(auto, dashed groove) repeat(4, solid) double");
+test_valid_value("row-rule-style", "repeat(4, dotted double dashed) repeat(auto, solid) repeat(4, none groove hidden)");
+test_valid_value("row-rule-style", "dotted repeat(auto, solid ridge) solid");
 </script>
 </body>
 </html>