diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-flexbox/animation')
6 files changed, 512 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-flexbox/animation/discrete-no-interpolation.html b/testing/web-platform/tests/css/css-flexbox/animation/discrete-no-interpolation.html new file mode 100644 index 0000000000..0a990373c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/animation/discrete-no-interpolation.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> +<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: 'flex-direction', + from: 'initial', + to: 'column' +}); + +test_no_interpolation({ + property: 'flex-wrap', + from: 'initial', + to: 'wrap' +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/animation/flex-basis-composition.html b/testing/web-platform/tests/css/css-flexbox/animation/flex-basis-composition.html new file mode 100644 index 0000000000..122761e476 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/animation/flex-basis-composition.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>flex-basis composition</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-basis-property"> +<meta name="assert" content="flex-basis supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'flex-basis', + underlying: '50px', + addFrom: '100px', + addTo: '200px', +}, [ + {at: -0.3, expect: '120px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '200px'}, + {at: 1, expect: '250px'}, + {at: 1.5, expect: '300px'}, +]); + +test_composition({ + property: 'flex-basis', + underlying: '100px', + addFrom: '10px', + addTo: '2px', +}, [ + {at: -0.5, expect: '114px'}, + {at: 0, expect: '110px'}, + {at: 0.5, expect: '106px'}, + {at: 1, expect: '102px'}, + {at: 1.5, expect: '98px'}, // Value clamping should happen after composition. +]); + +test_composition({ + property: 'flex-basis', + underlying: '10%', + addFrom: '100px', + addTo: '20%', +}, [ + {at: -0.3, expect: 'calc(130px + 4%)'}, + {at: 0, expect: 'calc(100px + 10%)'}, + {at: 0.5, expect: 'calc(50px + 20%)'}, + {at: 1, expect: '30%'}, + {at: 1.5, expect: 'calc(-50px + 40%)'}, +]); + +test_composition({ + property: 'flex-basis', + 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: 'flex-basis', + underlying: '100px', + addFrom: '100px', + addTo: 'auto', +}, [ + {at: -0.3, expect: '200px'}, + {at: 0, expect: '200px'}, + {at: 0.5, expect: 'auto'}, + {at: 1, expect: 'auto'}, + {at: 1.5, expect: 'auto'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/animation/flex-basis-interpolation.html b/testing/web-platform/tests/css/css-flexbox/animation/flex-basis-interpolation.html new file mode 100644 index 0000000000..d66e81d492 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/animation/flex-basis-interpolation.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>flex-basis interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-basis-property"> +<meta name="assert" content="flex-basis supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + flex-basis: 3%; +} +.target { + flex-basis: 1%; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'flex-basis', + from: neutralKeyframe, + to: '2%', +}, [ + {at: -0.3, expect: '0.7%'}, + {at: 0, expect: '1%'}, + {at: 0.3, expect: '1.3%'}, + {at: 0.6, expect: '1.6%'}, + {at: 1, expect: '2%'}, + {at: 1.5, expect: '2.5%'}, +]); + +test_no_interpolation({ + property: 'flex-basis', + from: 'initial', + to: '2%', +}); + +test_interpolation({ + property: 'flex-basis', + from: 'inherit', + to: '2%', +}, [ + {at: -0.3, expect: '3.3%'}, + {at: 0, expect: '3%'}, + {at: 0.3, expect: '2.7%'}, + {at: 0.6, expect: '2.4%'}, + {at: 1, expect: '2%'}, + {at: 1.5, expect: '1.5%'}, +]); + +test_no_interpolation({ + property: 'flex-basis', + from: 'unset', + to: '2%', +}); + +test_interpolation({ + property: 'flex-basis', + from: '0px', + to: '100px' +}, [ + {at: -0.3, expect: '0px'}, + {at: 0, expect: '0px'}, + {at: 0.4, expect: '40px'}, + {at: 0.6, expect: '60px'}, + {at: 1, expect: '100px'}, + {at: 1.5, expect: '150px'} +]); + +test_interpolation({ + property: 'flex-basis', + from: '0%', + to: '100%' +}, [ + {at: -0.3, expect: '0%'}, + {at: 0, expect: '0%'}, + {at: 0.4, expect: '40%'}, + {at: 0.6, expect: '60%'}, + {at: 1, expect: '100%'}, + {at: 1.5, expect: '150%'} +]); +</script> + diff --git a/testing/web-platform/tests/css/css-flexbox/animation/flex-grow-interpolation.html b/testing/web-platform/tests/css/css-flexbox/animation/flex-grow-interpolation.html new file mode 100644 index 0000000000..bab5c82105 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/animation/flex-grow-interpolation.html @@ -0,0 +1,119 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>flex-grow interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-grow-property"> +<meta name="assert" content="flex-grow supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + display: flex; + flex-grow: 3; +} +.target { + height: 10px; + background: black; + flex-grow: 1; +} +.filler { + height: 10px; + flex-grow: 1; +} +.expected { + background: green; +} +</style> + +<body> +<template id="target-template"> + <div class="parent"> + <div class="target"></div> + <div class="filler"></div> + </div> +</template> +</body> + +<script> +test_interpolation({ + property: 'flex-grow', + from: neutralKeyframe, + to: '2', +}, [ + {at: -0.3, expect: '0.7'}, + {at: 0, expect: '1'}, + {at: 0.3, expect: '1.3'}, + {at: 0.6, expect: '1.6'}, + {at: 1, expect: '2'}, + {at: 1.5, expect: '2.5'}, +]); + +test_interpolation({ + property: 'flex-grow', + from: 'initial', + to: '2', +}, [ + {at: -0.3, expect: '0'}, + {at: 0, expect: '0'}, + {at: 0.3, expect: '0.6'}, + {at: 0.6, expect: '1.2'}, + {at: 1, expect: '2'}, + {at: 1.5, expect: '3'}, +]); + +test_interpolation({ + property: 'flex-grow', + from: 'inherit', + to: '2', +}, [ + {at: -0.3, expect: '3.3'}, + {at: 0, expect: '3'}, + {at: 0.3, expect: '2.7'}, + {at: 0.6, expect: '2.4'}, + {at: 1, expect: '2'}, + {at: 1.5, expect: '1.5'}, +]); + +test_interpolation({ + property: 'flex-grow', + from: 'unset', + to: '2', +}, [ + {at: -0.3, expect: '0'}, + {at: 0, expect: '0'}, + {at: 0.3, expect: '0.6'}, + {at: 0.6, expect: '1.2'}, + {at: 1, expect: '2'}, + {at: 1.5, expect: '3'}, +]); + +test_interpolation({ + property: 'flex-grow', + from: '1', + to: '2', +}, [ + {at: -5, expect: '0'}, + {at: -0.3, expect: '0.7'}, + {at: 0, expect: '1'}, + {at: 0.3, expect: '1.3'}, + {at: 0.6, expect: '1.6'}, + {at: 1, expect: '2'}, + {at: 1.5, expect: '2.5'}, +]); + +test_interpolation({ + property: 'flex-grow', + from: '0', + to: '1', +}, [ + {at: -5, expect: '0'}, + {at: -0.3, expect: '0'}, + {at: 0, expect: '0'}, + {at: 0.3, expect: '0.3'}, + {at: 0.6, expect: '0.6'}, + {at: 1, expect: '1'}, + {at: 1.5, expect: '1.5'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/animation/flex-shrink-interpolation.html b/testing/web-platform/tests/css/css-flexbox/animation/flex-shrink-interpolation.html new file mode 100644 index 0000000000..da69a06891 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/animation/flex-shrink-interpolation.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>flex-shrink interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-shrink-property"> +<meta name="assert" content="flex-shrink supports animation as a number"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + flex-shrink: 3; +} +.target { + flex-shrink: 1.5; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'flex-shrink', + from: neutralKeyframe, + to: '2', +}, [ + {at: -0.3, expect: '1.35'}, + {at: 0, expect: '1.5'}, + {at: 0.3, expect: '1.65'}, + {at: 0.6, expect: '1.8'}, + {at: 1, expect: '2'}, + {at: 1.5, expect: '2.25'}, +]); + +test_interpolation({ + property: 'flex-shrink', + from: 'initial', + to: '2', +}, [ + {at: -0.3, expect: '0.7'}, + {at: 0, expect: '1'}, + {at: 0.3, expect: '1.3'}, + {at: 0.6, expect: '1.6'}, + {at: 1, expect: '2'}, + {at: 1.5, expect: '2.5'}, +]); + +test_interpolation({ + property: 'flex-shrink', + from: 'inherit', + to: '2', +}, [ + {at: -0.3, expect: '3.3'}, + {at: 0, expect: '3'}, + {at: 0.3, expect: '2.7'}, + {at: 0.6, expect: '2.4'}, + {at: 1, expect: '2'}, + {at: 1.5, expect: '1.5'}, +]); + +test_interpolation({ + property: 'flex-shrink', + from: 'unset', + to: '2', +}, [ + {at: -0.3, expect: '0.7'}, + {at: 0, expect: '1'}, + {at: 0.3, expect: '1.3'}, + {at: 0.6, expect: '1.6'}, + {at: 1, expect: '2'}, + {at: 1.5, expect: '2.5'}, +]); + +test_interpolation({ + property: 'flex-shrink', + from: '1', + to: '2', +}, [ + {at: -5, expect: '0'}, + {at: -0.3, expect: '0.7'}, + {at: 0, expect: '1'}, + {at: 0.3, expect: '1.3'}, + {at: 0.6, expect: '1.6'}, + {at: 1, expect: '2'}, + {at: 1.5, expect: '2.5'}, +]); + +test_interpolation({ + property: 'flex-shrink', + from: '0', + to: '1', +}, [ + {at: -5, expect: '0'}, + {at: -0.3, expect: '0'}, + {at: 0, expect: '0'}, + {at: 0.3, expect: '0.3'}, + {at: 0.6, expect: '0.6'}, + {at: 1, expect: '1'}, + {at: 1.5, expect: '1.5'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/animation/order-interpolation.html b/testing/web-platform/tests/css/css-flexbox/animation/order-interpolation.html new file mode 100644 index 0000000000..8096fc3db6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/animation/order-interpolation.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>order interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property"> +<meta name="assert" content="order supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + order: 30; +} + +.target { + order: 10; +} +</style> +<body> +<script> +test_interpolation({ + property: 'order', + from: neutralKeyframe, + to: '20', +}, [ + {at: -3, expect: '-20'}, + {at: -0.5, expect: '5'}, + {at: 0, expect: '10'}, + {at: 0.3, expect: '13'}, + {at: 0.6, expect: '16'}, + {at: 1, expect: '20'}, + {at: 1.5, expect: '25'}, +]); + +test_interpolation({ + property: 'order', + from: 'initial', + to: '20', +}, [ + {at: -3, expect: '-60'}, + {at: -0.5, expect: '-10'}, + {at: 0, expect: '0'}, + {at: 0.3, expect: '6'}, + {at: 0.6, expect: '12'}, + {at: 1, expect: '20'}, + {at: 1.5, expect: '30'}, +]); + +test_interpolation({ + property: 'order', + from: 'inherit', + to: '20', +}, [ + {at: -3, expect: '60'}, + {at: -0.5, expect: '35'}, + {at: 0, expect: '30'}, + {at: 0.3, expect: '27'}, + {at: 0.6, expect: '24'}, + {at: 1, expect: '20'}, + {at: 1.5, expect: '15'}, +]); + +test_interpolation({ + property: 'order', + from: 'unset', + to: '20', +}, [ + {at: -3, expect: '-60'}, + {at: -0.5, expect: '-10'}, + {at: 0, expect: '0'}, + {at: 0.3, expect: '6'}, + {at: 0.6, expect: '12'}, + {at: 1, expect: '20'}, + {at: 1.5, expect: '30'}, +]); + +test_interpolation({ + property: 'order', + from: '10', + to: '20' +}, [ + {at: -3.0, expect: '-20'}, + {at: -0.5, expect: '5'}, + {at: 0, expect: '10'}, + {at: 0.3, expect: '13'}, + {at: 0.6, expect: '16'}, + {at: 1, expect: '20'}, + {at: 1.5, expect: '25'} +]); + +test_interpolation({ + property: 'order', + from: '2', + to: '4' +}, [ + {at: -3.0, expect: '-4'}, + {at: -0.5, expect: '1'}, + {at: 0, expect: '2'}, + {at: 0.3, expect: '3'}, + {at: 0.6, expect: '3'}, + {at: 1, expect: '4'}, + {at: 1.5, expect: '5'} +]); +</script> |