From 153e0f2f78eb1aaba174792dc4548de1737b39be Mon Sep 17 00:00:00 2001
From: "zhanwen.zw" <zhanwen.zw@alibaba-inc.com>
Date: Thu, 4 Nov 2021 11:06:47 +0800
Subject: [PATCH] fix: add overflow clip support

---
 .../overflow-clip.ts.2d7ac4b11.png            | Bin 0 -> 2767 bytes
 .../overflow-clip.ts.d735f98a1.png            | Bin 0 -> 2767 bytes
 .../overflow-hidden.ts.480408a41.png          | Bin 0 -> 2767 bytes
 .../overflow-hidden.ts.c79d92a81.png          | Bin 0 -> 2767 bytes
 .../specs/css/css-overflow/overflow-clip.ts   |  43 ++++++++++++++++++
 .../specs/css/css-overflow/overflow-hidden.ts |  43 ++++++++++++++++++
 kraken/lib/src/css/overflow.dart              |   2 +
 kraken/lib/src/css/values/keywords.dart       |   3 ++
 8 files changed, 91 insertions(+)
 create mode 100644 integration_tests/snapshots/css/css-overflow/overflow-clip.ts.2d7ac4b11.png
 create mode 100644 integration_tests/snapshots/css/css-overflow/overflow-clip.ts.d735f98a1.png
 create mode 100644 integration_tests/snapshots/css/css-overflow/overflow-hidden.ts.480408a41.png
 create mode 100644 integration_tests/snapshots/css/css-overflow/overflow-hidden.ts.c79d92a81.png
 create mode 100644 integration_tests/specs/css/css-overflow/overflow-clip.ts
 create mode 100644 integration_tests/specs/css/css-overflow/overflow-hidden.ts

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
new file mode 100644
index 0000000000000000000000000000000000000000..7e39631ecd131bb6ee68b8ce1a15ee9f321d0384
GIT binary patch
literal 2767
zcmeAS@N?(olHy`uVBq!ia0y~yV9a1(U~1rC1Bz^vdbAu!F%}28J29*~C-V}>VJUX<
z4B-HR8jh3>1_rK5PZ!6KiaBrZZ1jq$lxcgo|G3o+cZuCsGPn3ie^A=fAXvoyNS5Ub
z(=(-(Ez!r1S<P*F>6~R8trJ<cInr$Rn<sk~pAY6WI(mG4g(RQxyEWHefBn&S^=wv5
z?GCBy^6QWPeg6C7ho=v#^Q*U%Ex)_*e@?xOoxRL){l4QTPfy;d&gg&U-1f$}yK9c!
z)K7o>?(*H3*^|Voy9@ulidoS(|CxWIU2VCQ-u?J<JJs_mx5$XE*MByT(T4Hzb@4}k
zl7ZrVm&=zIpJ$lYklAxzF1zD%|L&T4%P{lRJJT8Z@0_dJ8z;ZV_QRQ<@lkJdkG-9J
z8zg*V%dW`I&-Df0U!Gf@k+68#YX0!z{2Nhu>^YZ8{(h`_#~Xe6ZG-QuclP(s?@i3!
zDZ9b*a`5lg2meokMF0KNWjN!wfN>Fvl!DhVpt5ewEqi`%!`3@|H<o1nzxnTu^tNfY
z8E2cw+S$*kK76gnI$`p%$KuCf0R#<EiSqgHp55CN3W}-U&&u9O9#A&xH9Yon_2-@C
zIkM)=X1P+yJ(H)aCs%HnQ+@hcgq$uown1_7{(kemidw}>_6bPQY5n?Z)!*axYx2S#
zznN})e#!ogH==t!hd;NoWVSyW&-C}|t2EPfb}_xL`>#L#_xW$dk53;qZ$Fz=eoOZE
z`ESP`em-3I=TXFr#`*8^nRyTF`J>O*pwY<IA(SynjRwJJDj3ZOqh-NpaX4Bd46532
bMLc7!?4sx47i5iqjZy|rS3j3^P6<r_RTRzn

literal 0
HcmV?d00001

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
new file mode 100644
index 0000000000000000000000000000000000000000..7e39631ecd131bb6ee68b8ce1a15ee9f321d0384
GIT binary patch
literal 2767
zcmeAS@N?(olHy`uVBq!ia0y~yV9a1(U~1rC1Bz^vdbAu!F%}28J29*~C-V}>VJUX<
z4B-HR8jh3>1_rK5PZ!6KiaBrZZ1jq$lxcgo|G3o+cZuCsGPn3ie^A=fAXvoyNS5Ub
z(=(-(Ez!r1S<P*F>6~R8trJ<cInr$Rn<sk~pAY6WI(mG4g(RQxyEWHefBn&S^=wv5
z?GCBy^6QWPeg6C7ho=v#^Q*U%Ex)_*e@?xOoxRL){l4QTPfy;d&gg&U-1f$}yK9c!
z)K7o>?(*H3*^|Voy9@ulidoS(|CxWIU2VCQ-u?J<JJs_mx5$XE*MByT(T4Hzb@4}k
zl7ZrVm&=zIpJ$lYklAxzF1zD%|L&T4%P{lRJJT8Z@0_dJ8z;ZV_QRQ<@lkJdkG-9J
z8zg*V%dW`I&-Df0U!Gf@k+68#YX0!z{2Nhu>^YZ8{(h`_#~Xe6ZG-QuclP(s?@i3!
zDZ9b*a`5lg2meokMF0KNWjN!wfN>Fvl!DhVpt5ewEqi`%!`3@|H<o1nzxnTu^tNfY
z8E2cw+S$*kK76gnI$`p%$KuCf0R#<EiSqgHp55CN3W}-U&&u9O9#A&xH9Yon_2-@C
zIkM)=X1P+yJ(H)aCs%HnQ+@hcgq$uown1_7{(kemidw}>_6bPQY5n?Z)!*axYx2S#
zznN})e#!ogH==t!hd;NoWVSyW&-C}|t2EPfb}_xL`>#L#_xW$dk53;qZ$Fz=eoOZE
z`ESP`em-3I=TXFr#`*8^nRyTF`J>O*pwY<IA(SynjRwJJDj3ZOqh-NpaX4Bd46532
bMLc7!?4sx47i5iqjZy|rS3j3^P6<r_RTRzn

