summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-grid/animation
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-grid/animation
parentInitial commit. (diff)
downloadfirefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/animation')
-rw-r--r--testing/web-platform/tests/css/css-grid/animation/grid-template-columns-001-ref.html21
-rw-r--r--testing/web-platform/tests/css/css-grid/animation/grid-template-columns-001.html38
-rw-r--r--testing/web-platform/tests/css/css-grid/animation/grid-template-columns-composition.html247
-rw-r--r--testing/web-platform/tests/css/css-grid/animation/grid-template-columns-interpolation.html230
-rw-r--r--testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-001.html26
-rw-r--r--testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-002.html26
-rw-r--r--testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-003.html28
-rw-r--r--testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-004.html26
-rw-r--r--testing/web-platform/tests/css/css-grid/animation/grid-template-rows-001-ref.html22
-rw-r--r--testing/web-platform/tests/css/css-grid/animation/grid-template-rows-001.html39
-rw-r--r--testing/web-platform/tests/css/css-grid/animation/grid-template-rows-composition.html247
-rw-r--r--testing/web-platform/tests/css/css-grid/animation/grid-template-rows-interpolation.html231
-rw-r--r--testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-001.html26
-rw-r--r--testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-002.html26
-rw-r--r--testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-003.html28
-rw-r--r--testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-004.html26
16 files changed, 1287 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-001-ref.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-001-ref.html
new file mode 100644
index 0000000000..1d53815f37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Grid: Reference for grid-template-columns interpolation</title>
+ <style>
+ .grid {
+ display: grid;
+ width: 400px;
+ grid-gap: 10px;
+ grid-template-columns: 60px 1fr;
+ }
+ span { border: 1px solid; }
+ </style>
+</head>
+<body>
+ <div class="grid">
+ <span>column1</span>
+ <span>column2</span>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-001.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-001.html
new file mode 100644
index 0000000000..4e618edb22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-001.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+ <title>CSS Grid: Test grid-template-columns interpolation</title>
+ <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+ <link rel="match" href="grid-template-columns-001-ref.html">
+ <meta name="assert" content="The grid-template-columns property should have
+ correct interpolation result.">
+ <style>
+ @keyframes anim {
+ from {
+ grid-template-columns: 20px 1fr;
+ }
+ to {
+ grid-template-columns: 100px 1fr;
+ }
+ }
+ .grid {
+ display: grid;
+ width: 400px;
+ grid-gap: 10px;
+ animation: anim 10s -5s paused linear;
+ }
+ span { border: 1px solid; }
+ </style>
+</head>
+<body>
+ <div class="grid">
+ <span>column1</span>
+ <span>column2</span>
+ </div>
+</body>
+<script>
+ requestAnimationFrame(() => {
+ document.documentElement.classList.remove('reftest-wait');
+ });
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-composition.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-composition.html
new file mode 100644
index 0000000000..2db49bc53e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-composition.html
@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>grid-template-columns composition</title>
+ <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+ <meta name="assert" content="grid-template-columns supports composition.">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/css/support/interpolation-testcommon.js"></script>
+ </head>
+ <body>
+ <script>
+ 'use strict';
+
+ test_composition({
+ property: 'grid-template-columns',
+ underlying: '50px 10%',
+ addFrom: '100px 100px',
+ addTo: '200px 20%',
+ }, [
+ {at: -0.3, expect: '120px calc(130px + 4%)'},
+ {at: 0, expect: '150px calc(100px + 10%)'},
+ {at: 0.5, expect: '200px calc(50px + 20%)'},
+ {at: 1, expect: '250px 30%'},
+ {at: 1.5, expect: '300px calc(-50px + 40%)'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-columns',
+ underlying: '1fr 1fr',
+ addFrom: '1fr 2fr',
+ addTo: '2fr 1fr',
+ }, [
+ {at: -0.5, expect: '1.5fr 3.5fr'},
+ {at: 0, expect: '2fr 3fr'},
+ {at: 0.5, expect: '2.5fr 2.5fr'},
+ {at: 1, expect: '3fr 2fr'},
+ {at: 1.5, expect: '3.5fr 1.5fr'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-columns',
+ underlying: '50px',
+ addFrom: '100px',
+ replaceTo: '200px',
+ }, [
+ {at: -0.3, expect: '135px'},
+ {at: 0, expect: '150px'},
+ {at: 0.5, expect: '175px'},
+ {at: 1, expect: '200px'},
+ {at: 1.5, expect: '225px'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-columns',
+ underlying: '1fr',
+ addFrom: '1fr',
+ replaceTo: '3fr',
+ }, [
+ {at: -0.5, expect: '1.5fr'},
+ {at: 0, expect: '2fr'},
+ {at: 0.5, expect: '2.5fr'},
+ {at: 1, expect: '3fr'},
+ {at: 1.5, expect: '3.5fr'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-columns',
+ underlying: '1fr 1fr',
+ addFrom: '1fr 1fr',
+ addTo: '3fr auto',
+ }, [
+ {at: -0.5, expect: '1fr 2fr'},
+ {at: 0, expect: '2fr 2fr'},
+ {at: 0.5, expect: '3fr auto'},
+ {at: 1, expect: '4fr auto'},
+ {at: 1.5, expect: '5fr auto'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-columns',
+ underlying: '1fr 1fr',
+ addFrom: '1fr auto',
+ addTo: '3fr 3fr',
+ }, [
+ {at: -0.5, expect: '1fr auto'},
+ {at: 0, expect: '2fr auto'},
+ {at: 0.5, expect: '3fr 4fr'},
+ {at: 1, expect: '4fr 4fr'},
+ {at: 1.5, expect: '5fr 4fr'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-columns',
+ underlying: '1fr auto',
+ addFrom: '1fr 1fr',
+ addTo: '3fr 3fr',
+ }, [
+ {at: -0.5, expect: '1fr 0fr'},
+ {at: 0, expect: '2fr 1fr'},
+ {at: 0.5, expect: '3fr 2fr'},
+ {at: 1, expect: '4fr 3fr'},
+ {at: 1.5, expect: '5fr 4fr'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-columns',
+ underlying: '0fr repeat(2, 0fr 10px) 1fr',
+ addFrom: "1fr repeat(2, 1fr 20px) 1fr",
+ addTo: "2fr repeat(2, 3fr 40px) 3fr"
+ }, [
+ {at: -0.3, expect: "0.7fr repeat(2, 0.4fr 24px) 1.4fr"},
+ {at: 0, expect: "1fr repeat(2, 1fr 30px) 2fr"},
+ {at: 0.5, expect: "1.5fr repeat(2, 2fr 40px) 3fr"},
+ {at: 1, expect: "2fr repeat(2, 3fr 50px) 4fr"},
+ {at: 1.5, expect: "2.5fr repeat(2, 4fr 60px) 5fr"}
+ ]);
+
+ test_composition({
+ property: 'grid-template-columns',
+ underlying: '1fr 1fr',
+ addFrom: '1fr [a b] 1fr [d]',
+ addTo: '3fr [c] 3fr',
+ }, [
+ {at: -0.5, expect: '1fr [ a b ] 1fr [d]'},
+ {at: 0, expect: '2fr [ a b ] 2fr [d]'},
+ {at: 0.5, expect: '3fr [c] 3fr'},
+ {at: 1, expect: '4fr [c] 4fr'},
+ {at: 1.5, expect: '5fr [c] 5fr'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-columns',
+ underlying: 'fit-content(5px) fit-content(20px)',
+ addFrom: 'fit-content(5px) fit-content(20px)',
+ addTo: 'fit-content(15px) max-content',
+ }, [
+ {at: -0.5, expect: 'fit-content(5px) fit-content(40px)'},
+ {at: 0, expect: 'fit-content(10px) fit-content(40px)'},
+ {at: 0.5, expect: 'fit-content(15px) max-content'},
+ {at: 1, expect: 'fit-content(20px) max-content'},
+ {at: 1.5, expect: 'fit-content(25px) max-content'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-columns',
+ underlying: 'minmax(5px, 1fr) minmax(10px, 2fr)',
+ addFrom: 'minmax(5px, 1fr) minmax(10px, 2fr)',
+ addTo: 'minmax(15px, 3fr) minmax(30px, auto)',
+ }, [
+ {at: -0.5, expect: 'minmax(5px, 1fr) minmax(10px, 4fr)'},
+ {at: 0, expect: 'minmax(10px, 2fr) minmax(20px, 4fr)'},
+ {at: 0.5, expect: 'minmax(15px, 3fr) minmax(30px, auto)'},
+ {at: 1, expect: 'minmax(20px, 4fr) minmax(40px, auto)'},
+ {at: 1.5, expect: 'minmax(25px, 5fr) minmax(50px, auto)'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-columns',
+ underlying: '1fr 1fr',
+ addFrom: 'none',
+ addTo: '1fr 1fr',
+ }, [
+ {at: -0.5, expect: 'none'},
+ {at: 0, expect: 'none'},
+ {at: 0.3, expect: 'none'},
+ {at: 0.5, expect: '2fr 2fr'},
+ {at: 0.7, expect: '2fr 2fr'},
+ {at: 1, expect: '2fr 2fr'},
+ {at: 1.5, expect: '2fr 2fr'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-columns',
+ underlying: '1fr 1fr',
+ addFrom: '1fr 1fr',
+ addTo: 'none',
+ }, [
+ {at: -0.5, expect: '2fr 2fr'},
+ {at: 0, expect: '2fr 2fr'},
+ {at: 0.3, expect: '2fr 2fr'},
+ {at: 0.5, expect: 'none'},
+ {at: 0.7, expect: 'none'},
+ {at: 1, expect: 'none'},
+ {at: 1.5, expect: 'none'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-columns',
+ underlying: '1fr 1fr 1fr',
+ addFrom: '1fr 1fr 1fr',
+ addTo: '2fr 2fr',
+ }, [
+ {at: -0.5, expect: '2fr 2fr 2fr'},
+ {at: 0, expect: '2fr 2fr 2fr'},
+ {at: 0.3, expect: '2fr 2fr 2fr'},
+ {at: 0.5, expect: '2fr 2fr'},
+ {at: 0.7, expect: '2fr 2fr'},
+ {at: 1, expect: '2fr 2fr'},
+ {at: 1.5, expect: '2fr 2fr'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-columns',
+ underlying: '10px 20px 30px',
+ addFrom: '15px 4px',
+ addTo: '30px 3px',
+ }, [
+ {at: -0.5, expect: '7.5px 4.5px'},
+ {at: 0, expect: '15px 4px'},
+ {at: 0.5, expect: '22.5px 3.5px'},
+ {at: 1, expect: '30px 3px'},
+ {at: 1.5, expect: '37.5px 2.5px'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-columns',
+ addFrom: "repeat(2, 2fr 30px)",
+ addTo: "repeat(3, 3fr 50px)"
+ }, [
+ {at: -0.5, expect: 'repeat(2, 2fr 30px)'},
+ {at: 0, expect: 'repeat(2, 2fr 30px)'},
+ {at: 0.3, expect: 'repeat(2, 2fr 30px)'},
+ {at: 0.5, expect: 'repeat(3, 3fr 50px)'},
+ {at: 0.7, expect: 'repeat(3, 3fr 50px)'},
+ {at: 1, expect: 'repeat(3, 3fr 50px)'},
+ {at: 1.5, expect: 'repeat(3, 3fr 50px)'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-columns',
+ addFrom: "repeat(2, 2fr 30px)",
+ addTo: "repeat(2, 3fr)"
+ }, [
+ {at: -0.5, expect: 'repeat(2, 2fr 30px)'},
+ {at: 0, expect: 'repeat(2, 2fr 30px)'},
+ {at: 0.3, expect: 'repeat(2, 2fr 30px)'},
+ {at: 0.5, expect: 'repeat(2, 3fr)'},
+ {at: 0.7, expect: 'repeat(2, 3fr)'},
+ {at: 1, expect: 'repeat(2, 3fr)'},
+ {at: 1.5, expect: 'repeat(2, 3fr)'},
+ ]);
+
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-interpolation.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-interpolation.html
new file mode 100644
index 0000000000..55df24f708
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-interpolation.html
@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>grid-template-columns interpolation</title>
+ <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+ <meta name="assert" content="grid-template-columns supports animation.">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/css/support/interpolation-testcommon.js"></script>
+ <style>
+ .parent {
+ grid-template-columns: 10px 20px 30px;
+ }
+ </style>
+ </head>
+ <body>
+ <script>
+ 'use strict';
+
+ // Distinct length of track list.
+ test_no_interpolation({
+ property: 'grid-template-columns',
+ from: "1fr 1fr 1fr",
+ to: "2fr 2fr"
+ });
+
+ test_no_interpolation({
+ property: 'grid-template-columns',
+ from: "10px 20px 30px",
+ to: "20px 30px"
+ });
+
+ test_no_interpolation({
+ property: 'grid-template-columns',
+ from: "1fr 1fr 1fr",
+ to: "none"
+ });
+
+ test_no_interpolation({
+ property: 'grid-template-columns',
+ from: "none",
+ to: "20px 30px"
+ });
+
+ // Exercise <explicit-track-list>
+ test_interpolation({
+ property: 'grid-template-columns',
+ from: "10px 20px 30px",
+ to: "20px 30px 40px"
+ }, [
+ {at: -1, expect: "0px 10px 20px"},
+ {at: 0, expect: "10px 20px 30px"},
+ {at: 0.4, expect: "14px 24px 34px"},
+ {at: 0.6, expect: "16px 26px 36px"},
+ {at: 1, expect: "20px 30px 40px"},
+ {at: 2, expect: "30px 40px 50px"}
+ ]);
+
+ test_interpolation({
+ property: 'grid-template-columns',
+ from: "10px 20px 30px",
+ to: "20% 30% 40px"
+ }, [
+ {at: -1, expect: "calc(20px + -20%) calc(40px + -30%) 20px"},
+ {at: 0, expect: "calc(10px + 0%) calc(20px + 0%) 30px"},
+ {at: 0.4, expect: "calc(6px + 8%) calc(12px + 12%) 34px"},
+ {at: 0.6, expect: "calc(4px + 12%) calc(8px + 18%) 36px"},
+ {at: 1, expect: "20% 30% 40px"},
+ {at: 2, expect: "calc(-10px + 40%) calc(-20px + 60%) 50px"}
+ ]);
+
+ test_interpolation({
+ property: 'grid-template-columns',
+ from: "1fr 1fr 1fr",
+ to: "2fr auto 2fr"
+ }, [
+ {at: -1, expect: "0fr 1fr 0fr"},
+ {at: 0, expect: "1fr 1fr 1fr"},
+ {at: 0.4, expect: "1.4fr 1fr 1.4fr"},
+ {at: 0.6, expect: "1.6fr auto 1.6fr"},
+ {at: 1, expect: "2fr auto 2fr"},
+ {at: 2, expect: "3fr auto 3fr"}
+ ]);
+
+ test_interpolation({
+ property: 'grid-template-columns',
+ from: "1fr [a b] 1fr [d] 1fr",
+ to: "2fr [c] auto 2fr"
+ }, [
+ {at: -1, expect: "0fr [a b] 1fr [d] 0fr"},
+ {at: 0, expect: "1fr [a b] 1fr [d] 1fr"},
+ {at: 0.4, expect: "1.4fr [a b] 1fr [d] 1.4fr"},
+ {at: 0.6, expect: "1.6fr [c] auto 1.6fr"},
+ {at: 1, expect: "2fr [c] auto 2fr"},
+ {at: 2, expect: "3fr [c] auto 3fr"}
+ ]);
+
+ test_interpolation({
+ property: 'grid-template-columns',
+ from: "fit-content(10px) fit-content(20px)",
+ to: "fit-content(20px) max-content"
+ }, [
+ {at: -1, expect: "fit-content(0px) fit-content(20px)"},
+ {at: 0, expect: "fit-content(10px) fit-content(20px)"},
+ {at: 0.4, expect: "fit-content(14px) fit-content(20px)"},
+ {at: 0.6, expect: "fit-content(16px) max-content"},
+ {at: 1, expect: "fit-content(20px) max-content"},
+ {at: 2, expect: "fit-content(30px) max-content"}
+ ]);
+
+ test_interpolation({
+ property: 'grid-template-columns',
+ from: "minmax(10px, 1fr) minmax(20px, 2fr)",
+ to: "minmax(20px, 2fr) minmax(30px, auto)"
+ }, [
+ {at: -1, expect: "minmax(0px, 0fr) minmax(10px, 2fr)"},
+ {at: 0, expect: "minmax(10px, 1fr) minmax(20px, 2fr)"},
+ {at: 0.4, expect: "minmax(14px, 1.4fr) minmax(24px, 2fr)"},
+ {at: 0.6, expect: "minmax(16px, 1.6fr) minmax(26px, auto)"},
+ {at: 1, expect: "minmax(20px, 2fr) minmax(30px, auto)"},
+ {at: 2, expect: "minmax(30px, 3fr) minmax(40px, auto)"}
+ ]);
+
+ test_interpolation({
+ property: 'grid-template-columns',
+ from: "10px 10px 10px",
+ to: "1fr fit-content(20px) minmax(20px, 2fr)"
+ }, [
+ {at: -1, expect: "10px 10px 10px"},
+ {at: 0, expect: "10px 10px 10px"},
+ {at: 0.4, expect: "10px 10px 10px"},
+ {at: 0.6, expect: "1fr fit-content(20px) minmax(20px, 2fr)"},
+ {at: 1, expect: "1fr fit-content(20px) minmax(20px, 2fr)"},
+ {at: 2, expect: "1fr fit-content(20px) minmax(20px, 2fr)"}
+ ]);
+
+ test_interpolation({
+ property: 'grid-template-columns',
+ from: "1fr 1fr 1fr",
+ to: "20px fit-content(20px) minmax(20px, 2fr)"
+ }, [
+ {at: -1, expect: "1fr 1fr 1fr"},
+ {at: 0, expect: "1fr 1fr 1fr"},
+ {at: 0.4, expect: "1fr 1fr 1fr"},
+ {at: 0.6, expect: "20px fit-content(20px) minmax(20px, 2fr)"},
+ {at: 1, expect: "20px fit-content(20px) minmax(20px, 2fr)"},
+ {at: 2, expect: "20px fit-content(20px) minmax(20px, 2fr)"}
+ ]);
+
+ test_interpolation({
+ property: 'grid-template-columns',
+ from: "fit-content(10px)",
+ to: "minmax(20px, 2fr)"
+ }, [
+ {at: -1, expect: "fit-content(10px)"},
+ {at: 0, expect: "fit-content(10px)"},
+ {at: 0.4, expect: "fit-content(10px)"},
+ {at: 0.6, expect: "minmax(20px, 2fr)"},
+ {at: 1, expect: "minmax(20px, 2fr)"},
+ {at: 2, expect: "minmax(20px, 2fr)"}
+ ]);
+
+ test_interpolation({
+ property: 'grid-template-columns',
+ from: "inherit",
+ to: "20px 30px 40px"
+ }, [
+ {at: -1, expect: "0px 10px 20px"},
+ {at: 0, expect: "10px 20px 30px"},
+ {at: 0.4, expect: "14px 24px 34px"},
+ {at: 0.6, expect: "16px 26px 36px"},
+ {at: 1, expect: "20px 30px 40px"},
+ {at: 2, expect: "30px 40px 50px"}
+ ]);
+
+ // Exercise <track-list> (with <track-repeat>)
+ // https://drafts.csswg.org/css-grid/#repeat-interpolation
+ test_no_interpolation({
+ property: 'grid-template-columns',
+ from: "1fr repeat(2, 2fr 30px) 1fr",
+ to: "2fr repeat(2, 3fr 40px 50px) 2fr"
+ });
+
+ test_no_interpolation({
+ property: 'grid-template-columns',
+ from: "1fr repeat(2, 2fr 30px) 1fr",
+ to: "2fr repeat(3, 3fr 40px) 2fr"
+ });
+
+ test_no_interpolation({
+ property: 'grid-template-columns',
+ from: "repeat(2, 2fr 30px)",
+ to: "repeat(4, 40px)"
+ });
+
+ test_interpolation({
+ property: 'grid-template-columns',
+ from: "1fr repeat(2, 2fr auto 30px) 1fr",
+ to: "2fr repeat(2, 3fr 30px 40px) 2fr"
+ }, [
+ {at: -1, expect: "0fr repeat(2, 1fr auto 20px) 0fr"},
+ {at: 0, expect: "1fr repeat(2, 2fr auto 30px) 1fr"},
+ {at: 0.4, expect: "1.4fr repeat(2, 2.4fr auto 34px) 1.4fr"},
+ {at: 0.6, expect: "1.6fr repeat(2, 2.6fr 30px 36px) 1.6fr"},
+ {at: 1, expect: "2fr repeat(2, 3fr 30px 40px) 2fr"},
+ {at: 2, expect: "3fr repeat(2, 4fr 30px 50px) 3fr"}
+ ]);
+
+ // Exercise <auto-track-list>
+ test_no_interpolation({
+ property: 'grid-template-columns',
+ from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
+ to: "20px 20px repeat(auto-fill, minmax(30px, 1fr))"
+ });
+
+ test_no_interpolation({
+ property: 'grid-template-columns',
+ from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
+ to: "20px repeat(auto-fit, minmax(30px, 1fr)) 20px"
+ });
+
+ test_no_interpolation({
+ property: 'grid-template-columns',
+ from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
+ to: "20px repeat(auto-fill, minmax(35px, auto)) 20px"
+ });
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-001.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-001.html
new file mode 100644
index 0000000000..070539e2c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>grid-template-columns neutral keyframe</title>
+ <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+ <meta name="assert" content="grid-template-columns supports neutral keyframe.">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/css/support/interpolation-testcommon.js"></script>
+ </head>
+ <body>
+ <div id="target"></div>
+ <script>
+ test(() => {
+ target.style.gridTemplateColumns = '1fr 200px';
+ var animation = target.animate([{}, {gridTemplateColumns: '30px 300px'}], 1000);
+ animation.pause();
+ animation.currentTime = 500;
+ assert_equals(getComputedStyle(target).gridTemplateColumns, '30px 250px');
+ target.style.gridTemplateColumns = '20px 200px';
+ assert_equals(getComputedStyle(target).gridTemplateColumns, '25px 250px');
+ }, 'Invalidate the result for the neutral keyframe if the value of the <track-breadth> changes.');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-002.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-002.html
new file mode 100644
index 0000000000..6cd163711e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-002.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>grid-template-columns neutral keyframe</title>
+ <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+ <meta name="assert" content="grid-template-columns supports neutral keyframe.">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/css/support/interpolation-testcommon.js"></script>
+ </head>
+ <body>
+ <div id="target"></div>
+ <script>
+ test(() => {
+ target.style.gridTemplateColumns = '10px minmax(10px, 1fr)';
+ var animation = target.animate([{}, {gridTemplateColumns: '30px minmax(30px, 3fr)'}], 1000);
+ animation.pause();
+ animation.currentTime = 500;
+ assert_equals(getComputedStyle(target).gridTemplateColumns, '20px minmax(20px, 2fr)');
+ target.style.gridTemplateColumns = '10px fit-content(10px)';
+ assert_equals(getComputedStyle(target).gridTemplateColumns, '20px minmax(30px, 3fr)');
+ }, 'Invalidate the result for the neutral keyframe if the type of <track-size> changes.');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-003.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-003.html
new file mode 100644
index 0000000000..80187cf684
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-003.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>grid-template-columns neutral keyframe</title>
+ <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+ <meta name="assert" content="grid-template-columns supports neutral keyframe.">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/css/support/interpolation-testcommon.js"></script>
+ </head>
+ <body>
+ <div id="target"></div>
+ <script>
+ test(() => {
+ target.style.gridTemplateColumns = '200px';
+ var animation = target.animate([{}, {gridTemplateColumns: '30px 300px'}], 1000);
+ animation.pause();
+ animation.currentTime = 500;
+ assert_equals(getComputedStyle(target).gridTemplateColumns, '30px 300px');
+ target.style.gridTemplateColumns = '20px 200px';
+ assert_equals(getComputedStyle(target).gridTemplateColumns, '25px 250px');
+ target.style.gridTemplateColumns = '200px';
+ assert_equals(getComputedStyle(target).gridTemplateColumns, '30px 300px');
+ }, 'Invalidate the result for the neutral keyframe if the size of the list changes.');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-004.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-004.html
new file mode 100644
index 0000000000..a207aa713c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-004.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>grid-template-columns neutral keyframe</title>
+ <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+ <meta name="assert" content="grid-template-columns supports neutral keyframe.">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/css/support/interpolation-testcommon.js"></script>
+ </head>
+ <body>
+ <div id="target"></div>
+ <script>
+ test(() => {
+ target.style.gridTemplateColumns = '10px [a] 20px [b]';
+ var animation = target.animate([{}, {gridTemplateColumns: '30px 40px [c]'}], 1000);
+ animation.pause();
+ animation.currentTime = 250;
+ assert_equals(getComputedStyle(target).gridTemplateColumns, '15px [a] 25px [b]');
+ target.style.gridTemplateColumns = '10px 20px [d]';
+ assert_equals(getComputedStyle(target).gridTemplateColumns, '15px 25px [d]');
+ }, 'Invalidate the result for the neutral keyframe if the named lines change.');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-001-ref.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-001-ref.html
new file mode 100644
index 0000000000..8f9929f97d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Grid: Reference for grid-template-rows interpolation</title>
+ <style>
+ .grid {
+ display: grid;
+ width: 400px;
+ height: 400px;
+ grid-gap: 10px;
+ grid-template-rows: 60px 1fr;
+ }
+ span { border: 1px solid; }
+ </style>
+</head>
+<body>
+ <div class="grid">
+ <span>row1</span>
+ <span>row2</span>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-001.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-001.html
new file mode 100644
index 0000000000..403fed432a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+ <title>CSS Grid: Test grid-template-rows interpolation</title>
+ <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+ <link rel="match" href="grid-template-rows-001-ref.html">
+ <meta name="assert" content="The grid-template-rows property should have
+ correct interpolation result.">
+ <style>
+ @keyframes anim {
+ from {
+ grid-template-rows: 20px 1fr;
+ }
+ to {
+ grid-template-rows: 100px 1fr;
+ }
+ }
+ .grid {
+ display: grid;
+ width: 400px;
+ height: 400px;
+ grid-gap: 10px;
+ animation: anim 10s -5s paused linear;
+ }
+ span { border: 1px solid; }
+ </style>
+</head>
+<body>
+ <div class="grid">
+ <span>row1</span>
+ <span>row2</span>
+ </div>
+</body>
+<script>
+ requestAnimationFrame(() => {
+ document.documentElement.classList.remove('reftest-wait');
+ });
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-composition.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-composition.html
new file mode 100644
index 0000000000..42f9c92e9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-composition.html
@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>grid-template-rows composition</title>
+ <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+ <meta name="assert" content="grid-template-rows supports composition.">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/css/support/interpolation-testcommon.js"></script>
+ </head>
+ <body>
+ <script>
+ 'use strict';
+
+ test_composition({
+ property: 'grid-template-rows',
+ underlying: '50px 10%',
+ addFrom: '100px 100px',
+ addTo: '200px 20%',
+ }, [
+ {at: -0.3, expect: '120px calc(130px + 4%)'},
+ {at: 0, expect: '150px calc(100px + 10%)'},
+ {at: 0.5, expect: '200px calc(50px + 20%)'},
+ {at: 1, expect: '250px 30%'},
+ {at: 1.5, expect: '300px calc(-50px + 40%)'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-rows',
+ underlying: '1fr 1fr',
+ addFrom: '1fr 2fr',
+ addTo: '2fr 1fr',
+ }, [
+ {at: -0.5, expect: '1.5fr 3.5fr'},
+ {at: 0, expect: '2fr 3fr'},
+ {at: 0.5, expect: '2.5fr 2.5fr'},
+ {at: 1, expect: '3fr 2fr'},
+ {at: 1.5, expect: '3.5fr 1.5fr'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-rows',
+ underlying: '50px',
+ addFrom: '100px',
+ replaceTo: '200px',
+ }, [
+ {at: -0.3, expect: '135px'},
+ {at: 0, expect: '150px'},
+ {at: 0.5, expect: '175px'},
+ {at: 1, expect: '200px'},
+ {at: 1.5, expect: '225px'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-rows',
+ underlying: '1fr',
+ addFrom: '1fr',
+ replaceTo: '3fr',
+ }, [
+ {at: -0.5, expect: '1.5fr'},
+ {at: 0, expect: '2fr'},
+ {at: 0.5, expect: '2.5fr'},
+ {at: 1, expect: '3fr'},
+ {at: 1.5, expect: '3.5fr'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-rows',
+ underlying: '1fr 1fr',
+ addFrom: '1fr 1fr',
+ addTo: '3fr auto',
+ }, [
+ {at: -0.5, expect: '1fr 2fr'},
+ {at: 0, expect: '2fr 2fr'},
+ {at: 0.5, expect: '3fr auto'},
+ {at: 1, expect: '4fr auto'},
+ {at: 1.5, expect: '5fr auto'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-rows',
+ underlying: '1fr 1fr',
+ addFrom: '1fr auto',
+ addTo: '3fr 3fr',
+ }, [
+ {at: -0.5, expect: '1fr auto'},
+ {at: 0, expect: '2fr auto'},
+ {at: 0.5, expect: '3fr 4fr'},
+ {at: 1, expect: '4fr 4fr'},
+ {at: 1.5, expect: '5fr 4fr'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-rows',
+ underlying: '1fr auto',
+ addFrom: '1fr 1fr',
+ addTo: '3fr 3fr',
+ }, [
+ {at: -0.5, expect: '1fr 0fr'},
+ {at: 0, expect: '2fr 1fr'},
+ {at: 0.5, expect: '3fr 2fr'},
+ {at: 1, expect: '4fr 3fr'},
+ {at: 1.5, expect: '5fr 4fr'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-rows',
+ underlying: '0fr repeat(2, 0fr 10px) 1fr',
+ addFrom: "1fr repeat(2, 1fr 20px) 1fr",
+ addTo: "2fr repeat(2, 3fr 40px) 3fr"
+ }, [
+ {at: -0.3, expect: "0.7fr repeat(2, 0.4fr 24px) 1.4fr"},
+ {at: 0, expect: "1fr repeat(2, 1fr 30px) 2fr"},
+ {at: 0.5, expect: "1.5fr repeat(2, 2fr 40px) 3fr"},
+ {at: 1, expect: "2fr repeat(2, 3fr 50px) 4fr"},
+ {at: 1.5, expect: "2.5fr repeat(2, 4fr 60px) 5fr"}
+ ]);
+
+ test_composition({
+ property: 'grid-template-rows',
+ underlying: '1fr 1fr',
+ addFrom: '1fr [a b] 1fr [d]',
+ addTo: '3fr [c] 3fr',
+ }, [
+ {at: -0.5, expect: '1fr [ a b ] 1fr [d]'},
+ {at: 0, expect: '2fr [ a b ] 2fr [d]'},
+ {at: 0.5, expect: '3fr [c] 3fr'},
+ {at: 1, expect: '4fr [c] 4fr'},
+ {at: 1.5, expect: '5fr [c] 5fr'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-rows',
+ underlying: 'fit-content(5px) fit-content(20px)',
+ addFrom: 'fit-content(5px) fit-content(20px)',
+ addTo: 'fit-content(15px) max-content',
+ }, [
+ {at: -0.5, expect: 'fit-content(5px) fit-content(40px)'},
+ {at: 0, expect: 'fit-content(10px) fit-content(40px)'},
+ {at: 0.5, expect: 'fit-content(15px) max-content'},
+ {at: 1, expect: 'fit-content(20px) max-content'},
+ {at: 1.5, expect: 'fit-content(25px) max-content'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-rows',
+ underlying: 'minmax(5px, 1fr) minmax(10px, 2fr)',
+ addFrom: 'minmax(5px, 1fr) minmax(10px, 2fr)',
+ addTo: 'minmax(15px, 3fr) minmax(30px, auto)',
+ }, [
+ {at: -0.5, expect: 'minmax(5px, 1fr) minmax(10px, 4fr)'},
+ {at: 0, expect: 'minmax(10px, 2fr) minmax(20px, 4fr)'},
+ {at: 0.5, expect: 'minmax(15px, 3fr) minmax(30px, auto)'},
+ {at: 1, expect: 'minmax(20px, 4fr) minmax(40px, auto)'},
+ {at: 1.5, expect: 'minmax(25px, 5fr) minmax(50px, auto)'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-rows',
+ underlying: '1fr 1fr',
+ addFrom: 'none',
+ addTo: '1fr 1fr',
+ }, [
+ {at: -0.5, expect: 'none'},
+ {at: 0, expect: 'none'},
+ {at: 0.3, expect: 'none'},
+ {at: 0.5, expect: '2fr 2fr'},
+ {at: 0.7, expect: '2fr 2fr'},
+ {at: 1, expect: '2fr 2fr'},
+ {at: 1.5, expect: '2fr 2fr'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-rows',
+ underlying: '1fr 1fr',
+ addFrom: '1fr 1fr',
+ addTo: 'none',
+ }, [
+ {at: -0.5, expect: '2fr 2fr'},
+ {at: 0, expect: '2fr 2fr'},
+ {at: 0.3, expect: '2fr 2fr'},
+ {at: 0.5, expect: 'none'},
+ {at: 0.7, expect: 'none'},
+ {at: 1, expect: 'none'},
+ {at: 1.5, expect: 'none'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-rows',
+ underlying: '1fr 1fr 1fr',
+ addFrom: '1fr 1fr 1fr',
+ addTo: '2fr 2fr',
+ }, [
+ {at: -0.5, expect: '2fr 2fr 2fr'},
+ {at: 0, expect: '2fr 2fr 2fr'},
+ {at: 0.3, expect: '2fr 2fr 2fr'},
+ {at: 0.5, expect: '2fr 2fr'},
+ {at: 0.7, expect: '2fr 2fr'},
+ {at: 1, expect: '2fr 2fr'},
+ {at: 1.5, expect: '2fr 2fr'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-rows',
+ underlying: '10px 20px 30px',
+ addFrom: '15px 4px',
+ addTo: '30px 3px',
+ }, [
+ {at: -0.5, expect: '7.5px 4.5px'},
+ {at: 0, expect: '15px 4px'},
+ {at: 0.5, expect: '22.5px 3.5px'},
+ {at: 1, expect: '30px 3px'},
+ {at: 1.5, expect: '37.5px 2.5px'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-rows',
+ addFrom: "repeat(2, 2fr 30px)",
+ addTo: "repeat(3, 3fr 50px)"
+ }, [
+ {at: -0.5, expect: 'repeat(2, 2fr 30px)'},
+ {at: 0, expect: 'repeat(2, 2fr 30px)'},
+ {at: 0.3, expect: 'repeat(2, 2fr 30px)'},
+ {at: 0.5, expect: 'repeat(3, 3fr 50px)'},
+ {at: 0.7, expect: 'repeat(3, 3fr 50px)'},
+ {at: 1, expect: 'repeat(3, 3fr 50px)'},
+ {at: 1.5, expect: 'repeat(3, 3fr 50px)'},
+ ]);
+
+ test_composition({
+ property: 'grid-template-rows',
+ addFrom: "repeat(2, 2fr 30px)",
+ addTo: "repeat(2, 3fr)"
+ }, [
+ {at: -0.5, expect: 'repeat(2, 2fr 30px)'},
+ {at: 0, expect: 'repeat(2, 2fr 30px)'},
+ {at: 0.3, expect: 'repeat(2, 2fr 30px)'},
+ {at: 0.5, expect: 'repeat(2, 3fr)'},
+ {at: 0.7, expect: 'repeat(2, 3fr)'},
+ {at: 1, expect: 'repeat(2, 3fr)'},
+ {at: 1.5, expect: 'repeat(2, 3fr)'},
+ ]);
+
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-interpolation.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-interpolation.html
new file mode 100644
index 0000000000..f749cbd832
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-interpolation.html
@@ -0,0 +1,231 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>grid-template-rows interpolation</title>
+ <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+ <meta name="assert" content="grid-template-rows supports animation.">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/css/support/interpolation-testcommon.js"></script>
+ <style>
+ .parent {
+ grid-template-rows: 10px 20px 30px;
+ }
+ </style>
+ </head>
+ <body>
+ <script>
+ 'use strict';
+
+ // Distinct length of track list.
+ test_no_interpolation({
+ property: 'grid-template-rows',
+ from: "1fr 1fr 1fr",
+ to: "2fr 2fr"
+ });
+
+ test_no_interpolation({
+ property: 'grid-template-rows',
+ from: "10px 20px 30px",
+ to: "20px 30px"
+ });
+
+ test_no_interpolation({
+ property: 'grid-template-rows',
+ from: "1fr 1fr 1fr",
+ to: "none"
+ });
+
+ test_no_interpolation({
+ property: 'grid-template-rows',
+ from: "none",
+ to: "20px 30px"
+ });
+
+ // Exercise <explicit-track-list>
+ test_interpolation({
+ property: 'grid-template-rows',
+ from: "10px 20px 30px",
+ to: "20px 30px 40px"
+ }, [
+ {at: -1, expect: "0px 10px 20px"},
+ {at: 0, expect: "10px 20px 30px"},
+ {at: 0.4, expect: "14px 24px 34px"},
+ {at: 0.6, expect: "16px 26px 36px"},
+ {at: 1, expect: "20px 30px 40px"},
+ {at: 2, expect: "30px 40px 50px"}
+ ]);
+
+ test_interpolation({
+ property: 'grid-template-rows',
+ from: "10px 20px 30px",
+ to: "20% 30% 40px"
+ }, [
+ {at: -1, expect: "calc(20px + -20%) calc(40px + -30%) 20px"},
+ {at: 0, expect: "calc(10px + 0%) calc(20px + 0%) 30px"},
+ {at: 0.4, expect: "calc(6px + 8%) calc(12px + 12%) 34px"},
+ {at: 0.6, expect: "calc(4px + 12%) calc(8px + 18%) 36px"},
+ {at: 1, expect: "20% 30% 40px"},
+ {at: 2, expect: "calc(-10px + 40%) calc(-20px + 60%) 50px"}
+ ]);
+
+ test_interpolation({
+ property: 'grid-template-rows',
+ from: "1fr 1fr 1fr",
+ to: "2fr auto 2fr"
+ }, [
+ {at: -1, expect: "0fr 1fr 0fr"},
+ {at: 0, expect: "1fr 1fr 1fr"},
+ {at: 0.4, expect: "1.4fr 1fr 1.4fr"},
+ {at: 0.6, expect: "1.6fr auto 1.6fr"},
+ {at: 1, expect: "2fr auto 2fr"},
+ {at: 2, expect: "3fr auto 3fr"}
+ ]);
+
+ test_interpolation({
+ property: 'grid-template-rows',
+ from: "1fr [a b] 1fr [d] 1fr",
+ to: "2fr [c] auto 2fr"
+ }, [
+ {at: -1, expect: "0fr [a b] 1fr [d] 0fr"},
+ {at: 0, expect: "1fr [a b] 1fr [d] 1fr"},
+ {at: 0.4, expect: "1.4fr [a b] 1fr [d] 1.4fr"},
+ {at: 0.6, expect: "1.6fr [c] auto 1.6fr"},
+ {at: 1, expect: "2fr [c] auto 2fr"},
+ {at: 2, expect: "3fr [c] auto 3fr"}
+ ]);
+
+ test_interpolation({
+ property: 'grid-template-rows',
+ from: "fit-content(10px) fit-content(20px)",
+ to: "fit-content(20px) max-content"
+ }, [
+ {at: -1, expect: "fit-content(0px) fit-content(20px)"},
+ {at: 0, expect: "fit-content(10px) fit-content(20px)"},
+ {at: 0.4, expect: "fit-content(14px) fit-content(20px)"},
+ {at: 0.6, expect: "fit-content(16px) max-content"},
+ {at: 1, expect: "fit-content(20px) max-content"},
+ {at: 2, expect: "fit-content(30px) max-content"}
+ ]);
+
+ test_interpolation({
+ property: 'grid-template-rows',
+ from: "minmax(10px, 1fr) minmax(20px, 2fr)",
+ to: "minmax(20px, 2fr) minmax(30px, auto)"
+ }, [
+ {at: -1, expect: "minmax(0px, 0fr) minmax(10px, 2fr)"},
+ {at: 0, expect: "minmax(10px, 1fr) minmax(20px, 2fr)"},
+ {at: 0.4, expect: "minmax(14px, 1.4fr) minmax(24px, 2fr)"},
+ {at: 0.6, expect: "minmax(16px, 1.6fr) minmax(26px, auto)"},
+ {at: 1, expect: "minmax(20px, 2fr) minmax(30px, auto)"},
+ {at: 2, expect: "minmax(30px, 3fr) minmax(40px, auto)"}
+ ]);
+
+ test_interpolation({
+ property: 'grid-template-rows',
+ from: "10px 10px 10px",
+ to: "1fr fit-content(20px) minmax(20px, 2fr)"
+ }, [
+ {at: -1, expect: "10px 10px 10px"},
+ {at: 0, expect: "10px 10px 10px"},
+ {at: 0.4, expect: "10px 10px 10px"},
+ {at: 0.6, expect: "1fr fit-content(20px) minmax(20px, 2fr)"},
+ {at: 1, expect: "1fr fit-content(20px) minmax(20px, 2fr)"},
+ {at: 2, expect: "1fr fit-content(20px) minmax(20px, 2fr)"}
+ ]);
+
+ test_interpolation({
+ property: 'grid-template-rows',
+ from: "1fr 1fr 1fr",
+ to: "20px fit-content(20px) minmax(20px, 2fr)"
+ }, [
+ {at: -1, expect: "1fr 1fr 1fr"},
+ {at: 0, expect: "1fr 1fr 1fr"},
+ {at: 0.4, expect: "1fr 1fr 1fr"},
+ {at: 0.6, expect: "20px fit-content(20px) minmax(20px, 2fr)"},
+ {at: 1, expect: "20px fit-content(20px) minmax(20px, 2fr)"},
+ {at: 2, expect: "20px fit-content(20px) minmax(20px, 2fr)"}
+ ]);
+
+ test_interpolation({
+ property: 'grid-template-rows',
+ from: "fit-content(10px)",
+ to: "minmax(20px, 2fr)"
+ }, [
+ {at: -1, expect: "fit-content(10px)"},
+ {at: 0, expect: "fit-content(10px)"},
+ {at: 0.4, expect: "fit-content(10px)"},
+ {at: 0.6, expect: "minmax(20px, 2fr)"},
+ {at: 1, expect: "minmax(20px, 2fr)"},
+ {at: 2, expect: "minmax(20px, 2fr)"}
+ ]);
+
+ test_interpolation({
+ property: 'grid-template-rows',
+ from: "inherit",
+ to: "20px 30px 40px"
+ }, [
+ {at: -1, expect: "0px 10px 20px"},
+ {at: 0, expect: "10px 20px 30px"},
+ {at: 0.4, expect: "14px 24px 34px"},
+ {at: 0.6, expect: "16px 26px 36px"},
+ {at: 1, expect: "20px 30px 40px"},
+ {at: 2, expect: "30px 40px 50px"}
+ ]);
+
+ // Exercise <track-list> (with <track-repeat>)
+ // https://drafts.csswg.org/css-grid/#repeat-interpolation
+ test_no_interpolation({
+ property: 'grid-template-rows',
+ from: "1fr repeat(2, 2fr 30px) 1fr",
+ to: "2fr repeat(2, 3fr 40px 50px) 2fr"
+ });
+
+ test_no_interpolation({
+ property: 'grid-template-rows',
+ from: "1fr repeat(2, 2fr 30px) 1fr",
+ to: "2fr repeat(3, 3fr 40px) 2fr"
+ });
+
+ // See https://github.com/w3c/csswg-drafts/issues/3503
+ test_no_interpolation({
+ property: 'grid-template-rows',
+ from: "repeat(2, 2fr 30px)",
+ to: "repeat(4, 40px)"
+ });
+
+ test_interpolation({
+ property: 'grid-template-rows',
+ from: "1fr repeat(2, 2fr auto 30px) 1fr",
+ to: "2fr repeat(2, 3fr 30px 40px) 2fr"
+ }, [
+ {at: -1, expect: "0fr repeat(2, 1fr auto 20px) 0fr"},
+ {at: 0, expect: "1fr repeat(2, 2fr auto 30px) 1fr"},
+ {at: 0.4, expect: "1.4fr repeat(2, 2.4fr auto 34px) 1.4fr"},
+ {at: 0.6, expect: "1.6fr repeat(2, 2.6fr 30px 36px) 1.6fr"},
+ {at: 1, expect: "2fr repeat(2, 3fr 30px 40px) 2fr"},
+ {at: 2, expect: "3fr repeat(2, 4fr 30px 50px) 3fr"}
+ ]);
+
+ // Exercise <auto-track-list>
+ test_no_interpolation({
+ property: 'grid-template-rows',
+ from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
+ to: "20px 20px repeat(auto-fill, minmax(30px, 1fr))"
+ });
+
+ test_no_interpolation({
+ property: 'grid-template-rows',
+ from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
+ to: "20px repeat(auto-fit, minmax(30px, 1fr)) 20px"
+ });
+
+ test_no_interpolation({
+ property: 'grid-template-rows',
+ from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
+ to: "20px repeat(auto-fill, minmax(35px, auto)) 20px"
+ });
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-001.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-001.html
new file mode 100644
index 0000000000..ecbe0481ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>grid-template-rows neutral keyframe</title>
+ <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+ <meta name="assert" content="grid-template-rows supports neutral keyframe.">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/css/support/interpolation-testcommon.js"></script>
+ </head>
+ <body>
+ <div id="target"></div>
+ <script>
+ test(() => {
+ target.style.gridTemplateRows = '1fr 200px';
+ var animation = target.animate([{}, {gridTemplateRows: '30px 300px'}], 1000);
+ animation.pause();
+ animation.currentTime = 500;
+ assert_equals(getComputedStyle(target).gridTemplateRows, '30px 250px');
+ target.style.gridTemplateRows = '20px 200px';
+ assert_equals(getComputedStyle(target).gridTemplateRows, '25px 250px');
+ }, 'Invalidate the result for the neutral keyframe if the value of the <track-breadth> changes.');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-002.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-002.html
new file mode 100644
index 0000000000..f63d45b4a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-002.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>grid-template-rows neutral keyframe</title>
+ <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+ <meta name="assert" content="grid-template-rows supports neutral keyframe.">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/css/support/interpolation-testcommon.js"></script>
+ </head>
+ <body>
+ <div id="target"></div>
+ <script>
+ test(() => {
+ target.style.gridTemplateRows = '10px minmax(10px, 1fr)';
+ var animation = target.animate([{}, {gridTemplateRows: '30px minmax(30px, 3fr)'}], 1000);
+ animation.pause();
+ animation.currentTime = 500;
+ assert_equals(getComputedStyle(target).gridTemplateRows, '20px minmax(20px, 2fr)');
+ target.style.gridTemplateRows = '10px fit-content(10px)';
+ assert_equals(getComputedStyle(target).gridTemplateRows, '20px minmax(30px, 3fr)');
+ }, 'Invalidate the result for the neutral keyframe if the type of <track-size> changes.');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-003.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-003.html
new file mode 100644
index 0000000000..5ffd67528c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-003.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>grid-template-rows neutral keyframe</title>
+ <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+ <meta name="assert" content="grid-template-rows supports neutral keyframe.">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/css/support/interpolation-testcommon.js"></script>
+ </head>
+ <body>
+ <div id="target"></div>
+ <script>
+ test(() => {
+ target.style.gridTemplateRows = '200px';
+ var animation = target.animate([{}, {gridTemplateRows: '30px 300px'}], 1000);
+ animation.pause();
+ animation.currentTime = 500;
+ assert_equals(getComputedStyle(target).gridTemplateRows, '30px 300px');
+ target.style.gridTemplateRows = '20px 200px';
+ assert_equals(getComputedStyle(target).gridTemplateRows, '25px 250px');
+ target.style.gridTemplateRows = '200px';
+ assert_equals(getComputedStyle(target).gridTemplateRows, '30px 300px');
+ }, 'Invalidate the result for the neutral keyframe if the size of the list changes.');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-004.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-004.html
new file mode 100644
index 0000000000..941e843624
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-004.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>grid-template-rows neutral keyframe</title>
+ <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+ <meta name="assert" content="grid-template-rows supports neutral keyframe.">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/css/support/interpolation-testcommon.js"></script>
+ </head>
+ <body>
+ <div id="target"></div>
+ <script>
+ test(() => {
+ target.style.gridTemplateRows = '10px [a] 20px [b]';
+ var animation = target.animate([{}, {gridTemplateRows: '30px 40px [c]'}], 1000);
+ animation.pause();
+ animation.currentTime = 250;
+ assert_equals(getComputedStyle(target).gridTemplateRows, '15px [a] 25px [b]');
+ target.style.gridTemplateRows = '10px 20px [d]';
+ assert_equals(getComputedStyle(target).gridTemplateRows, '15px 25px [d]');
+ }, 'Invalidate the result for the neutral keyframe if the named lines change.');
+ </script>
+ </body>
+</html> \ No newline at end of file