Merge pull request #15 from HiDeoo/hd-zero-size-svgs

HiDeoo · Jul 16, 2024 · a035c21 · a035c21
2 parents 3b629e6 + 8b762e6
commit a035c21
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 2 deletions.
diff --git a/docs/src/content/docs/tests/shared-syntax.md b/docs/src/content/docs/tests/shared-syntax.md
@@ -16,6 +16,10 @@ An image using Markdown syntax with no alt text:
 
 ![](../../../assets/tests/starlight-light.png)
 
+A remote SVG image with no explicit width using Markdown syntax:
+
+![D2 diagram](https://d2.atlas.lucas.tools/?script=KkktLuECBAAA__8%3D&)
+
 An image using HTML syntax with the `img` tag:
 
 <img src="https://astro.build/assets/press/astro-logo-light-gradient.png" alt="Astro logo" />

diff --git a/docs/src/content/docs/tests/shared-syntax.mdx b/docs/src/content/docs/tests/shared-syntax.mdx
@@ -16,6 +16,10 @@ An image using Markdown syntax with no alt text:
 
 ![](../../../assets/tests/starlight-light.png)
 
+A remote SVG image with no explicit width using Markdown syntax:
+
+![D2 diagram](https://d2.atlas.lucas.tools/?script=KkktLuECBAAA__8%3D&)
+
 An image using HTML syntax with the `img` tag:
 
 <img src="https://astro.build/assets/press/astro-logo-light-gradient.png" alt="Astro logo" />

diff --git a/packages/starlight-image-zoom/components/ImageZoom.astro b/packages/starlight-image-zoom/components/ImageZoom.astro
@@ -37,6 +37,7 @@ import config from 'virtual:starlight-image-zoom-config'
   starlight-image-zoom-zoomable {
     display: inline-block;
     position: relative;
+    width: 100%;
   }
 
   starlight-image-zoom-zoomable img {
@@ -64,13 +65,18 @@ import config from 'virtual:starlight-image-zoom-config'
     border-radius: 50%;
     display: grid;
     height: 44px;
-    inset: 20px 20px auto auto;
+    inset: 20px auto auto 20px;
+    margin-top: 0 !important;
     padding: 10px;
     place-items: center;
     position: absolute;
     width: 44px;
   }
 
+  .starlight-image-zoom-opened .starlight-image-zoom-control {
+    inset: 20px 20px auto auto;
+  }
+
   .starlight-image-zoom-source {
     visibility: hidden;
   }

diff --git a/packages/starlight-image-zoom/tests/shared-syntax.test.ts b/packages/starlight-image-zoom/tests/shared-syntax.test.ts
@@ -41,7 +41,7 @@ for (const format of formats) {
     await testPage.page.emulateMedia({ colorScheme: 'light' })
     await testPage.goto(slug)
 
-    const image = testPage.getNthImage(4)
+    const image = testPage.getNthImage(5)
     await testPage.zoomImage(image)
 
     expect(await testPage.getZoomedImage().getAttribute('src')).toMatch(/-dark.png$/)
@@ -55,4 +55,13 @@ for (const format of formats) {
 
     expect(await testPage.getZoomedImage().getAttribute('src')).toMatch(/-light.png$/)
   })
+
+  test(`${format}: displays remote SVGs with no explicit width`, async ({ testPage }) => {
+    await testPage.goto(slug)
+
+    const image = testPage.getNthImage(3)
+    const boundingBox = await image.boundingBox()
+
+    expect(boundingBox?.width).not.toBe(0)
+  })
 }