Mark border-inline/block as a color property

- Fixes an issue that previously prevented ColorSwatch from being displayed
- Make these properties show the Color keyword when Autocomplete.

Added the following properties:

 - 'border-inline',
 - 'border-inline-color',
 - 'border-block',
 - 'border-block-color',

and complementary SVG-related color properties:

 - 'flood-color',
 - 'lighting-color',
 - 'stop-color'

pfaffe@ has previously added some other border properties, see:

https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5667297

Bug: 389048232
Change-Id: Ibef893f7154458d9552dfaf6180ab6c9ee93d452
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6371612
Reviewed-by: Philip Pfaffe <[email protected]>
Commit-Queue: 一丝 <[email protected]>

Author: yisibl

front_end/core/sdk/CSSMetadata.ts

@@ -547,10 +547,14 @@ const colorAwareProperties = new Set<string>([
   'border-right-color',
   'border-top',
   'border-top-color',
+  'border-block',
+  'border-block-color',
   'border-block-end',
   'border-block-end-color',
   'border-block-start',
   'border-block-start-color',
+  'border-inline',
+  'border-inline-color',
   'border-inline-end',
   'border-inline-end-color',
   'border-inline-start',
@@ -597,6 +601,10 @@ const colorAwareProperties = new Set<string>([
   '-webkit-text-fill-color',
   '-webkit-text-stroke',
   '-webkit-text-stroke-color',
+  // For SVG
+  'flood-color',
+  'lighting-color',
+  'stop-color',
 ]);
 
 // In addition to `_colorAwareProperties`, the following properties contain CSS <angle> units.

front_end/core/sdk/CSSPropertyParserMatchers.test.ts

@@ -94,8 +94,18 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
 
   it('parses colors in logical border properties', () => {
     for (const success
-             of ['border-block-end', 'border-block-end-color', 'border-block-start', 'border-block-start-color',
-                 'border-inline-end', 'border-inline-end-color', 'border-inline-start', 'border-inline-start-color']) {
+             of ['border-inline', 'border-block', 'border-inline-color', 'border-block-color', 'border-block-end',
+                 'border-block-end-color', 'border-block-start', 'border-block-start-color', 'border-inline-end',
+                 'border-inline-end-color', 'border-inline-start', 'border-inline-start-color']) {
+      const {ast, match, text} = matchSingleValue(success, 'red', new SDK.CSSPropertyParserMatchers.ColorMatcher());
+      assert.exists(match, text);
+      assert.strictEqual(match.text, 'red');
+      assert.strictEqual(ast?.propertyName, success);
+    }
+  });
+
+  it('parses colors in SVG color properties', () => {
+    for (const success of ['flood-color', 'lighting-color', 'stop-color']) {
       const {ast, match, text} = matchSingleValue(success, 'red', new SDK.CSSPropertyParserMatchers.ColorMatcher());
       assert.exists(match, text);
       assert.strictEqual(match.text, 'red');