diff --git a/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html b/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html
index 06277376e9f266..6d15c3f22654f7 100644
--- a/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html
+++ b/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html
@@ -180,7 +180,7 @@
   test_interpolation({
     property: 'height',
     from: 'calc-size(37px, 200px)',
-    to: `calc-size(37px, size * 2 + 3% + 17px)`, /* adds to 100px */
+    to: 'calc-size(37px, size * 2 + 3% + 17px)', /* adds to 100px */
   }, [
     { at: -0.25, expect: '225px' },
     { at: 0, expect: '200px' },
@@ -189,4 +189,43 @@
     { at: 1.25, expect: '75px' },
   ]);
 
+  test_interpolation({
+    property: 'height',
+    from: 'calc-size(auto, size)',
+    to: '50%',
+  }, [
+    { at: -0.25, expect: '87.5px' },
+    { at: 0, expect: '100px' },
+    { at: 0.75, expect: '137.5px' },
+    { at: 1, expect: '150px' },
+    { at: 1.25, expect: '162.5px' },
+  ]);
+
+  // Rerun roughly the same test with an auto height container.
+  let auto_style_text = `
+    .parent {
+      height: auto;
+    }
+  `;
+  let auto_style_element = document.createElement("style");
+  auto_style_element.append(document.createTextNode(auto_style_text));
+  document.head.append(auto_style_element);
+
+  test_interpolation({
+    property: 'height',
+    from: 'calc-size(auto, size * 2)',
+    to: '50%',
+  }, [
+    { at: -0.25, expect: '250px' },
+    { at: 0, expect: '200px' },
+    { at: 0.75, expect: '50px' },
+    /* TODO(https://crbug.com/40339056): It's questionable whether this should
+     * be the case, particularly for transitions.  Perhaps the value at the
+     * end should have its percentage-ness back and be 100px here? */
+    { at: 1, expect: '0px' },
+    { at: 1.25, expect: '0px' },
+  ]);
+
+  auto_style_element.remove();
+
 </script>