fix: add overflow clip support

openkraken · Nov 4, 2021 · 153e0f2 · 153e0f2
1 parent a26c1c8
commit 153e0f2
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 0 deletions.
diff --git a/integration_tests/snapshots/css/css-overflow/overflow-clip.ts.2d7ac4b11.png b/integration_tests/snapshots/css/css-overflow/overflow-clip.ts.2d7ac4b11.png
diff --git a/integration_tests/snapshots/css/css-overflow/overflow-clip.ts.d735f98a1.png b/integration_tests/snapshots/css/css-overflow/overflow-clip.ts.d735f98a1.png
diff --git a/integration_tests/snapshots/css/css-overflow/overflow-hidden.ts.480408a41.png b/integration_tests/snapshots/css/css-overflow/overflow-hidden.ts.480408a41.png
diff --git a/integration_tests/snapshots/css/css-overflow/overflow-hidden.ts.c79d92a81.png b/integration_tests/snapshots/css/css-overflow/overflow-hidden.ts.c79d92a81.png
diff --git a/integration_tests/specs/css/css-overflow/overflow-clip.ts b/integration_tests/specs/css/css-overflow/overflow-clip.ts
@@ -0,0 +1,43 @@
+describe('clip', () => {
+ fit('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);
+ });
+
+ fit('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);
+ });
+});
diff --git a/integration_tests/specs/css/css-overflow/overflow-hidden.ts b/integration_tests/specs/css/css-overflow/overflow-hidden.ts
@@ -0,0 +1,43 @@
+describe('hidden', () => {
+ fit('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);
+ });
+
+ fit('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);
+ });
+});
diff --git a/kraken/lib/src/css/overflow.dart b/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;

diff --git a/kraken/lib/src/css/values/keywords.dart b/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.