diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
| commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
| tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/css-images/animation | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip | |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-images/animation')
3 files changed, 156 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-images/animation/image-no-interpolation.html b/testing/web-platform/tests/css/css-images/animation/image-no-interpolation.html new file mode 100644 index 0000000000..1f9faf7fbb --- /dev/null +++ b/testing/web-platform/tests/css/css-images/animation/image-no-interpolation.html @@ -0,0 +1,24 @@ +<!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://w3c.github.io/csswg-drafts/css-images/#the-image-rendering"> +<link rel=help href="https://w3c.github.io/csswg-drafts/css-images/#the-image-orientation"> +<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: 'image-orientation', + from: 'initial', + to: 'none' +}); + +test_no_interpolation({ + property: 'image-rendering', + from: 'initial', + to: 'pixelated' +}); +</script> diff --git a/testing/web-platform/tests/css/css-images/animation/object-position-interpolation.html b/testing/web-platform/tests/css/css-images/animation/object-position-interpolation.html new file mode 100644 index 0000000000..13a1b177c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/animation/object-position-interpolation.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#the-object-position"> +<meta name="test" content="object-position supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body></body> + +<script> + // Default object-position value is 50% 50% + test_interpolation({ + property: 'object-position', + from: neutralKeyframe, + to: 'left top', + }, [ + { at: -0.25, expect: '62.5% 62.5%' }, + { at: 0, expect: '50% 50%' }, + { at: 0.25, expect: '37.5% 37.5%' }, + { at: 0.5, expect: '25% 25%' }, + { at: 0.75, expect: '12.5% 12.5%' }, + { at: 1, expect: '0% 0%' }, + { at: 1.25, expect: '-12.5% -12.5%' }, + ]); + + // Animate x axis + test_interpolation({ + property: 'object-position', + from: 'initial', + to: 'center top', + }, [ + { at: -0.25, expect: '50% 62.5%' }, + { at: 0, expect: '50% 50%' }, + { at: 0.25, expect: '50% 37.5%' }, + { at: 0.5, expect: '50% 25%' }, + { at: 0.75, expect: '50% 12.5%' }, + { at: 1, expect: '50% 0%' }, + { at: 1.25, expect: '50% -12.5%' }, + ]); + + // Animate y axis + test_interpolation({ + property: 'object-position', + from: 'initial', + to: 'left center', + }, [ + { at: -0.25, expect: '62.5% 50%' }, + { at: 0, expect: '50% 50%' }, + { at: 0.25, expect: '37.5% 50%' }, + { at: 0.5, expect: '25% 50%' }, + { at: 0.75, expect: '12.5% 50%' }, + { at: 1, expect: '0% 50%' }, + { at: 1.25, expect: '-12.5% 50%' }, + ]); + + // Pixel values + test_interpolation({ + property: 'object-position', + from: '20px 20px', + to: '100px 100px', + }, [ + { at: -0.25, expect: '0px 0px' }, + { at: 0, expect: '20px 20px' }, + { at: 0.25, expect: '40px 40px' }, + { at: 0.5, expect: '60px 60px' }, + { at: 0.75, expect: '80px 80px' }, + { at: 1, expect: '100px 100px' }, + { at: 1.25, expect: '120px 120px' }, + ]); +</script> diff --git a/testing/web-platform/tests/css/css-images/animation/object-view-box-interpolation.html b/testing/web-platform/tests/css/css-images/animation/object-view-box-interpolation.html new file mode 100644 index 0000000000..18ac72db70 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/animation/object-view-box-interpolation.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<meta charset="UTF-8"> +<title>clip-path-interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> +<meta name="assert" content="object-view-box supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> +<style> +.target { + width: 100px; + height: 100px; +} +</style> +<body> +<img src="support/exif-orientation-6-ru.jpg"></img> +<script> +test_interpolation({ + property: 'object-view-box', + from: 'inset(0px)', + to: 'inset(20px)', +}, [ + {at: 0, expect: 'inset(0px)'}, + {at: 0.5, expect: 'inset(10px)'}, + {at: 1, expect: 'inset(20px)'}, +]); + +test_interpolation({ + property: 'object-view-box', + from: 'inset(0%)', + to: 'inset(20%)', +}, [ + {at: 0, expect: 'inset(0%)'}, + {at: 0.5, expect: 'inset(10%)'}, + {at: 1, expect: 'inset(20%)'}, +]); + +test_interpolation({ + property: 'object-view-box', + from: 'rect(0px 10px 20px 30px)', + to: 'rect(10px 20px 30px 40px)', +}, [ + {at: 0, expect: 'rect(0px 10px 20px 30px)'}, + {at: 0.5, expect: 'rect(5px 15px 25px 35px)'}, + {at: 1, expect: 'rect(10px 20px 30px 40px)'}, +]); + +test_interpolation({ + property: 'object-view-box', + from: 'xywh(0px 10px 20px 30px)', + to: 'xywh(10px 20px 30px 40px)', +}, [ + {at: 0, expect: 'xywh(0px 10px 20px 30px)'}, + {at: 0.5, expect: 'xywh(5px 15px 25px 35px)'}, + {at: 1, expect: 'xywh(10px 20px 30px 40px)'}, +]); +</script> +</body> |