summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-easing/step-timing-functions-output.html
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-easing/step-timing-functions-output.html
parentInitial commit. (diff)
downloadfirefox-upstream.tar.xz
firefox-upstream.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-easing/step-timing-functions-output.html')
-rw-r--r--testing/web-platform/tests/css/css-easing/step-timing-functions-output.html318
1 files changed, 318 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-easing/step-timing-functions-output.html b/testing/web-platform/tests/css/css-easing/step-timing-functions-output.html
new file mode 100644
index 0000000000..978ac25df6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-easing/step-timing-functions-output.html
@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<meta name="assert"
+content="This test checks the output of step timing functions" />
+<title>Tests for the output of step timing functions</title>
+<link rel="help"
+href="https://drafts.csswg.org/css-easing/#step-timing-functions">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="testcommon.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+test(function(t) {
+ var target = createDiv(t);
+ target.style.position = 'absolute';
+ var anim = target.animate([ { left: '0px', easing: 'step-start' },
+ { left: '100px' } ],
+ { duration: 1000,
+ fill: 'forwards',
+ easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
+
+ // The bezier function produces values greater than 1 (but always less than 2)
+ // in (0.23368794, 1)
+ anim.currentTime = 0;
+ assert_equals(getComputedStyle(target).left, '100px');
+ anim.currentTime = 230;
+ assert_equals(getComputedStyle(target).left, '100px');
+ anim.currentTime = 250;
+ assert_equals(getComputedStyle(target).left, '200px');
+ anim.currentTime = 1000;
+ assert_equals(getComputedStyle(target).left, '100px');
+}, 'step-start easing with input progress greater than 1');
+
+test(function(t) {
+ var target = createDiv(t);
+ target.style.position = 'absolute';
+ var anim = target.animate([ { left: '0px', easing: 'step-start' },
+ { left: '100px' } ],
+ { duration: 1000,
+ fill: 'forwards',
+ easing: 'cubic-bezier(0, 3, 1, 3)' });
+
+ // The bezier function produces values:
+ // Input -> Output
+ // 0.0 0.0
+ // 0.114 ~ 0.245 1.5~2.0, so current step is 2, jumps is 1 => 2.0
+ // 0.245 ~ 0.6 2.0~2.4, so current step is 3, jumps is 1 => 3.0
+ // 0.6 ~ 0.882 2.4~2.0, so current step is 3, jumps is 1 => 3.0
+ // 0.882 ~ 0.976 2.0~1.5, so current step is 2, jumps is 1 => 2.0
+ // 1.0 1.0
+ anim.currentTime = 0;
+ assert_equals(getComputedStyle(target).left, '100px');
+ anim.currentTime = 114;
+ assert_equals(getComputedStyle(target).left, '200px');
+ anim.currentTime = 500;
+ assert_equals(getComputedStyle(target).left, '300px');
+ anim.currentTime = 900;
+ assert_equals(getComputedStyle(target).left, '200px');
+}, 'step-start easing with input progress greater than 2');
+
+test(function(t) {
+ var target = createDiv(t);
+ target.style.position = 'absolute';
+ var anim = target.animate([ { left: '0px', easing: 'step-start' },
+ { left: '100px' } ],
+ { duration: 1000,
+ fill: 'forwards',
+ easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
+
+ // The bezier function produces negative values (but always greater than -1)
+ // in (0, 0.766312060)
+ anim.currentTime = 0;
+ assert_equals(getComputedStyle(target).left, '100px');
+ anim.currentTime = 750;
+ assert_equals(getComputedStyle(target).left, '0px');
+ anim.currentTime = 800;
+ assert_equals(getComputedStyle(target).left, '100px');
+ anim.currentTime = 1000;
+ assert_equals(getComputedStyle(target).left, '100px');
+}, 'step-start easing with input progress less than 0');
+
+test(function(t) {
+ var target = createDiv(t);
+ target.style.position = 'absolute';
+ var anim = target.animate([ { left: '0px', easing: 'step-start' },
+ { left: '100px' } ],
+ { duration: 1000,
+ fill: 'forwards',
+ easing: 'cubic-bezier(0, -2, 1, -2)' });
+
+ // The bezier function produces values less than -1 (but always greater than
+ // -2) in the range (~0.118, ~0.755)
+ anim.currentTime = 0;
+ assert_equals(getComputedStyle(target).left, '100px');
+ anim.currentTime = 100;
+ assert_equals(getComputedStyle(target).left, '0px');
+ anim.currentTime = 500;
+ assert_equals(getComputedStyle(target).left, '-100px');
+ anim.currentTime = 1000;
+ assert_equals(getComputedStyle(target).left, '100px');
+}, 'step-start easing with input progress less than -1');
+
+test(function(t) {
+ var target = createDiv(t);
+ target.style.position = 'absolute';
+ var anim = target.animate([ { left: '0px', easing: 'step-end' },
+ { left: '100px' } ],
+ { duration: 1000,
+ fill: 'forwards',
+ easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
+
+ // The bezier function produces values greater than 1 (but always less than 2)
+ // in (0.23368794, 1)
+ anim.currentTime = 0;
+ assert_equals(getComputedStyle(target).left, '0px');
+ anim.currentTime = 230;
+ assert_equals(getComputedStyle(target).left, '0px');
+ anim.currentTime = 250;
+ assert_equals(getComputedStyle(target).left, '100px');
+ anim.currentTime = 1000;
+ assert_equals(getComputedStyle(target).left, '100px');
+}, 'step-end easing with input progress greater than 1');
+
+test(function(t) {
+ var target = createDiv(t);
+ target.style.position = 'absolute';
+ var anim = target.animate([ { left: '0px', easing: 'step-end' },
+ { left: '100px' } ],
+ { duration: 1000,
+ fill: 'forwards',
+ easing: 'cubic-bezier(0, 3, 1, 3)' });
+
+ // The bezier function produces values:
+ // Input -> Output
+ // 0.0 0.0
+ // 0.114 ~ 0.245 1.5~2.0, so current step is 1, jumps is 1 => 1.0
+ // 0.245 ~ 0.6 2.0~2.4, so current step is 2, jumps is 1 => 2.0
+ // 0.6 ~ 0.882 2.4~2.0, so current step is 2, jumps is 1 => 2.0
+ // 0.882 ~ 0.976 2.0~1.5, so current step is 1, jumps is 1 => 1.0
+ // 1.0 1.0
+ anim.currentTime = 0;
+ assert_equals(getComputedStyle(target).left, '0px');
+ anim.currentTime = 114;
+ assert_equals(getComputedStyle(target).left, '100px');
+ anim.currentTime = 500;
+ assert_equals(getComputedStyle(target).left, '200px');
+ anim.currentTime = 900;
+ assert_equals(getComputedStyle(target).left, '100px');
+}, 'step-end easing with input progress greater than 2');
+
+test(function(t) {
+ var target = createDiv(t);
+ target.style.position = 'absolute';
+ var anim = target.animate([ { left: '0px', easing: 'step-end' },
+ { left: '100px' } ],
+ { duration: 1000,
+ fill: 'forwards',
+ easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
+
+ // The bezier function produces negative values (but always greater than -1)
+ // in (0, 0.766312060)
+ anim.currentTime = 0;
+ assert_equals(getComputedStyle(target).left, '0px');
+ anim.currentTime = 750;
+ assert_equals(getComputedStyle(target).left, '-100px');
+ anim.currentTime = 800;
+ assert_equals(getComputedStyle(target).left, '0px');
+ anim.currentTime = 1000;
+ assert_equals(getComputedStyle(target).left, '100px');
+}, 'step-end easing with input progress less than 0');
+
+test(function(t) {
+ var target = createDiv(t);
+ target.style.position = 'absolute';
+ var anim = target.animate([ { left: '0px', easing: 'steps(1, jump-both)' },
+ { left: '100px' } ],
+ { duration: 1000,
+ fill: 'forwards',
+ easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
+
+ // The bezier function produces values greater than 1 (but always less than 2)
+ // in (0.23368794, 1)
+ anim.currentTime = 0;
+ assert_equals(getComputedStyle(target).left, '50px');
+ anim.currentTime = 230;
+ assert_equals(getComputedStyle(target).left, '50px');
+ anim.currentTime = 250;
+ assert_equals(getComputedStyle(target).left, '100px');
+ anim.currentTime = 1000;
+ assert_equals(getComputedStyle(target).left, '100px');
+}, 'steps(1, jump-both) easing with input progress greater than 1');
+
+test(function(t) {
+ var target = createDiv(t);
+ target.style.position = 'absolute';
+ var anim = target.animate([ { left: '0px', easing: 'steps(1, jump-both)' },
+ { left: '100px' } ],
+ { duration: 1000,
+ fill: 'forwards',
+ easing: 'cubic-bezier(0, 3, 1, 3)' });
+
+ // The bezier function produces values:
+ // Input -> Output
+ // 0.0 0.0, so current step is 1, jumps is 2 => 0.5
+ // 0.114 ~ 0.245 1.5~2.0, so current step is 2, jumps is 2 => 1.0
+ // 0.245 ~ 0.6 2.0~2.4, so current step is 3, jumps is 2 => 1.5
+ // 0.6 ~ 0.882 2.4~2.0, so current step is 3, jumps is 2 => 1.5
+ // 0.882 ~ 0.976 2.0~1.5, so current step is 2, jumps is 2 => 1.0
+ // 1.0 1.0
+ anim.currentTime = 0;
+ assert_equals(getComputedStyle(target).left, '50px');
+ anim.currentTime = 114;
+ assert_equals(getComputedStyle(target).left, '100px');
+ anim.currentTime = 500;
+ assert_equals(getComputedStyle(target).left, '150px');
+ anim.currentTime = 900;
+ assert_equals(getComputedStyle(target).left, '100px');
+}, 'steps(1, jump-both) easing with input progress greater than 2');
+
+test(function(t) {
+ var target = createDiv(t);
+ target.style.position = 'absolute';
+ var anim = target.animate([ { left: '0px', easing: 'steps(1, jump-both)' },
+ { left: '100px' } ],
+ { duration: 1000,
+ fill: 'forwards',
+ easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
+
+ // The bezier function produces negative values (but always greater than -0.5)
+ // in (0, 0.766312060).
+ anim.currentTime = 0;
+ assert_equals(getComputedStyle(target).left, '50px');
+ anim.currentTime = 750;
+ // current step is 0, jumps is 2.
+ assert_equals(getComputedStyle(target).left, '0px');
+ anim.currentTime = 800;
+ assert_equals(getComputedStyle(target).left, '50px');
+ anim.currentTime = 1000;
+ assert_equals(getComputedStyle(target).left, '100px');
+}, 'steps(1, jump-both) easing with input progress less than 0');
+
+test(function(t) {
+ var target = createDiv(t);
+ target.style.position = 'absolute';
+ var anim = target.animate([ { left: '0px', easing: 'steps(2, jump-none)' },
+ { left: '100px' } ],
+ { duration: 1000,
+ fill: 'forwards',
+ easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
+
+ // The bezier function produces values between 0.5 and 1 in
+ // (~0.0442, 0.23368), and values between 1 and 2 in (0.23368794, 1).
+ anim.currentTime = 0;
+ assert_equals(getComputedStyle(target).left, '0px');
+ anim.currentTime = 45;
+ assert_equals(getComputedStyle(target).left, '100px');
+ anim.currentTime = 230;
+ assert_equals(getComputedStyle(target).left, '100px');
+ anim.currentTime = 250;
+ assert_equals(getComputedStyle(target).left, '200px');
+ anim.currentTime = 1000;
+ assert_equals(getComputedStyle(target).left, '100px');
+}, 'steps(2, jump-none) easing with input progress greater than 1');
+
+test(function(t) {
+ var target = createDiv(t);
+ target.style.position = 'absolute';
+ var anim = target.animate([ { left: '0px', easing: 'steps(2, jump-none)' },
+ { left: '100px' } ],
+ { duration: 1000,
+ fill: 'forwards',
+ easing: 'cubic-bezier(0, 3, 1, 3)' });
+
+ // The bezier function produces values:
+ // Input -> Output
+ // 0.0 0.0, so current step is 0, jumps is 1 => 0.0
+ // 0.114 ~ 0.245 1.5~2.0, so current step is 3, jumps is 1 => 3.0
+ // 0.245 ~ 0.6 2.0~2.4, so current step is 4, jumps is 1 => 4.0
+ // 0.6 ~ 0.882 2.4~2.0, so current step is 4, jumps is 1 => 4.0
+ // 0.882 ~ 0.976 2.0~1.5, so current step is 3, jumps is 1 => 3.0
+ // 1.0 1.0
+ anim.currentTime = 0;
+ assert_equals(getComputedStyle(target).left, '0px');
+ anim.currentTime = 114;
+ assert_equals(getComputedStyle(target).left, '300px');
+ anim.currentTime = 500;
+ assert_equals(getComputedStyle(target).left, '400px');
+ anim.currentTime = 900;
+ assert_equals(getComputedStyle(target).left, '300px');
+}, 'steps(2, jump-none) easing with input progress greater than 2');
+
+test(function(t) {
+ var target = createDiv(t);
+ target.style.position = 'absolute';
+ var anim = target.animate([ { left: '0px', easing: 'steps(2, jump-none)' },
+ { left: '100px' } ],
+ { duration: 1000,
+ fill: 'forwards',
+ easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
+
+ // The bezier function produces negative values (but always greater than -0.5)
+ // in (0, 0.766312060).
+ anim.currentTime = 0;
+ assert_equals(getComputedStyle(target).left, '0px');
+ anim.currentTime = 750;
+ // current step is -1, jumps is 1.
+ assert_equals(getComputedStyle(target).left, '-100px');
+ anim.currentTime = 800;
+ assert_equals(getComputedStyle(target).left, '0px');
+ anim.currentTime = 1000;
+ assert_equals(getComputedStyle(target).left, '100px');
+}, 'steps(2, jump-none) easing with input progress less than 0');
+
+</script>
+</body>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-23 11:51:03 +0000