Bug 1248340 - Part 5: Add tests to css-timing-1.
MozReview-Commit-ID: HszNpNTCM1N
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -41459,16 +41459,26 @@
{}
]
],
"cors/support.js": [
[
{}
]
],
+ "css-timing-1/OWNERS": [
+ [
+ {}
+ ]
+ ],
+ "css-timing-1/testcommon.js": [
+ [
+ {}
+ ]
+ ],
"cssom-view/OWNERS": [
[
{}
]
],
"cssom-view/iframe.html": [
[
{}
@@ -83281,16 +83291,28 @@
]
],
"cors/status.htm": [
[
"/cors/status.htm",
{}
]
],
+ "css-timing-1/frames-timing-functions-output.html": [
+ [
+ "/css-timing-1/frames-timing-functions-output.html",
+ {}
+ ]
+ ],
+ "css-timing-1/frames-timing-functions-syntax.html": [
+ [
+ "/css-timing-1/frames-timing-functions-syntax.html",
+ {}
+ ]
+ ],
"css-values/unset-value-storage.html": [
[
"/css-values/unset-value-storage.html",
{}
]
],
"cssom-view/HTMLBody-ScrollArea_quirksmode.html": [
[
@@ -159500,16 +159522,32 @@
"cors/status.htm": [
"faf2a74b1e23e42656233beaa739ff778cf85067",
"testharness"
],
"cors/support.js": [
"8307ed240a531033c96da89197dcfb5ea25cde87",
"support"
],
+ "css-timing-1/OWNERS": [
+ "7c9899aa9065ffe6e1206b630124d4939ae53c8f",
+ "support"
+ ],
+ "css-timing-1/frames-timing-functions-output.html": [
+ "d3e2e004ba1ccea736c9c655291e9480f954d1db",
+ "testharness"
+ ],
+ "css-timing-1/frames-timing-functions-syntax.html": [
+ "7ac5eef9cec74746aa076912285398f525b01c06",
+ "testharness"
+ ],
+ "css-timing-1/testcommon.js": [
+ "f9664126fbf6858bd305a3086d3a70afb20b0396",
+ "support"
+ ],
"css-values/unset-value-storage.html": [
"d2e5101f623e29cc993fe2460f6c85f6ec31b471",
"testharness"
],
"cssom-view/HTMLBody-ScrollArea_quirksmode.html": [
"cfe4e07fb9efa140a55175d3cf50ceaced93e1c9",
"testharness"
],new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css-timing-1/OWNERS
@@ -0,0 +1,2 @@
+@birtles
+@BorisChiou
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css-timing-1/frames-timing-functions-output.html
@@ -0,0 +1,81 @@
+<!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');
+
+</script>
+</body>new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css-timing-1/frames-timing-functions-syntax.html
@@ -0,0 +1,31 @@
+<!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>new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css-timing-1/testcommon.js
@@ -0,0 +1,22 @@
+'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;
+}