Update WPT tests for css-easing (previously known as css-timing)
authorclopez@igalia.com <clopez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 30 Jan 2020 03:27:41 +0000 (03:27 +0000)
committerclopez@igalia.com <clopez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 30 Jan 2020 03:27:41 +0000 (03:27 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@255412 268f45cc-cd09-0410-ab3c-d52691b4dbfc

18 files changed:
LayoutTests/imported/w3c/ChangeLog
LayoutTests/imported/w3c/resources/import-expectations.json
LayoutTests/imported/w3c/web-platform-tests/css-timing-1/OWNERS [deleted file]
LayoutTests/imported/w3c/web-platform-tests/css-timing-1/frames-timing-functions-output-expected.txt [deleted file]
LayoutTests/imported/w3c/web-platform-tests/css-timing-1/frames-timing-functions-output.html [deleted file]
LayoutTests/imported/w3c/web-platform-tests/css-timing-1/frames-timing-functions-syntax-expected.txt [deleted file]
LayoutTests/imported/w3c/web-platform-tests/css-timing-1/frames-timing-functions-syntax.html [deleted file]
LayoutTests/imported/w3c/web-platform-tests/css-timing-1/step-timing-functions-output-expected.txt [deleted file]
LayoutTests/imported/w3c/web-platform-tests/css-timing-1/step-timing-functions-output.html [deleted file]
LayoutTests/imported/w3c/web-platform-tests/css/css-easing/META.yml [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-easing/cubic-bezier-timing-functions-output-expected.txt [moved from LayoutTests/imported/w3c/web-platform-tests/css-timing-1/cubic-bezier-timing-functions-output-expected.txt with 100% similarity]
LayoutTests/imported/w3c/web-platform-tests/css/css-easing/cubic-bezier-timing-functions-output.html [moved from LayoutTests/imported/w3c/web-platform-tests/css-timing-1/cubic-bezier-timing-functions-output.html with 98% similarity]
LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-output-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-output.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-syntax-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-syntax.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-easing/testcommon.js [moved from LayoutTests/imported/w3c/web-platform-tests/css-timing-1/testcommon.js with 100% similarity]
LayoutTests/imported/w3c/web-platform-tests/css/css-easing/w3c-import.log [moved from LayoutTests/imported/w3c/web-platform-tests/css-timing-1/w3c-import.log with 53% similarity]

index 56f0f89..02ef3a8 100644 (file)
@@ -1,5 +1,32 @@
 2020-01-29  Carlos Alberto Lopez Perez  <clopez@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  <clopez@igalia.com>
+
         [CSS Fonts] Import css-fonts WPT tests
         https://bugs.webkit.org/show_bug.cgi?id=205866
 
index f2d9493..a3a6dd5 100644 (file)
@@ -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", 
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/OWNERS b/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/OWNERS
deleted file mode 100644 (file)
index ea99501..0000000
+++ /dev/null
@@ -1,2 +0,0 @@
-@birtles
-@BorisChiou
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/frames-timing-functions-output-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/frames-timing-functions-output-expected.txt
deleted file mode 100644 (file)
index 63b2c58..0000000
+++ /dev/null
@@ -1,10 +0,0 @@
-
-FAIL For an input progress of 0.0, the output of a frames timing function is the first frame assert_equals: expected "0px" but got "auto"
-FAIL At a frame boundary, the output of a frames timing function is the next frame assert_equals: expected "0px" but got "auto"
-FAIL For an input progress of 1.0, the output of a frames timing function is the final frame assert_equals: expected "100px" but got "auto"
-FAIL The number of frames is correctly reflected in the frames timing function output assert_equals: expected "0px" but got "auto"
-FAIL The number of frames is correctly reflected in the frames timing function output on CSS Transitions assert_equals: expected "0px" but got "100px"
-FAIL frames easing with input progress greater than 1 Type error
-FAIL frames easing with input progress greater than 1.5 Type error
-FAIL frames easing with input progress less than 0 Type error
-
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/frames-timing-functions-output.html b/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/frames-timing-functions-output.html
deleted file mode 100644 (file)
index 40e0328..0000000
+++ /dev/null
@@ -1,152 +0,0 @@
-<!DOCTYPE html>
-<meta charset=utf-8>
-<meta name="assert"
-content="This test checks the output of frame timing functions with different frame numbers" />
-<title>Frames timing function output tests</title>
-<link rel="help"
-href="https://drafts.csswg.org/css-timing/#frames-timing-functions">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="testcommon.js"></script>
-<style>
-@keyframes anim {
-  from { left: 0px; }
-  to   { left: 100px; }
-}
-</style>
-<body>
-<div id="log"></div>
-<script>
-"use strict";
-
-test(function(t) {
-  const div = createDiv(t);
-  div.style.animation = 'anim 10s frames(2) forwards';
-  assert_equals(getComputedStyle(div).left, '0px');
-}, 'For an input progress of 0.0, the output of a frames timing function is ' +
-   'the first frame');
-
-test(function(t) {
-  const div = createDiv(t);
-  div.style.animation = 'anim 10s frames(2) forwards';
-
-  div.style.animationDelay = '-4999ms';
-  assert_equals(getComputedStyle(div).left, '0px');
-  div.style.animationDelay = '-5000ms';
-  assert_equals(getComputedStyle(div).left, '100px');
-}, 'At a frame boundary, the output of a frames timing function is the next ' +
-   'frame');
-
-test(function(t) {
-  const div = createDiv(t);
-  div.style.animation = 'anim 10s frames(2) forwards';
-
-  div.style.animationDelay = '-10s';
-  assert_equals(getComputedStyle(div).left, '100px');
-}, 'For an input progress of 1.0, the output of a frames timing function is ' +
-   'the final frame');
-
-test(function(t) {
-  const div = createDiv(t);
-  div.style.animation = 'anim 11s frames(11) forwards';
-
-  // We have 11 frames in 11s, so the first step happens at 1.0.
-  div.style.animationDelay = '-999ms';
-  assert_equals(getComputedStyle(div).left, '0px');
-  div.style.animationDelay = '-1000ms';
-  assert_equals(getComputedStyle(div).left, '10px');
-}, 'The number of frames is correctly reflected in the frames timing ' +
-   'function output');
-
-test(function(t) {
-  const div = createDiv(t);
-  div.style.transition = 'left 11s frames(11)';
-
-  // We have 11 frames in 11s, so the first step happens at 1.0.
-  div.style.left = '0px';
-  div.style.transitionDelay = '-999ms';
-  getComputedStyle(div).left;
-  div.style.left = '100px';
-  assert_equals(getComputedStyle(div).left, '0px');
-
-  div.style.left = '0px';
-  div.style.transitionDelay = '-1000ms';
-  getComputedStyle(div).left;
-  div.style.left = '100px';
-  assert_equals(getComputedStyle(div).left, '10px');
-}, 'The number of frames is correctly reflected in the frames timing ' +
-   'function output on CSS Transitions');
-
-test(function(t) {
-  var target = createDiv(t);
-  target.style.position = 'absolute';
-  var anim = target.animate([ { left: '0px', easing: 'frames(2)' },
-                              { 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');
-}, 'frames 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: 'frames(2)' },
-                              { left: '100px' } ],
-                            { duration: 1000,
-                              fill: 'forwards',
-                              easing: 'cubic-bezier(0, 3, 1, 3)' });
-
-  // The bezier funciton produces values:
-  // Input           ->  Output
-  // 0.0                 0.0
-  // 0.114 ~ 0.245       1.5~2.0, so frames(2) is 3.0
-  // 0.245 ~ 0.6         2.0~2.4, so frames(2) is 4.0
-  // 0.6   ~ 0.882       2.4~2.0, so frames(2) is 4.0
-  // 0.882 ~ 0.976       2.0~1.5, so frames(2) is 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');
-}, 'frames easing with input progress greater than 1.5');
-
-test(function(t) {
-  var target = createDiv(t);
-  target.style.position = 'absolute';
-  var anim = target.animate([ { left: '0px', easing: 'frames(2)' },
-                              { 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;
-  assert_equals(getComputedStyle(target).left, '-100px');
-  anim.currentTime = 800;
-  assert_equals(getComputedStyle(target).left, '0px');
-  anim.currentTime = 1000;
-  assert_equals(getComputedStyle(target).left, '100px');
-}, 'frames easing with input progress less than 0');
-
-</script>
-</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/frames-timing-functions-syntax-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/frames-timing-functions-syntax-expected.txt
deleted file mode 100644 (file)
index a12008e..0000000
+++ /dev/null
@@ -1,4 +0,0 @@
-
-PASS The number of frames must be a positive integer greater than 1, or we fallback to the previously-set easing 
-FAIL The serialization of frames is 'frames(n)', n is the number of frames assert_equals: expected "frames(2)" but got "ease"
-
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/frames-timing-functions-syntax.html b/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/frames-timing-functions-syntax.html
deleted file mode 100644 (file)
index 1616bcf..0000000
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<meta charset=utf-8>
-<meta name="assert"
-content="This test checks the syntax output of frame timing functions" />
-<title>Frames timing function syntax tests</title>
-<link rel="help"
-href="https://drafts.csswg.org/css-timing/#frames-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) {
-  const div = createDiv(t);
-  div.style.animation = 'abc 1s ease-in';
-  div.style.animationTimingFunction = 'frames(1)';
-  assert_equals(getComputedStyle(div).animationTimingFunction, 'ease-in');
-}, 'The number of frames must be a positive integer greater than 1, or we ' +
-   'fallback to the previously-set easing');
-
-test(function(t) {
-  const div = createDiv(t);
-  div.style.animation = 'abc 1s frames(  2 )';
-  assert_equals(getComputedStyle(div).animationTimingFunction, 'frames(2)');
-}, 'The serialization of frames is \'frames(n)\', n is the number of frames');
-
-</script>
-</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/step-timing-functions-output-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/step-timing-functions-output-expected.txt
deleted file mode 100644 (file)
index e1cdc9d..0000000
+++ /dev/null
@@ -1,8 +0,0 @@
-
-PASS step-start easing with input progress greater than 1 
-PASS step-end easing with input progress greater than 1 
-PASS step-end 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 less than 0 
-
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/step-timing-functions-output.html b/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/step-timing-functions-output.html
deleted file mode 100644 (file)
index 9a2aa50..0000000
+++ /dev/null
@@ -1,141 +0,0 @@
-<!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-timing/#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-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 greater than 2 (but always less than 3)
-  // in the range (~0.245, ~0.882)
-  anim.currentTime = 0;
-  assert_equals(getComputedStyle(target).left, '0px');
-  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-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, -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');
-
-</script>
-</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/META.yml b/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/META.yml
new file mode 100644 (file)
index 0000000..2c412b4
--- /dev/null
@@ -0,0 +1,4 @@
+spec: https://drafts.csswg.org/css-easing/
+suggested_reviewers:
+  - birtles
+  - BorisChiou
@@ -4,7 +4,7 @@
 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="https://drafts.csswg.org/css-timing/#cubic-bezier-timing-functions">
+href="https://drafts.csswg.org/css-easing/#cubic-bezier-timing-functions">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="testcommon.js"></script>
@@ -15,7 +15,7 @@ href="https://drafts.csswg.org/css-timing/#cubic-bezier-timing-functions">
 
 function assert_style_left_at(animation, time, easingFunction) {
   animation.currentTime = time;
-  var portion = time / animation.effect.getTiming().duration;
+  var portion = time / animation.effect.getTiming()['duration'];
   assert_approx_equals(pxToNum(getComputedStyle(animation.effect.target).left),
                        easingFunction(portion) * 100,
                        0.01,
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-output-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-output-expected.txt
new file mode 100644 (file)
index 0000000..bdd4ae6
--- /dev/null
@@ -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
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-output.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-output.html
new file mode 100644 (file)
index 0000000..978ac25
--- /dev/null
@@ -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>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-syntax-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-syntax-expected.txt
new file mode 100644 (file)
index 0000000..cb8aeea
--- /dev/null
@@ -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 
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-syntax.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-syntax.html
new file mode 100644 (file)
index 0000000..4e8b21e
--- /dev/null
@@ -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="https://drafts.csswg.org/css-easing-1/#step-timing-functions">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="testcommon.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<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>
@@ -1,7 +1,7 @@
 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/w3c/web-platform-tests
+       https://github.com/web-platform-tests/wpt
 
 Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
 
@@ -14,9 +14,8 @@ Property values requiring vendor prefixes:
 None
 ------------------------------------------------------------------------
 List of files:
-/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/OWNERS
-/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/cubic-bezier-timing-functions-output.html
-/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/frames-timing-functions-output.html
-/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/frames-timing-functions-syntax.html
-/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/step-timing-functions-output.html
-/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/testcommon.js
+/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