fix(VOverlay): resolve size with CSS function (calc, min, vw) to pixels

Author: J-Sek

packages/vuetify/src/components/VDialog/__test__/VDialog.spec.browser.tsx

@@ -2,7 +2,7 @@
 import { VDialog } from '../VDialog'
 
 // Utilities
-import { commands, render, screen, userEvent, wait } from '@test'
+import { commands, page, render, screen, userEvent, wait } from '@test'
 import { h, nextTick, ref } from 'vue'
 import { createMemoryHistory, createRouter } from 'vue-router'
 
@@ -40,10 +40,28 @@ describe('VDialog', () => {
       </VDialog>
     ))
 
-    await expect.element(screen.getByCSS('.v-overlay__content')).toHaveStyle({ maxWidth: '300px' })
+    expect(screen.getByCSS('.v-overlay__content')).toHaveStyle({ maxWidth: '300px' })
 
     maxWidth.value = 500
-    await expect.element(screen.getByCSS('.v-overlay__content')).toHaveStyle({ maxWidth: '500px' })
+    await expect.poll(() => screen.getByCSS('.v-overlay__content')).toHaveStyle({ maxWidth: '500px' })
+  })
+
+  it('should respect a CSS function max-width', async () => {
+    await page.viewport(1280, 800) // 50vw resolves to 640px
+
+    const model = ref(true)
+    const maxWidth = ref('min(50vw, 200px)')
+    render(() => (
+      <VDialog v-model={ model.value } maxWidth={ maxWidth.value }>
+        <div>Content</div>
+      </VDialog>
+    ))
+
+    await expect.poll(() => document.querySelector('.v-overlay__content')).not.toBeNull()
+    expect(screen.getByCSS('.v-overlay__content').getBoundingClientRect()).toMatchObject({ width: 200 })
+
+    maxWidth.value = 'min(50vw, 1000px)'
+    await expect.poll(() => screen.getByCSS('.v-overlay__content').getBoundingClientRect()).toMatchObject({ width: 640 })
   })
 
   it('should emit afterLeave', async () => {

packages/vuetify/src/components/VOverlay/locationStrategies.ts

@@ -186,6 +186,18 @@ function staticLocationStrategy (data: LocationStrategyData, props: StrategyProp
   return { updateLocation }
 }
 
+/** Resolve a CSS length the browser understands (calc(), min(), vw, …) to pixels */
+function resolveCssLength (value: string, container: HTMLElement, isWidth: boolean) {
+  const probe = document.createElement('div')
+  probe.style.position = 'absolute'
+  probe.style.visibility = 'hidden'
+  probe.style[isWidth ? 'width' : 'height'] = value
+  container.appendChild(probe)
+  const size = isWidth ? probe.offsetWidth : probe.offsetHeight
+  container.removeChild(probe)
+  return size > 0 ? size : Infinity
+}
+
 /** Get size of element ignoring max-width/max-height */
 function getIntrinsicSize (el: HTMLElement, isRtl: boolean) {
   // const scrollables = new Map<Element, [number, number]>()
@@ -257,14 +269,20 @@ function connectedLocationStrategy (data: LocationStrategyData, props: StrategyP
       const isWidth = key.endsWith('Width')
       return () => {
         const raw = props[key]
-        const val = parseFloat(raw!)
-        if (isNaN(val)) return Infinity
-        if (typeof raw === 'string' && raw.endsWith('%')) {
+        if (raw == null) return Infinity
+
+        const container = (data.contentEl.value?.parentElement ?? document.documentElement) as HTMLElement
+
+        if (typeof raw === 'number' || /^-?[\d.]+(?:px)?$/.test(raw.trim())) {
+          return parseFloat(raw as string)
+        }
+        if (raw.endsWith('%')) {
           // resolve against the overlay container, like CSS would
-          const box = getElementBox(data.contentEl.value?.parentElement ?? document.documentElement)
-          return val * (isWidth ? box.width : box.height) / 100
+          const box = getElementBox(container)
+          return parseFloat(raw) * (isWidth ? box.width : box.height) / 100
         }
-        return val
+        // let the browser resolve viewport units, calc(), min(), max(), clamp(), etc.
+        return resolveCssLength(raw, container, isWidth)
       }
     })