From 9f1b0254ec22f5e6de23e9fd5c16936dc5b271ec Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Fri, 13 Jun 2025 17:20:20 -0400 Subject: [PATCH 1/5] test(segment-view): add segment view with input test --- .../segment-view/test/input/index.html | 89 +++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 core/src/components/segment-view/test/input/index.html diff --git a/core/src/components/segment-view/test/input/index.html b/core/src/components/segment-view/test/input/index.html new file mode 100644 index 00000000000..017d61710ec --- /dev/null +++ b/core/src/components/segment-view/test/input/index.html @@ -0,0 +1,89 @@ + + + + + Segment View - Input + + + + + + + + + + + + + + + + + Segment View - Input + + + + + + + First + + + Second + + + Third + + + + Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora + quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum + mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus + comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The + voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum + defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv + ingdead. + + + + + + + + + + + From ee5d774f234b8b983c02113ef8aa827472009253 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Mon, 14 Jul 2025 16:14:40 -0400 Subject: [PATCH 2/5] fix(segment-view): scroll to correct content when height is not set --- core/src/components/segment-content/segment-content.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/core/src/components/segment-content/segment-content.scss b/core/src/components/segment-content/segment-content.scss index 38616a7d90c..1abfe6171f3 100644 --- a/core/src/components/segment-content/segment-content.scss +++ b/core/src/components/segment-content/segment-content.scss @@ -9,6 +9,12 @@ width: 100%; + // Workaround for a Safari/WebKit bug where flexbox children with dynamic + // height (e.g., height: fit-content) are not included in the scrollable area + // when using horizontal scrolling. This is needed to make the segment view + // scroll to the correct content. + min-height: 1px; + overflow-y: scroll; /* Hide scrollbar in Firefox */ From d61cd7858f84396d0cf65f0c8f3e96faf2eb6bc1 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Mon, 14 Jul 2025 16:17:08 -0400 Subject: [PATCH 3/5] test(segment-view): add dynamic height e2e test --- .../test/{input => dynamic-height}/index.html | 36 ++++++------------- 1 file changed, 11 insertions(+), 25 deletions(-) rename core/src/components/segment-view/test/{input => dynamic-height}/index.html (63%) diff --git a/core/src/components/segment-view/test/input/index.html b/core/src/components/segment-view/test/dynamic-height/index.html similarity index 63% rename from core/src/components/segment-view/test/input/index.html rename to core/src/components/segment-view/test/dynamic-height/index.html index 017d61710ec..86c64db0182 100644 --- a/core/src/components/segment-view/test/input/index.html +++ b/core/src/components/segment-view/test/dynamic-height/index.html @@ -2,7 +2,7 @@ - Segment View - Input + Segment View - Dynamic Height - - + + + + First + + + Second + + + Third + + + + + Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora + quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum + mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus + comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The + voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum + defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv + + + + + + + + + `, + config + ); + + // Click the third button + await page.locator('ion-segment-button[value="third"]').click(); + + // Wait for the content to be scrolled + await page.waitForChanges(); + + // Check that the third content is visible + const segmentView = page.locator('ion-segment-view'); + const thirdContent = page.locator('ion-segment-content#third'); + + const viewBox = await segmentView.boundingBox(); + const contentBox = await thirdContent.boundingBox(); + + if (!viewBox || !contentBox) throw new Error('Bounding box not found'); + + // Allow a small tolerance to account for subpixel rendering, + // scrollbars, or layout rounding differences + const tolerance = 10; + expect(contentBox.x).toBeGreaterThanOrEqual(viewBox.x); + expect(contentBox.x + contentBox.width).toBeLessThanOrEqual(viewBox.x + viewBox.width + tolerance); + }); + }); +}); From 424f62a004b1c2ee67b3506383db6aa71abbc04b Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Wed, 16 Jul 2025 10:52:11 -0400 Subject: [PATCH 5/5] test(segment-view): wait for image to load --- .../segment-view/test/dynamic-height/segment-view.e2e.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/core/src/components/segment-view/test/dynamic-height/segment-view.e2e.ts b/core/src/components/segment-view/test/dynamic-height/segment-view.e2e.ts index d90ab35fdba..add7d587e73 100644 --- a/core/src/components/segment-view/test/dynamic-height/segment-view.e2e.ts +++ b/core/src/components/segment-view/test/dynamic-height/segment-view.e2e.ts @@ -59,6 +59,13 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { // Wait for the content to be scrolled await page.waitForChanges(); + // Wait for the image to load and be visible + const imgLocator = page.locator('ion-segment-content#third ion-img'); + await imgLocator.waitFor({ state: 'visible', timeout: 10000 }); + + // Wait for any layout adjustments + await page.waitForChanges(); + // Check that the third content is visible const segmentView = page.locator('ion-segment-view'); const thirdContent = page.locator('ion-segment-content#third');