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 0000000000..7e39631ecd Binary files /dev/null and b/integration_tests/snapshots/css/css-overflow/overflow-clip.ts.2d7ac4b11.png differ 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 0000000000..7e39631ecd Binary files /dev/null and b/integration_tests/snapshots/css/css-overflow/overflow-clip.ts.d735f98a1.png differ 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 0000000000..7e39631ecd Binary files /dev/null and b/integration_tests/snapshots/css/css-overflow/overflow-hidden.ts.480408a41.png differ 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 0000000000..7e39631ecd Binary files /dev/null and b/integration_tests/snapshots/css/css-overflow/overflow-hidden.ts.c79d92a81.png differ 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.