Merge pull request #1004 from openkraken/fix/flex-stretch-height

fix: flex stretch height when positioned child exists
openkraken · Dec 28, 2021 · de099ae · de099ae
2 parents 1f527a5 + f795acc
commit de099ae
Show file tree

Hide file tree

Showing 5 changed files with 875 additions and 1,280 deletions.
diff --git a/integration_tests/snapshots/css/css-flexbox/position-absolute.ts.784e156d1.png b/integration_tests/snapshots/css/css-flexbox/position-absolute.ts.784e156d1.png
diff --git a/integration_tests/snapshots/css/css-flexbox/position-absolute.ts.dc55f15a1.png b/integration_tests/snapshots/css/css-flexbox/position-absolute.ts.dc55f15a1.png
diff --git a/integration_tests/specs/css/css-flexbox/position-absolute.ts b/integration_tests/specs/css/css-flexbox/position-absolute.ts
@@ -191,4 +191,65 @@ describe('flexbox-position-absolute', () => {
 
     await snapshot();
   });
+
+  it('should works with image of position absolute and self no height', async () => {
+    const div = createElement('div', {
+       style: {
+           display: 'flex',
+           backgroundColor: 'yellow',
+           position: 'relative',
+           overflow: 'hidden',
+       }
+    }, [
+        createElement('img', {
+            src: 'assets/100x100-green.png',
+            style: {
+                position: 'absolute',
+                height: '200px'
+             }
+        }),
+        createElement('div', {
+            style: {
+                display: 'flex',
+                width: '50px',
+                padding: '20px 0',
+                position: 'relative'
+            }
+        })
+    ]);
+    document.body.appendChild(div);
+
+    await snapshot(0.1);
+  });
+
+  it('should works with child of position absolute and self no height', async () => {
+    const div = createElement('div', {
+       style: {
+           display: 'flex',
+           alignItems: 'center',
+           backgroundColor: 'yellow',
+           position: 'relative',
+           overflow: 'hidden',
+       }
+    }, [
+        createElement('div', {
+            style: {
+                position: 'absolute',
+                width: '200px',
+                height: '200px',
+                backgroundColor: 'green'
+             }
+        }),
+        createElement('div', {
+            style: {
+                width: '200px',
+                padding: '150px 0',
+                position: 'relative'
+            }
+        })
+    ]);
+    document.body.appendChild(div);
+
+    await snapshot();
+  });
 });