Diff
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (255411 => 255412)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2020-01-30 02:59:28 UTC (rev 255411)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2020-01-30 03:27:41 UTC (rev 255412)
@@ -1,5 +1,32 @@
2020-01-29 Carlos Alberto Lopez Perez <clo...@igalia.com>
+ Update WPT tests for css-easing (previously known as css-timing)
+ https://bugs.webkit.org/show_bug.cgi?id=206951
+
+ Reviewed by Simon Fraser.
+
+ Rename the directory and update WPT tests.
+
+ * resources/import-expectations.json:
+ * web-platform-tests/css-timing-1/OWNERS: Removed.
+ * web-platform-tests/css-timing-1/frames-timing-functions-output-expected.txt: Removed.
+ * web-platform-tests/css-timing-1/frames-timing-functions-output.html: Removed.
+ * web-platform-tests/css-timing-1/frames-timing-functions-syntax-expected.txt: Removed.
+ * web-platform-tests/css-timing-1/frames-timing-functions-syntax.html: Removed.
+ * web-platform-tests/css-timing-1/step-timing-functions-output-expected.txt: Removed.
+ * web-platform-tests/css-timing-1/step-timing-functions-output.html: Removed.
+ * web-platform-tests/css/css-easing/META.yml: Added.
+ * web-platform-tests/css/css-easing/cubic-bezier-timing-functions-output-expected.txt: Renamed from LayoutTests/imported/w3c/web-platform-tests/css-timing-1/cubic-bezier-timing-functions-output-expected.txt.
+ * web-platform-tests/css/css-easing/cubic-bezier-timing-functions-output.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css-timing-1/cubic-bezier-timing-functions-output.html.
+ * web-platform-tests/css/css-easing/step-timing-functions-output-expected.txt: Added.
+ * web-platform-tests/css/css-easing/step-timing-functions-output.html: Added.
+ * web-platform-tests/css/css-easing/step-timing-functions-syntax-expected.txt: Added.
+ * web-platform-tests/css/css-easing/step-timing-functions-syntax.html: Added.
+ * web-platform-tests/css/css-easing/testcommon.js: Renamed from LayoutTests/imported/w3c/web-platform-tests/css-timing-1/testcommon.js.
+ * web-platform-tests/css/css-easing/w3c-import.log: Renamed from LayoutTests/imported/w3c/web-platform-tests/css-timing-1/w3c-import.log.
+
+2020-01-29 Carlos Alberto Lopez Perez <clo...@igalia.com>
+
[CSS Fonts] Import css-fonts WPT tests
https://bugs.webkit.org/show_bug.cgi?id=205866
Modified: trunk/LayoutTests/imported/w3c/resources/import-expectations.json (255411 => 255412)
--- trunk/LayoutTests/imported/w3c/resources/import-expectations.json 2020-01-30 02:59:28 UTC (rev 255411)
+++ trunk/LayoutTests/imported/w3c/resources/import-expectations.json 2020-01-30 03:27:41 UTC (rev 255412)
@@ -81,6 +81,7 @@
"web-platform-tests/css/css-backgrounds": "import",
"web-platform-tests/css/css-color": "import",
"web-platform-tests/css/css-display": "import",
+ "web-platform-tests/css/css-easing": "import",
"web-platform-tests/css/css-font-loading": "import",
"web-platform-tests/css/css-fonts": "import",
"web-platform-tests/css/css-grid": "import",
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/META.yml (0 => 255412)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/META.yml (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/META.yml 2020-01-30 03:27:41 UTC (rev 255412)
@@ -0,0 +1,4 @@
+spec: https://drafts.csswg.org/css-easing/
+suggested_reviewers:
+ - birtles
+ - BorisChiou
Copied: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/cubic-bezier-timing-functions-output-expected.txt (from rev 255411, trunk/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/cubic-bezier-timing-functions-output-expected.txt) (0 => 255412)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/cubic-bezier-timing-functions-output-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/cubic-bezier-timing-functions-output-expected.txt 2020-01-30 03:27:41 UTC (rev 255412)
@@ -0,0 +1,6 @@
+
+FAIL cubic-bezier easing with input progress greater than 1 assert_approx_equals: The left of the animation should be approximately 98.8706654939602 at 230ms expected 98.8706654939602 +/- 0.01 but got 98.89859008789062
+FAIL cubic-bezier easing with input progress greater than 1 and where the tangent on the upper boundary is infinity assert_approx_equals: The left of the animation should be approximately 106.31755608768113 at 230ms expected 106.31755608768113 +/- 0.01 but got 106.3595962524414
+FAIL cubic-bezier easing with input progress less than 0 assert_approx_equals: The left of the animation should be approximately -16.589193103032184 at 10ms expected -16.589193103032184 +/- 0.01 but got -17.50836753845215
+FAIL cubic-bezier easing with input progress less than 0 and where the tangent on the lower boundary is infinity assert_approx_equals: The left of the animation should be approximately 0 at 300ms expected 0 +/- 0.01 but got 512.0774536132812
+
Copied: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/cubic-bezier-timing-functions-output.html (from rev 255411, trunk/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/cubic-bezier-timing-functions-output.html) (0 => 255412)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/cubic-bezier-timing-functions-output.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/cubic-bezier-timing-functions-output.html 2020-01-30 03:27:41 UTC (rev 255412)
@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<meta name="assert"
+content="This test checks the output of Cubic Bézier functions" />
+<title>Tests for the output of Cubic Bézier timing functions</title>
+<link rel="help"
+href=""
+<script src=""
+<script src=""
+<script src=""
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+function assert_style_left_at(animation, time, easingFunction) {
+ animation.currentTime = time;
+ var portion = time / animation.effect.getTiming()['duration'];
+ assert_approx_equals(pxToNum(getComputedStyle(animation.effect.target).left),
+ easingFunction(portion) * 100,
+ 0.01,
+ 'The left of the animation should be approximately ' +
+ easingFunction(portion) * 100 + ' at ' + time + 'ms');
+}
+
+test(function(t) {
+ var target = createDiv(t);
+ target.style.position = 'absolute';
+ var anim = target.animate(
+ // http://cubic-bezier.com/#.5,1,.5,0
+ [ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' },
+ { left: '100px' } ],
+ { duration: 1000,
+ fill: 'forwards',
+ easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
+ var keyframeEasing = function(x) {
+ assert_greater_than_equal(x, 0.0,
+ 'This function should be called in [0, 1.0] range');
+ assert_less_than_equal(x, 1.0,
+ 'This function should be called in [0, 1.0] range');
+ return cubicBezier(0.5, 1, 0.5, 0)(x);
+ }
+ var keyframeEasingExtrapolated = function(x) {
+ assert_greater_than(x, 1.0,
+ 'This function should be called in (1.0, infinity) range');
+ // p3x + (p2y - p3y) / (p2x - p3x) * (x - p3x)
+ return 1.0 + (0 - 1) / (0.5 - 1) * (x - 1.0);
+ }
+ var effectEasing = function(x) {
+ return cubicBezier(0, 1.5, 1, 1.5)(x);
+ }
+
+ // The effect-easing produces values greater than 1 in (0.23368794, 1)
+ assert_style_left_at(anim, 0, function(x) {
+ return keyframeEasing(effectEasing(x));
+ });
+ assert_style_left_at(anim, 230, function(x) {
+ return keyframeEasing(effectEasing(x));
+ });
+ assert_style_left_at(anim, 240, function(x) {
+ return keyframeEasingExtrapolated(effectEasing(x));
+ });
+ // Near the extreme point of the effect-easing function
+ assert_style_left_at(anim, 700, function(x) {
+ return keyframeEasingExtrapolated(effectEasing(x));
+ });
+ assert_style_left_at(anim, 990, function(x) {
+ return keyframeEasingExtrapolated(effectEasing(x));
+ });
+ assert_style_left_at(anim, 1000, function(x) {
+ return keyframeEasing(effectEasing(x));
+ });
+}, 'cubic-bezier easing with input progress greater than 1');
+
+test(function(t) {
+ var target = createDiv(t);
+ target.style.position = 'absolute';
+ var anim = target.animate(
+ // http://cubic-bezier.com/#0,1.5,1,1.5
+ [ { left: '0px', easing: 'cubic-bezier(0, 1.5, 1, 1.5)' },
+ { left: '100px' } ],
+ { duration: 1000,
+ fill: 'forwards',
+ easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
+ var easing = function(x) {
+ assert_greater_than_equal(x, 0.0,
+ 'This function should be called in [0, 1.0] range');
+ assert_less_than_equal(x, 1.0,
+ 'This function should be called in [0, 1.0] range');
+ return cubicBezier(0, 1.5, 1, 1.5)(x);
+ }
+ var easingExtrapolated = function(x) {
+ assert_greater_than(x, 1.0,
+ 'This function should be called in negative range');
+ // For cubic-bezier(0, 1.5, 1, 1.5), the tangent at the
+ // endpoint (x = 1.0) is infinity so we should just return 1.0.
+ return 1.0;
+ }
+
+ // The effect-easing produces values greater than 1 in (0.23368794, 1)
+ assert_style_left_at(anim, 0, function(x) {
+ return easing(easing(x))
+ });
+ assert_style_left_at(anim, 230, function(x) {
+ return easing(easing(x))
+ });
+ assert_style_left_at(anim, 240, function(x) {
+ return easingExtrapolated(easing(x));
+ });
+ // Near the extreme point of the effect-easing function
+ assert_style_left_at(anim, 700, function(x) {
+ return easingExtrapolated(easing(x));
+ });
+ assert_style_left_at(anim, 990, function(x) {
+ return easingExtrapolated(easing(x));
+ });
+ assert_style_left_at(anim, 1000, function(x) {
+ return easing(easing(x))
+ });
+}, 'cubic-bezier easing with input progress greater than 1 and where the ' +
+ 'tangent on the upper boundary is infinity');
+
+test(function(t) {
+ var target = createDiv(t);
+ target.style.position = 'absolute';
+ var anim = target.animate(
+ // http://cubic-bezier.com/#.5,1,.5,0
+ [ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' },
+ { left: '100px' } ],
+ { duration: 1000,
+ fill: 'forwards',
+ easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
+ var keyframeEasing = function(x) {
+ assert_greater_than_equal(x, 0.0,
+ 'This function should be called in [0, 1.0] range');
+ assert_less_than_equal(x, 1.0,
+ 'This function should be called in [0, 1.0] range');
+ return cubicBezier(0.5, 1, 0.5, 0)(x);
+ }
+ var keyframeEasingExtrapolated = function(x) {
+ assert_less_than(x, 0.0,
+ 'This function should be called in negative range');
+ // p0x + (p1y - p0y) / (p1x - p0x) * (x - p0x)
+ return (1 / 0.5) * x;
+ }
+ var effectEasing = function(x) {
+ return cubicBezier(0, -0.5, 1, -0.5)(x);
+ }
+
+ // The effect-easing produces negative values in (0, 0.766312060)
+ assert_style_left_at(anim, 0, function(x) {
+ return keyframeEasing(effectEasing(x));
+ });
+ assert_style_left_at(anim, 10, function(x) {
+ return keyframeEasingExtrapolated(effectEasing(x));
+ });
+ // Near the extreme point of the effect-easing function
+ assert_style_left_at(anim, 300, function(x) {
+ return keyframeEasingExtrapolated(effectEasing(x));
+ });
+ assert_style_left_at(anim, 750, function(x) {
+ return keyframeEasingExtrapolated(effectEasing(x));
+ });
+ assert_style_left_at(anim, 770, function(x) {
+ return keyframeEasing(effectEasing(x));
+ });
+ assert_style_left_at(anim, 1000, function(x) {
+ return keyframeEasing(effectEasing(x));
+ });
+}, 'cubic-bezier easing with input progress less than 0');
+
+test(function(t) {
+ var target = createDiv(t);
+ target.style.position = 'absolute';
+ var anim = target.animate(
+ // http://cubic-bezier.com/#0,-0.5,1,-0.5
+ [ { left: '0px', easing: 'cubic-bezier(0, -0.5, 1, -0.5)' },
+ { left: '100px' } ],
+ { duration: 1000,
+ fill: 'forwards',
+ easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
+ var easing = function(x) {
+ assert_greater_than_equal(x, 0.0,
+ 'This function should be called in [0, 1.0] range');
+ assert_less_than_equal(x, 1.0,
+ 'This function should be called in [0, 1.0] range');
+ return cubicBezier(0, -0.5, 1, -0.5)(x);
+ }
+ var easingExtrapolated = function(x) {
+ assert_less_than(x, 0.0,
+ 'This function should be called in negative range');
+ // For cubic-bezier(0, -0.5, 1, -0.5), the tangent at the
+ // endpoint (x = 0.0) is infinity so we should just return 0.0.
+ return 0.0;
+ }
+
+ // The effect-easing produces negative values in (0, 0.766312060)
+ assert_style_left_at(anim, 0, function(x) {
+ return easing(easing(x))
+ });
+ assert_style_left_at(anim, 10, function(x) {
+ return easingExtrapolated(easing(x));
+ });
+ // Near the extreme point of the effect-easing function
+ assert_style_left_at(anim, 300, function(x) {
+ return easingExtrapolated(easing(x));
+ });
+ assert_style_left_at(anim, 750, function(x) {
+ return easingExtrapolated(easing(x));
+ });
+ assert_style_left_at(anim, 770, function(x) {
+ return easing(easing(x))
+ });
+ assert_style_left_at(anim, 1000, function(x) {
+ return easing(easing(x))
+ });
+}, 'cubic-bezier easing with input progress less than 0 and where the ' +
+ 'tangent on the lower boundary is infinity');
+
+</script>
+</body>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-output-expected.txt (0 => 255412)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-output-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-output-expected.txt 2020-01-30 03:27:41 UTC (rev 255412)
@@ -0,0 +1,15 @@
+
+PASS step-start easing with input progress greater than 1
+PASS step-start easing with input progress greater than 2
+PASS step-start easing with input progress less than 0
+PASS step-start easing with input progress less than -1
+PASS step-end easing with input progress greater than 1
+PASS step-end easing with input progress greater than 2
+PASS step-end easing with input progress less than 0
+FAIL steps(1, jump-both) easing with input progress greater than 1 Type error
+FAIL steps(1, jump-both) easing with input progress greater than 2 Type error
+FAIL steps(1, jump-both) easing with input progress less than 0 Type error
+FAIL steps(2, jump-none) easing with input progress greater than 1 Type error
+FAIL steps(2, jump-none) easing with input progress greater than 2 Type error
+FAIL steps(2, jump-none) easing with input progress less than 0 Type error
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-output.html (0 => 255412)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-output.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-output.html 2020-01-30 03:27:41 UTC (rev 255412)
@@ -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=""
+<script src=""
+<script src=""
+<script src=""
+<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>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-syntax-expected.txt (0 => 255412)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-syntax-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-syntax-expected.txt 2020-01-30 03:27:41 UTC (rev 255412)
@@ -0,0 +1,16 @@
+
+FAIL e.style['animation-timing-function'] = "step-start" should set the property value assert_equals: serialization should be canonical expected "steps(1, start)" but got "step-start"
+FAIL e.style['animation-timing-function'] = "step-end" should set the property value assert_equals: serialization should be canonical expected "steps(1)" but got "step-end"
+PASS e.style['animation-timing-function'] = "steps(1, start)" should set the property value
+FAIL e.style['animation-timing-function'] = "steps(1, end)" should set the property value assert_equals: serialization should be canonical expected "steps(1)" but got "steps(1, end)"
+FAIL e.style['animation-timing-function'] = "steps(1, jump-start)" should set the property value assert_not_equals: property should be set got disallowed value ""
+FAIL e.style['animation-timing-function'] = "steps(1, jump-end)" should set the property value assert_not_equals: property should be set got disallowed value ""
+FAIL e.style['animation-timing-function'] = "steps(1, jump-both)" should set the property value assert_not_equals: property should be set got disallowed value ""
+FAIL e.style['animation-timing-function'] = "steps(2, jump-none)" should set the property value assert_not_equals: property should be set got disallowed value ""
+PASS e.style['animation-timing-function'] = "steps(0, start)" should not set the property value
+PASS e.style['animation-timing-function'] = "steps(0, end)" should not set the property value
+PASS e.style['animation-timing-function'] = "steps(0, jump-start)" should not set the property value
+PASS e.style['animation-timing-function'] = "steps(0, jump-end)" should not set the property value
+PASS e.style['animation-timing-function'] = "steps(0, jump-both)" should not set the property value
+PASS e.style['animation-timing-function'] = "steps(1, jump-none)" should not set the property value
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-syntax.html (0 => 255412)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-syntax.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-syntax.html 2020-01-30 03:27:41 UTC (rev 255412)
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<meta name="assert"
+content="This test checks the syntax output of step timing functions" />
+<title>Step timing function syntax tests</title>
+<link rel="help"
+ href=""
+<script src=""
+<script src=""
+<script src=""
+<script src=""
+<body>
+<div id="log"></div>
+<script>
+"use strict";
+
+test_valid_value("animation-timing-function", "step-start", "steps(1, start)");
+test_valid_value("animation-timing-function", "step-end", "steps(1)");
+test_valid_value("animation-timing-function", "steps(1, start)");
+test_valid_value("animation-timing-function", "steps(1, end)", "steps(1)");
+test_valid_value("animation-timing-function", "steps(1, jump-start)");
+test_valid_value("animation-timing-function", "steps(1, jump-end)", "steps(1)");
+test_valid_value("animation-timing-function", "steps(1, jump-both)");
+test_valid_value("animation-timing-function", "steps(2, jump-none)");
+
+test_invalid_value("animation-timing-function", "steps(0, start)");
+test_invalid_value("animation-timing-function", "steps(0, end)");
+test_invalid_value("animation-timing-function", "steps(0, jump-start)");
+test_invalid_value("animation-timing-function", "steps(0, jump-end)");
+test_invalid_value("animation-timing-function", "steps(0, jump-both)");
+test_invalid_value("animation-timing-function", "steps(1, jump-none)");
+
+</script>
+</body>
Copied: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/testcommon.js (from rev 255411, trunk/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/testcommon.js) (0 => 255412)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/testcommon.js (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/testcommon.js 2020-01-30 03:27:41 UTC (rev 255412)
@@ -0,0 +1,65 @@
+'use strict';
+
+// Creates a <div> element, appends it to the document body and
+// removes the created element during test cleanup.
+function createDiv(test, doc) {
+ return createElement(test, 'div', doc);
+}
+
+// Creates an element with the given |tagName|, appends it to the document body
+// and removes the created element during test cleanup.
+// If |tagName| is null or undefined, creates a <div> element.
+function createElement(test, tagName, doc) {
+ if (!doc) {
+ doc = document;
+ }
+ var element = doc.createElement(tagName || 'div');
+ doc.body.appendChild(element);
+ test.add_cleanup(function() {
+ element.remove();
+ });
+ return element;
+}
+
+// Convert px unit value to a Number
+function pxToNum(str) {
+ return Number(String(str).match(/^(-?[\d.]+)px$/)[1]);
+}
+
+// Cubic bezier with control points (0, 0), (x1, y1), (x2, y2), and (1, 1).
+function cubicBezier(x1, y1, x2, y2) {
+ function xForT(t) {
+ var omt = 1-t;
+ return 3 * omt * omt * t * x1 + 3 * omt * t * t * x2 + t * t * t;
+ }
+
+ function yForT(t) {
+ var omt = 1-t;
+ return 3 * omt * omt * t * y1 + 3 * omt * t * t * y2 + t * t * t;
+ }
+
+ function tForX(x) {
+ // Binary subdivision.
+ var mint = 0, maxt = 1;
+ for (var i = 0; i < 30; ++i) {
+ var guesst = (mint + maxt) / 2;
+ var guessx = xForT(guesst);
+ if (x < guessx) {
+ maxt = guesst;
+ } else {
+ mint = guesst;
+ }
+ }
+ return (mint + maxt) / 2;
+ }
+
+ return function bezierClosure(x) {
+ if (x == 0) {
+ return 0;
+ }
+ if (x == 1) {
+ return 1;
+ }
+ return yForT(tForX(x));
+ }
+}
Copied: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/w3c-import.log (from rev 255411, trunk/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/w3c-import.log) (0 => 255412)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/w3c-import.log (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/w3c-import.log 2020-01-30 03:27:41 UTC (rev 255412)
@@ -0,0 +1,21 @@
+The tests in this directory were imported from the W3C repository.
+Do NOT modify these tests directly in WebKit.
+Instead, create a pull request on the WPT github:
+ https://github.com/web-platform-tests/wpt
+
+Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
+
+Do NOT modify or remove this file.
+
+------------------------------------------------------------------------
+Properties requiring vendor prefixes:
+None
+Property values requiring vendor prefixes:
+None
+------------------------------------------------------------------------
+List of files:
+/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/META.yml
+/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/cubic-bezier-timing-functions-output.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-output.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-syntax.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/testcommon.js
