Bug 1886814 [wpt PR 45256] - Implement rules for when we can interpolate calc-size() expressions., a=testonly

Automatic update from web-platform-tests
Implement rules for when we can interpolate calc-size() expressions.

This starts interpolating between two calc-size() expressions, or
between calc-size() expressions and keywords.  It supports most of the
cases where we should do so, though leaves some TODOS for calc-size()
nested within the basis.

The failing tests related to lack of support for the 'stretch' keyword.

Bug: 313072
Change-Id: Ie36719cad46649d5c1f449adbc6d4ad4dfc96308
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5374567
Reviewed-by: Robert Flack <flackr@chromium.org>
Commit-Queue: David Baron <dbaron@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1276526}

--

wpt-commits: bf9b67634ea793234aff670093c6945bee92a614
wpt-pr: 45256

testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html

@@ -141,6 +141,47 @@
       { at: 1.25, expect: `${50 * 1.25 - expected * 0.25}px` },
     ]);
 
+    test_interpolation({
+      property: 'height',
+      from: 'calc-size(any, 50px)',
+      to: `calc-size(${from_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: from_keyword,
+      to: 'calc-size(50px, 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>

testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-width-interpolation.tentative.html

@@ -111,6 +111,47 @@
       { at: 1.25, expect: `${50 * 1.25 - expected * 0.25}px` },
     ]);
 
+    test_interpolation({
+      property: 'width',
+      from: 'calc-size(any, 50px)',
+      to: `calc-size(${from_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: 'width',
+      from: from_keyword,
+      to: 'calc-size(50px, size)',
+    });
   }
 
+  test_no_interpolation({
+    property: 'width',
+    from: 'calc-size(20px, size)',
+    to: 'calc-size(50px, size)',
+  });
+
+  test_no_interpolation({
+    property: 'width',
+    from: 'calc-size(50%, size)',
+    to: 'calc-size(50px, size)',
+  });
+
+  test_interpolation({
+    property: 'width',
+    from: 'calc-size(37px, 200px)',
+    to: `calc-size(37px, size * 2 + 7% + 12px)`, /* 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>