diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/animation')
18 files changed, 1352 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/animation/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-grid/animation/WEB_FEATURES.yml new file mode 100644 index 0000000000..169b731925 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/animation/WEB_FEATURES.yml @@ -0,0 +1,3 @@ +features: +- name: grid-animation + files: "**" diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-no-interpolation.html b/testing/web-platform/tests/css/css-grid/animation/grid-no-interpolation.html new file mode 100644 index 0000000000..33806b8586 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/animation/grid-no-interpolation.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> +<link rel=help href="https://drafts.csswg.org/css-transitions-2/#transition-property-property"> +<link rel=help href="https://drafts.csswg.org/css-grid/#auto-tracks"> +<link rel=help href="https://drafts.csswg.org/css-grid/#grid-auto-flow-property"> +<link rel=help href="https://drafts.csswg.org/css-grid/#line-placement"> +<link rel=help href="https://drafts.csswg.org/css-grid/#propdef-grid-template-areas"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_no_interpolation({ + property: 'grid-auto-columns', + from: 'initial', + to: '123px' +}); + +test_no_interpolation({ + property: 'grid-auto-flow', + from: 'initial', + to: 'column' +}); + +test_no_interpolation({ + property: 'grid-auto-rows', + from: 'initial', + to: '123px' +}); + +test_no_interpolation({ + property: 'grid-column-end', + from: 'initial', + to: '123' +}); + +test_no_interpolation({ + property: 'grid-column-start', + from: 'initial', + to: '123' +}); + +test_no_interpolation({ + property: 'grid-row-end', + from: 'initial', + to: '123' +}); + +test_no_interpolation({ + property: 'grid-row-start', + from: 'initial', + to: '123' +}); + +test_no_interpolation({ + property: 'grid-template-areas', + from: 'initial', + to: '"."' +}); +</script> 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 |