Merge pull request #838 from openkraken/fix/overflow-hidden

fix: overflow hidden and clip

integration_tests/specs/css/css-overflow/overflow-clip.ts

@@ -0,0 +1,43 @@
+describe('clip', () => {
+  it('should works with basic', async () => {
+    let image;
+    let container = createElement('div', {
+      style: {
+        width: '80px',
+        height: '80px',
+        borderRadius: '10px',
+        overflow: "clip",
+      }
+    }, [
+      (image = createElement('img', {
+          src: 'assets/100x100-green.png',
+      })) 
+    ]);
+
+    document.body.appendChild(container);
+
+    await snapshot(0.1);
+  });
+
+  it('should works with children of appear event', async () => {
+    let image;
+    let container = createElement('div', {
+      style: {
+        width: '80px',
+        height: '80px',
+        borderRadius: '10px',
+        overflow: "clip",
+      }
+    }, [
+      (image = createElement('img', {
+          src: 'assets/100x100-green.png',
+      })) 
+    ]);
+
+    image.addEventListener('appear', function onAppear() {});
+
+    document.body.appendChild(container);
+
+    await snapshot(0.1);
+  });
+});

integration_tests/specs/css/css-overflow/overflow-hidden.ts

@@ -0,0 +1,43 @@
+describe('hidden', () => {
+  it('should works with basic', async () => {
+    let image;
+    let container = createElement('div', {
+      style: {
+        width: '80px',
+        height: '80px',
+        borderRadius: '10px',
+        overflow: "hidden",
+      }
+    }, [
+      (image = createElement('img', {
+          src: 'assets/100x100-green.png',
+      })) 
+    ]);
+
+    document.body.appendChild(container);
+
+    await snapshot(0.1);
+  });
+
+  it('should works with children of appear event', async () => {
+    let image;
+    let container = createElement('div', {
+      style: {
+        width: '80px',
+        height: '80px',
+        borderRadius: '10px',
+        overflow: "hidden",
+      }
+    }, [
+      (image = createElement('img', {
+          src: 'assets/100x100-green.png',
+      })) 
+    ]);
+
+    image.addEventListener('appear', function onAppear() {});
+
+    document.body.appendChild(container);
+
+    await snapshot(0.1);
+  });
+});

kraken/lib/src/css/overflow.dart

@@ -45,6 +45,8 @@ CSSOverflowType _getOverflowType(String definition) {
       return CSSOverflowType.scroll;
     case AUTO:
       return CSSOverflowType.auto;
+    case CLIP:
+      return CSSOverflowType.clip;
     case VISIBLE:
     default:
       return CSSOverflowType.visible;

kraken/lib/src/css/values/keywords.dart

@@ -13,6 +13,9 @@ const String AUTO = 'auto';
 const String VISIBLE = 'visible';
 const String HIDDEN = 'hidden';
 
+// Overflow
+const String CLIP = 'clip';
+
 // Border
 const String SOLID = 'solid';
 const String THIN = 'thin'; // A thin border.

kraken/lib/src/gesture/scrollable.dart

@@ -381,6 +381,11 @@ mixin RenderOverflowMixin on RenderBox {
       PaintingContextCallback painter = (PaintingContext context, Offset offset) {
         callback(context, offset + paintOffset);
       };
+
+      // It needs to create new layer to clip children in case children has its own layer
+      // for all overflow value which is not visible (auto/scroll/hidden/clip).
+      bool _needsCompositing = true;
+
       if (decoration != null && decoration.borderRadius != null) {
         BorderRadius radius = decoration.borderRadius as BorderRadius;
         RRect clipRRect = RRect.fromRectAndCorners(clipRect,
@@ -389,9 +394,9 @@ mixin RenderOverflowMixin on RenderBox {
             bottomLeft: radius.bottomLeft,
             bottomRight: radius.bottomRight
         );
-        _oldClipRRectLayer = context.pushClipRRect(needsCompositing, offset, clipRect, clipRRect, painter, oldLayer: _oldClipRRectLayer);
+        _oldClipRRectLayer = context.pushClipRRect(_needsCompositing, offset, clipRect, clipRRect, painter, oldLayer: _oldClipRRectLayer);
       } else {
-        _oldClipRectLayer = context.pushClipRect(needsCompositing, offset, clipRect, painter, oldLayer: _oldClipRectLayer);
+        _oldClipRectLayer = context.pushClipRect(_needsCompositing, offset, clipRect, painter, oldLayer: _oldClipRectLayer);
       }
     } else {
       _oldClipRRectLayer = null;