From 4d34ce6a31eaa19859699646cc614f5be6239e10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20H=C3=A4nisch?= Date: Wed, 11 Mar 2020 17:42:46 +0100 Subject: [PATCH] fix(label): text overflow for slotted headings (#20690) fixes #17087 --- core/src/components/label/label.scss | 14 ++++ .../src/components/label/test/headings/e2e.ts | 10 +++ .../components/label/test/headings/index.html | 70 +++++++++++++++++++ 3 files changed, 94 insertions(+) create mode 100644 core/src/components/label/test/headings/e2e.ts create mode 100644 core/src/components/label/test/headings/index.html diff --git a/core/src/components/label/label.scss b/core/src/components/label/label.scss index 394281aaa2..f2041041e4 100644 --- a/core/src/components/label/label.scss +++ b/core/src/components/label/label.scss @@ -79,3 +79,17 @@ :host(.label-no-animate.label-floating) { transition: none; } + +// Headings +// -------------------------------------------------- + +::slotted(*) h1, +::slotted(*) h2, +::slotted(*) h3, +::slotted(*) h4, +::slotted(*) h5, +::slotted(*) h6 { + text-overflow: inherit; + + overflow: inherit; +} diff --git a/core/src/components/label/test/headings/e2e.ts b/core/src/components/label/test/headings/e2e.ts new file mode 100644 index 0000000000..cdbb7726a9 --- /dev/null +++ b/core/src/components/label/test/headings/e2e.ts @@ -0,0 +1,10 @@ +import { newE2EPage } from '@stencil/core/testing'; + +test('label: headings', async () => { + const page = await newE2EPage({ + url: '/src/components/label/test/headings?ionic:_testing=true' + }); + + const compare = await page.compareScreenshot(); + expect(compare).toMatchScreenshot(); +}); diff --git a/core/src/components/label/test/headings/index.html b/core/src/components/label/test/headings/index.html new file mode 100644 index 0000000000..e0a1fdada0 --- /dev/null +++ b/core/src/components/label/test/headings/index.html @@ -0,0 +1,70 @@ + + + + + + Label - Headings + + + + + + + + + + + + + Label - Headings + + + + + + + + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro? + + + + +

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?

+ + + + +

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

+ + + + +

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

+ + + + +

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?

+ + + + +

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?

+ + + + +

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?

+ + + + +

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?

+ + + + + + + +