[styles] Properly render a color fallback if the color failed to parse

Bug: 396080529
Change-Id: I9baf7bf9d2af72f017f5d8680567ae884a41ed80
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6441443
Commit-Queue: Ergün Erdoğmuş <ergunsh@chromium.org>
Auto-Submit: Philip Pfaffe <pfaffe@chromium.org>
Reviewed-by: Ergün Erdoğmuş <ergunsh@chromium.org>

Author: pfaffe

front_end/panels/elements/StylePropertyTreeElement.test.ts

@@ -860,6 +860,13 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       assert.isOk(colorSwatch.getColor());
       assert.strictEqual(colorSwatch?.getColor()?.asString(Common.Color.Format.HSL), 'hsl(240deg 50% 50%)');
     });
+
+    it('renders fallbacks correctly when the color fails to parse', () => {
+      const stylePropertyTreeElement = getTreeElement('color', 'lch(50 min(1, 8) 8deg)');
+      stylePropertyTreeElement.updateTitle();
+      const angle = stylePropertyTreeElement.valueElement?.querySelector('devtools-css-angle');
+      assert.exists(angle);
+    });
   });
 
   describe('BezierRenderer', () => {

front_end/panels/elements/StylePropertyTreeElement.ts

@@ -402,6 +402,9 @@ export class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.Co
     // Now try render a color swatch if the result is parsable.
     const color = Common.Color.parse(colorText);
     if (!color) {
+      if (match.node.name === 'CallExpression') {
+        return Renderer.render(ASTUtils.children(match.node), context).nodes;
+      }
       return [document.createTextNode(colorText)];
     }
     const swatch = this.renderColorSwatch(color, valueChild);