fix: percentage with decimal point (#845)

* fix: add decimal support for percentage * test: add test for decimal percentage
openkraken · Nov 23, 2021 · 7df079a · 7df079a
1 parent 9197146
commit 7df079a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/integration_tests/snapshots/css/css-sizing/width.ts.ac9954d61.png b/integration_tests/snapshots/css/css-sizing/width.ts.ac9954d61.png
diff --git a/integration_tests/specs/css/css-sizing/width.ts b/integration_tests/specs/css/css-sizing/width.ts
@@ -228,6 +228,33 @@ describe('Width', function() {
     await snapshot();
   });
 
+  it('should work with percentage with decimal point', async () => {
+    let div;
+    div = createElement(
+      'div',
+      {
+        style: {
+          width: '200px',
+          height: '200px',
+          backgroundColor: 'green',
+          position: 'relative',
+        },
+      },
+      [
+        createElement('div', {
+          style: {
+            height: '100px',
+            width: '50.00%',
+            backgroundColor: 'yellow',
+          }
+        }),
+      ]
+    );
+
+    BODY.appendChild(div);
+    await snapshot();
+  });
+
   it('should work with percentage and multiple children in flow layout', async () => {
     let div;
     let foo;

diff --git a/kraken/lib/src/css/values/percentage.dart b/kraken/lib/src/css/values/percentage.dart
@@ -7,7 +7,7 @@
 
 import 'package:quiver/collection.dart';
 
-final _percentageRegExp = RegExp(r'^[+-]?\d+\%$', caseSensitive: false);
+final _percentageRegExp = RegExp(r'^[+-]?\d+[\.]?\d*\%$', caseSensitive: false);
 final LinkedLruHashMap<String, double?> _cachedParsedPercentage = LinkedLruHashMap(maximumSize: 100);
 
 class CSSPercentage {