diff --git a/src/assets/main.css b/src/assets/main.css index 66f5798..b4a18c3 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -77,7 +77,6 @@ article>:first-child:is(footer) { /* make a simple slider with flex */ .images { width: 100%; - overflow-y: scroll; display: flex; max-height: 400px; diff --git a/src/components/CardElement.vue b/src/components/CardElement.vue index 4a79e29..963c139 100644 --- a/src/components/CardElement.vue +++ b/src/components/CardElement.vue @@ -40,7 +40,7 @@ defineProps({ :to="to ? to : undefined" >
-
+
{ + const canvas = canvasElement; + // Get the card, which is an `article` tag + const article = canvas.querySelector("article"); + const imagesSelector = canvas.querySelector(".images"); + + // Wait for each image to load + await new Promise((resolve) => { + canvas.querySelectorAll("img").forEach((img: HTMLImageElement) => { + img.onload = resolve; + }); + }); + + // Ensure that it is possible to scroll left and right in the article + expect(getComputedStyle(imagesSelector).overflowX).not.toBe("hidden"); + expect(imagesSelector.scrollWidth).toBeGreaterThan(article.clientWidth); + + // Ensure it is not possible to scroll up and down in the article + expect(imagesSelector.scrollHeight).toBe(article.clientHeight); + }, }; export const BodyOnly: Story = {