1 files changed, 98 insertions, 1 deletions
diff --git a/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html b/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html
index 04c44d0904..06277376e9 100644
--- a/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html
+++ b/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html
@@ -2,12 +2,17 @@
 <meta charset="UTF-8">
 <title>height: calc-size() animations</title>
 <link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size">
-
+<meta name="timeout" content="long">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../../support/interpolation-testcommon.js"></script>
 
 <style>
+.parent {
+  display: block;
+  width: 600px;
+  height: 300px;
+}
 .target {
   display: block;
 }
@@ -92,4 +97,96 @@
     { at: 1.25, expect: '125px' },
   ]);
 
+  const KEYWORDS = {
+    "auto": 100,
+    "min-content": 100,
+    "fit-content": 100,
+    "max-content": 100,
+    "stretch": 300,
+  };
+
+  for (const keyword in KEYWORDS) {
+    let expected = KEYWORDS[keyword];
+    test_interpolation({
+      property: 'height',
+      from: keyword,
+      to: `calc-size(${keyword}, size * 2)`,
+    }, [
+      { at: -0.25, expect: `${expected * 0.75}px` },
+      { at: 0, expect: `${expected}px` },
+      { at: 0.75, expect: `${expected * 1.75}px` },
+      { at: 1, expect: `${expected * 2}px` },
+      { at: 1.25, expect: `${expected * 2.25}px` },
+    ]);
+
+    test_interpolation({
+      property: 'height',
+      from: keyword,
+      to: 'calc-size(any, 50px)',
+    }, [
+      { at: -0.25, expect: `${expected * 1.25 - 50 * 0.25}px` },
+      { at: 0, expect: `${expected}px` },
+      { at: 0.75, expect: `${expected * 0.25 + 50 * 0.75}px` },
+      { at: 1, expect: `50px` },
+      { at: 1.25, expect: `${50 * 1.25 - expected * 0.25}px` },
+    ]);
+
+    test_interpolation({
+      property: 'height',
+      from: 'calc-size(any, 50px)',
+      to: `calc-size(${keyword}, size * 2)`,
+    }, [
+      { at: -0.1, expect: `${50 * 1.1 - expected * 0.2}px` },
+      { at: 0, expect: "50px" },
+      { at: 0.75, expect: `${50 * 0.25 + expected * 1.5}px` },
+      { at: 1, expect: `${expected * 2}px` },
+      { at: 1.25, expect: `${expected * 2.5 - 50 * 0.25}px` },
+    ]);
+
+    test_no_interpolation({
+      property: 'height',
+      from: keyword,
+      to: 'calc-size(50px, size)',
+    });
+  }
+
+  const KEYWORD_PAIRS = [
+    [ "auto", "fit-content" ],
+    [ "fit-content", "min-content" ],
+    [ "stretch", "auto" ],
+    [ "max-content", "stretch" ],
+  ];
+
+  for (const pair of KEYWORD_PAIRS) {
+    test_no_interpolation({
+      property: 'height',
+      from: pair[0],
+      to: `calc-size(${pair[1]}, size)`,
+    });
+  }
+
+  test_no_interpolation({
+    property: 'height',
+    from: 'calc-size(20px, size)',
+    to: 'calc-size(50px, size)',
+  });
+
+  test_no_interpolation({
+    property: 'height',
+    from: 'calc-size(50%, size)',
+    to: 'calc-size(50px, size)',
+  });
+
+  test_interpolation({
+    property: 'height',
+    from: 'calc-size(37px, 200px)',
+    to: `calc-size(37px, size * 2 + 3% + 17px)`, /* adds to 100px */
+  }, [
+    { at: -0.25, expect: '225px' },
+    { at: 0, expect: '200px' },
+    { at: 0.75, expect: '125px' },
+    { at: 1, expect: '100px' },
+    { at: 1.25, expect: '75px' },
+  ]);
+
 </script>