fix: fix combined with background images.

openwebf · Oct 18, 2023 · bc503dd · bc503dd
1 parent ea96031
commit bc503dd
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 11 deletions.
diff --git a/integration_tests/snapshots/css/css-backgrounds/background-image.ts.f5299eb21.png b/integration_tests/snapshots/css/css-backgrounds/background-image.ts.f5299eb21.png
diff --git a/integration_tests/specs/css/css-backgrounds/background-image.ts b/integration_tests/specs/css/css-backgrounds/background-image.ts
@@ -66,6 +66,33 @@ describe('background image', function() {
     await snapshot(0.1);
   });
 
+  it('should work with css vars', async () => {
+    const style = `
+      :root {
+       --background-end-rgb: 255, 255, 255;
+       --background-end-rgb-2: 0,0,0;
+      }
+      
+      .box {
+        width: 100px;
+        height: 100px;
+        background: linear-gradient(
+            to bottom,
+            rgb(var(--background-end-rgb)),
+            rgb(var(--background-end-rgb-2)));
+      }
+    `;
+    const styleEle = document.createElement('style');
+    styleEle.innerHTML = style;
+    document.head.appendChild(styleEle);
+
+    const container = createElement('div', {
+      className: 'box'
+    });
+    document.body.appendChild(container);
+    await snapshot();
+  });
+
   it("computed", async () => {
     let target;
     target = createElement('div', {

diff --git a/webf/lib/src/css/background.dart b/webf/lib/src/css/background.dart
@@ -678,7 +678,7 @@ class CSSBackground {
   }
 }
 
-void _applyColorAndStops(int start, List<String> args, List<Color?> colors, List<double?> stops,
+void _applyColorAndStops(int start, List<String> args, List<Color> colors, List<double> stops,
     RenderStyle renderStyle, String propertyName,
     [double? gradientLength]) {
   // colors should more than one, otherwise invalid
@@ -688,8 +688,10 @@ void _applyColorAndStops(int start, List<String> args, List<Color?> colors, List
       List<CSSColorStop> colorGradients =
           _parseColorAndStop(args[i].trim(), renderStyle, propertyName, (i - start) * grow, gradientLength);
       for (var colorStop in colorGradients) {
-        colors.add(colorStop.color);
-        stops.add(colorStop.stop);
+        if (colorStop.color != null) {
+          colors.add(colorStop.color!);
+          stops.add(colorStop.stop!);
+        }
       }
     }
   }
@@ -701,15 +703,8 @@ List<CSSColorStop> _parseColorAndStop(String src, RenderStyle renderStyle, Strin
   List<CSSColorStop> colorGradients = [];
   // rgba may contain space, color should handle special
   if (src.startsWith('rgba(') || src.startsWith('rgb(')) {
-    int indexOfRgbaEnd = src.indexOf(')');
-    if (indexOfRgbaEnd == -1) {
-      // rgba parse error
-      return colorGradients;
-    }
+    int indexOfRgbaEnd = src.lastIndexOf(')');
     strings.add(src.substring(0, indexOfRgbaEnd + 1));
-    if (indexOfRgbaEnd + 1 < src.length) {
-      strings.addAll(src.substring(indexOfRgbaEnd + 1).trim().split(' '));
-    }
   } else {
     strings = src.split(' ');
   }