literal 0
HcmV?d00001

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
new file mode 100644
index 0000000000000000000000000000000000000000..7e39631ecd131bb6ee68b8ce1a15ee9f321d0384
GIT binary patch
literal 2767
zcmeAS@N?(olHy`uVBq!ia0y~yV9a1(U~1rC1Bz^vdbAu!F%}28J29*~C-V}>VJUX<
z4B-HR8jh3>1_rK5PZ!6KiaBrZZ1jq$lxcgo|G3o+cZuCsGPn3ie^A=fAXvoyNS5Ub
z(=(-(Ez!r1S<P*F>6~R8trJ<cInr$Rn<sk~pAY6WI(mG4g(RQxyEWHefBn&S^=wv5
z?GCBy^6QWPeg6C7ho=v#^Q*U%Ex)_*e@?xOoxRL){l4QTPfy;d&gg&U-1f$}yK9c!
z)K7o>?(*H3*^|Voy9@ulidoS(|CxWIU2VCQ-u?J<JJs_mx5$XE*MByT(T4Hzb@4}k
zl7ZrVm&=zIpJ$lYklAxzF1zD%|L&T4%P{lRJJT8Z@0_dJ8z;ZV_QRQ<@lkJdkG-9J
z8zg*V%dW`I&-Df0U!Gf@k+68#YX0!z{2Nhu>^YZ8{(h`_#~Xe6ZG-QuclP(s?@i3!
zDZ9b*a`5lg2meokMF0KNWjN!wfN>Fvl!DhVpt5ewEqi`%!`3@|H<o1nzxnTu^tNfY
z8E2cw+S$*kK76gnI$`p%$KuCf0R#<EiSqgHp55CN3W}-U&&u9O9#A&xH9Yon_2-@C
zIkM)=X1P+yJ(H)aCs%HnQ+@hcgq$uown1_7{(kemidw}>_6bPQY5n?Z)!*axYx2S#
zznN})e#!ogH==t!hd;NoWVSyW&-C}|t2EPfb}_xL`>#L#_xW$dk53;qZ$Fz=eoOZE
z`ESP`em-3I=TXFr#`*8^nRyTF`J>O*pwY<IA(SynjRwJJDj3ZOqh-NpaX4Bd46532
bMLc7!?4sx47i5iqjZy|rS3j3^P6<r_RTRzn

literal 0
HcmV?d00001

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
new file mode 100644
index 0000000000000000000000000000000000000000..7e39631ecd131bb6ee68b8ce1a15ee9f321d0384
GIT binary patch
literal 2767
zcmeAS@N?(olHy`uVBq!ia0y~yV9a1(U~1rC1Bz^vdbAu!F%}28J29*~C-V}>VJUX<
z4B-HR8jh3>1_rK5PZ!6KiaBrZZ1jq$lxcgo|G3o+cZuCsGPn3ie^A=fAXvoyNS5Ub
z(=(-(Ez!r1S<P*F>6~R8trJ<cInr$Rn<sk~pAY6WI(mG4g(RQxyEWHefBn&S^=wv5
z?GCBy^6QWPeg6C7ho=v#^Q*U%Ex)_*e@?xOoxRL){l4QTPfy;d&gg&U-1f$}yK9c!
z)K7o>?(*H3*^|Voy9@ulidoS(|CxWIU2VCQ-u?J<JJs_mx5$XE*MByT(T4Hzb@4}k
zl7ZrVm&=zIpJ$lYklAxzF1zD%|L&T4%P{lRJJT8Z@0_dJ8z;ZV_QRQ<@lkJdkG-9J
z8zg*V%dW`I&-Df0U!Gf@k+68#YX0!z{2Nhu>^YZ8{(h`_#~Xe6ZG-QuclP(s?@i3!
zDZ9b*a`5lg2meokMF0KNWjN!wfN>Fvl!DhVpt5ewEqi`%!`3@|H<o1nzxnTu^tNfY
z8E2cw+S$*kK76gnI$`p%$KuCf0R#<EiSqgHp55CN3W}-U&&u9O9#A&xH9Yon_2-@C
zIkM)=X1P+yJ(H)aCs%HnQ+@hcgq$uown1_7{(kemidw}>_6bPQY5n?Z)!*axYx2S#
zznN})e#!ogH==t!hd;NoWVSyW&-C}|t2EPfb}_xL`>#L#_xW$dk53;qZ$Fz=eoOZE
z`ESP`em-3I=TXFr#`*8^nRyTF`J>O*pwY<IA(SynjRwJJDj3ZOqh-NpaX4Bd46532
bMLc7!?4sx47i5iqjZy|rS3j3^P6<r_RTRzn

literal 0
HcmV?d00001

diff --git a/integration_tests/specs/css/css-overflow/overflow-clip.ts b/integration_tests/specs/css/css-overflow/overflow-clip.ts
new file mode 100644
index 0000000000..01d4ec639f
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..fdeb360d99
--- /dev/null
+++ 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
index 6efe526bbb..c939d4fc6b 100644
--- 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
index 3713fe2440..cfaca97239 100644
--- 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.