fix: flex-basis with percentage not working

bridge/foundation/logging.cc

@@ -93,7 +93,6 @@ void pipeMessageToInspector(JSGlobalContextRef ctx, const std::string message, c
 };
 #endif
 
-
 void printLog(int32_t contextId, std::stringstream& stream, std::string level, void* ctx) {
   MessageLevel _log_level = MessageLevel::Info;
   switch (level[0]) {
@@ -128,7 +127,6 @@ void printLog(int32_t contextId, std::stringstream& stream, std::string level, v
   if (kraken::getDartMethod()->onJsLog != nullptr) {
     kraken::getDartMethod()->onJsLog(contextId, static_cast<int>(_log_level), stream.str().c_str());
   }
-
 }
 
 }  // namespace foundation

integration_tests/specs/css/css-flexbox/flex-minimum.ts

@@ -1292,7 +1292,7 @@ describe('flex-minimum', () => {
         (testFlexItemOverlappingGreen = createElement('img', {
           id: 'test-flex-item-overlapping-green',
           src:
-          'https://kraken.oss-cn-hangzhou.aliyuncs.com/images/200x200-green.png',
+          'assets/200x200-green.png',
           style: {
             'max-height': '100px',
             'box-sizing': 'border-box',

integration_tests/specs/css/css-flexbox/flex_basis.ts

@@ -73,4 +73,173 @@ describe('flexbox flex-basis', () => {
 
     await snapshot();
   });
+
+  it('should work with px', async () => {
+    let div;
+    div = createElement(
+      'div',
+      {
+        style: {
+          background: 'blue',
+          height: '100px',
+          width: '200px',
+          display: 'flex',
+        },
+      },
+      [
+        createElement(
+          'span',
+          {
+            style: {
+              background: 'yellow',
+              width: '50px',
+              'max-width': '60px',
+              display: 'inline-block',
+              flexBasis: '0',
+              'box-sizing': 'border-box',
+            },
+          },
+          [createText(`one`)]
+        ),
+        createElement(
+          'span',
+          {
+            style: {
+              background: 'pink',
+              width: '50px',
+              flexBasis: '40px',
+            },
+          },
+          [createText(`two`)]
+        ),
+        createElement(
+          'span',
+          {
+            style: {
+              background: 'lightblue',
+              width: '50px',
+              flexBasis: '60px',
+            },
+          },
+          [createText(`three`)]
+        ),
+      ]
+    );
+    BODY.appendChild(div);
+    await snapshot();
+  });
+
+  it('should work with percentage', async () => {
+    let div;
+    div = createElement(
+      'div',
+      {
+        style: {
+          background: 'blue',
+          height: '100px',
+          width: '200px',
+          display: 'flex',
+        },
+      },
+      [
+        createElement(
+          'span',
+          {
+            style: {
+              background: 'yellow',
+              width: '50px',
+              'max-width': '60px',
+              display: 'inline-block',
+              flexBasis: '0%',
+              'box-sizing': 'border-box',
+            },
+          },
+          [createText(`one`)]
+        ),
+        createElement(
+          'span',
+          {
+            style: {
+              background: 'pink',
+              width: '50px',
+              flexBasis: '20%',
+            },
+          },
+          [createText(`two`)]
+        ),
+        createElement(
+          'span',
+          {
+            style: {
+              background: 'lightblue',
+              width: '50px',
+              flexBasis: '30%',
+            },
+          },
+          [createText(`three`)]
+        ),
+      ]
+    );
+    BODY.appendChild(div);
+
+    await snapshot();
+  });
+
+  it('should work with min and max size', async () => {
+    let div;
+    div = createElement(
+      'div',
+      {
+        style: {
+          background: 'blue',
+          height: '100px',
+          width: '200px',
+          display: 'flex',
+        },
+      },
+      [
+        createElement(
+          'span',
+          {
+            style: {
+              background: 'yellow',
+              width: '50px',
+              'max-width': '60px',
+              display: 'inline-block',
+              flexBasis: '0',
+              minWidth: '50px',
+              'box-sizing': 'border-box',
+            },
+          },
+          [createText(`one`)]
+        ),
+        createElement(
+          'span',
+          {
+            style: {
+              background: 'pink',
+              width: '50px',
+              flexBasis: '50px',
+            },
+          },
+          [createText(`two`)]
+        ),
+        createElement(
+          'span',
+          {
+            style: {
+              background: 'lightblue',
+              width: '50px',
+              flexBasis: '100px',
+              maxWidth: '50px',
+            },
+          },
+          [createText(`three`)]
+        ),
+      ]
+    );
+    BODY.appendChild(div);
+
+    await snapshot();
+  });
 });

integration_tests/specs/css/css-flexbox/flexbox_flex-0.ts

@@ -1392,8 +1392,7 @@ describe('flexbox_flex-0', () => {
     await snapshot();
   });
 
-  // @TODO: Percentage of flex-basis not working.
-  xit('1-0', async () => {
+  it('1-0', async () => {
     let div;
     div = createElement(
       'div',
@@ -2179,8 +2178,7 @@ describe('flexbox_flex-0', () => {
     await snapshot();
   });
 
-  // @TODO: Percentage of flex-basis not working.
-  xit('1-Npercent', async () => {
+  it('1-Npercent', async () => {
     let div;
     div = createElement(
       'div',
@@ -2801,8 +2799,7 @@ describe('flexbox_flex-0', () => {
     await snapshot();
   });
 
-  // @TODO: Percentage of flex-basis not working.
-  xit('N-0', async () => {
+  it('N-0', async () => {
     let div;
     div = createElement(
       'div',
@@ -3429,8 +3426,7 @@ describe('flexbox_flex-0', () => {
     await snapshot();
   });
 
-  // @TODO: Percentage of flex-basis not working.
-  xit('N-Npercent', async () => {
+  it('N-Npercent', async () => {
     let div;
     div = createElement(
       'div',

integration_tests/specs/css/css-flexbox/flexbox_flex-1.ts

@@ -156,8 +156,7 @@ describe('flexbox_flex-1', () => {
     await snapshot();
   });
 
-  // @TODO: Percentage of flex-basis not working.
-  xit('0-0', async () => {
+  it('0-0', async () => {
     let div;
     div = createElement(
       'div',
@@ -702,8 +701,7 @@ describe('flexbox_flex-1', () => {
     await snapshot();
   });
 
-  // @TODO: Percentage of flex-basis not working.
-  xit('0-Npercent-shrink', async () => {
+  it('0-Npercent-shrink', async () => {
     let div;
     div = createElement(
       'div',
@@ -782,8 +780,7 @@ describe('flexbox_flex-1', () => {
     await snapshot();
   });
 
-  // @TODO: Percentage of flex-basis not working.
-  xit('0-Npercent', async () => {
+  it('0-Npercent', async () => {
     let div;
     div = createElement(
       'div',
@@ -1406,8 +1403,7 @@ describe('flexbox_flex-1', () => {
     await snapshot();
   });
 
-  // @TODO: Percentage of flex-basis not working.
-  xit('1-0', async () => {
+  it('1-0', async () => {
     let div;
     div = createElement(
       'div',
@@ -2034,8 +2030,7 @@ describe('flexbox_flex-1', () => {
     await snapshot();
   });
 
-  // @TODO: Percentage of flex-basis not working.
-  xit('1-Npercent', async () => {
+  it('1-Npercent', async () => {
     let div;
     div = createElement(
       'div',
@@ -2661,8 +2656,7 @@ describe('flexbox_flex-1', () => {
     await snapshot();
   });
 
-  // @TODO: Percentage of flex-basis not working.
-  xit('N-0', async () => {
+  it('N-0', async () => {
     let div;
     div = createElement(
       'div',
@@ -2741,7 +2735,6 @@ describe('flexbox_flex-1', () => {
     await snapshot();
   });
 
-  // @TODO: Percentage of flex-basis not working.
   it('N-N-ref', async () => {
     let div;
     div = createElement(
@@ -3291,8 +3284,7 @@ describe('flexbox_flex-1', () => {
     await snapshot();
   });
 
-  // @TODO: Percentage of flex-basis not working.
-  xit('N-Npercent', async () => {
+  it('N-Npercent', async () => {
     let div;
     div = createElement(
       'div',

integration_tests/specs/css/css-flexbox/flexbox_flex-basis.ts

@@ -156,8 +156,7 @@ describe('flexbox_flex-basis', () => {
     await snapshot();
   });
 
-  // @TODO: Percentage of flex-basis not working.
-  xit('shrink', async () => {
+  it('shrink', async () => {
     let div;
     div = createElement(
       'div',