Bug 1248340 - Part 5: Add tests to css-timing. draft
authorBoris Chiou <boris.chiou@gmail.com>
Sun, 26 Feb 2017 18:16:28 +0800
changeset 490812 1914fb302446d03dad2db5cf04e07f6b79a1c008
parent 490811 16a0bef959a90f3ae22fdffdc66de7911c7ac85a
child 490813 c0969cb8dc38e521a203f9f8cc8c086a6cd660e6
push id47233
push userbmo:boris.chiou@gmail.com
push dateWed, 01 Mar 2017 09:53:51 +0000
bugs1248340
milestone54.0a1
Bug 1248340 - Part 5: Add tests to css-timing. MozReview-Commit-ID: HszNpNTCM1N
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css-timing/OWNERS
testing/web-platform/tests/css-timing/frames-timing-functions.html
testing/web-platform/tests/css-timing/testcommon.js
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -41464,16 +41464,26 @@
      {}
     ]
    ],
    "cors/support.js": [
     [
      {}
     ]
    ],
+   "css-timing/OWNERS": [
+    [
+     {}
+    ]
+   ],
+   "css-timing/testcommon.js": [
+    [
+     {}
+    ]
+   ],
    "cssom-view/OWNERS": [
     [
      {}
     ]
    ],
    "cssom-view/iframe.html": [
     [
      {}
@@ -83250,16 +83260,22 @@
     ]
    ],
    "cors/status.htm": [
     [
      "/cors/status.htm",
      {}
     ]
    ],
+   "css-timing/frames-timing-functions.html": [
+    [
+     "/css-timing/frames-timing-functions.html",
+     {}
+    ]
+   ],
    "css-values/unset-value-storage.html": [
     [
      "/css-values/unset-value-storage.html",
      {}
     ]
    ],
    "cssom-view/HTMLBody-ScrollArea_quirksmode.html": [
     [
@@ -159391,16 +159407,28 @@
   "cors/status.htm": [
    "faf2a74b1e23e42656233beaa739ff778cf85067",
    "testharness"
   ],
   "cors/support.js": [
    "8307ed240a531033c96da89197dcfb5ea25cde87",
    "support"
   ],
+  "css-timing/OWNERS": [
+   "c4f52fc673833f80178284b30d6fc4bad1f581d2",
+   "support"
+  ],
+  "css-timing/frames-timing-functions.html": [
+   "5f093dde10d71def831d4f153fad9a73bd5238a6",
+   "testharness"
+  ],
+  "css-timing/testcommon.js": [
+   "036fe976bde411d6b4c3875a5280fbce53179a61",
+   "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/OWNERS
@@ -0,0 +1,1 @@
+@birtles
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css-timing/frames-timing-functions.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Frames timing function tests</title>
+<link rel="help"
+  href="https://www.w3.org/TR/css-timing-1/#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) {
+  createStyle(t, { '@keyframes anim': 'from { left: 0px; }' +
+                                      '  to { left: 100px; }',
+                   '.target': 'animation: anim 10s frames(1)' });
+  var div = createDiv(t);
+  div.className = 'target';
+  assert_equals(getComputedStyle(div).animationTimingFunction, 'ease',
+                'Default easing');
+}, 'The number of frames must be a positive integer greater than 1, or ' +
+   'we fallback to the default easing for CSS Animation Timing Function');
+
+test(function(t) {
+  var div = createDiv(t);
+  div.style.left = '0px';
+  getComputedStyle(div).transitionProperty;
+
+  div.style.transition = 'left 10s';
+  div.style.transitionTimingFunction = 'frames(1)';
+  div.style.left = '100px';
+
+  assert_equals(getComputedStyle(div).transitionTimingFunction, 'ease',
+                'Default easing');
+}, 'The number of frames must be a positive integer greater than 1, or ' +
+   'we fallback to the default easing for CSS Transition Timing Function');
+
+test(function(t) {
+  createStyle(t, { '@keyframes anim': 'from { left: 0px; }' +
+                                      '  to { left: 100px; }',
+                   '.target': 'animation: anim 10s frames(2)' });
+  var div = createDiv(t);
+  div.className = 'target';
+  assert_equals(getComputedStyle(div).animationTimingFunction, 'frames(2)',
+                'The serialization of frames');
+}, 'The serialization of frames is \'frames(n)\', n is the number of frames');
+
+test(function(t) {
+  createStyle(t, { '@keyframes anim': 'from { left: 0px; }' +
+                                      '  to { left: 100px; }',
+                   '.target': 'animation: anim 10s frames(9999999999)' });
+  var div = createDiv(t);
+  div.className = 'target';
+  assert_equals(getComputedStyle(div).animationTimingFunction,
+                'frames(2147483647)',
+                'The clamped frames');
+}, 'The frame number outside the range of a 32bit signed integer is clamped ' +
+   'to the max value');
+
+test(function(t) {
+  createStyle(t, { '@keyframes anim': 'from { left: 0px; }' +
+                                      '  to { left: 100px; }',
+                   '.target': 'animation: anim 11s frames(11) 2' });
+  var div = createDiv(t);
+  div.className = 'target';
+
+  // Animation should display the first and last frame of the animation for
+  // an equal amount of time as each other frame during each loop.
+  var anim = div.getAnimations()[0];
+  anim.currentTime = 0;
+  assert_equals(getComputedStyle(div).left, '0px');
+  anim.currentTime = 999;
+  assert_equals(getComputedStyle(div).left, '0px');
+  anim.currentTime = 1000;
+  assert_equals(getComputedStyle(div).left, '10px');
+  anim.currentTime = 9999;
+  assert_equals(getComputedStyle(div).left, '90px');
+  anim.currentTime = 10000;
+  assert_equals(getComputedStyle(div).left, '100px');
+  anim.currentTime = 11000;
+  assert_equals(getComputedStyle(div).left, '0px'); // The second loop.
+}, 'The computed values are correct with Frames timing on CSS Animations');
+
+test(function(t) {
+  var div = createDiv(t);
+  div.style.left = '0px';
+  getComputedStyle(div).transitionProperty;
+
+  div.style.transition = 'left 11s';
+  div.style.transitionTimingFunction = 'frames(11)';
+  div.style.left = '100px';
+
+  var anim = div.getAnimations()[0];
+  anim.currentTime = 0;
+  assert_equals(getComputedStyle(div).left, '0px');
+  anim.currentTime = 999;
+  assert_equals(getComputedStyle(div).left, '0px');
+  anim.currentTime = 1000;
+  assert_equals(getComputedStyle(div).left, '10px');
+  anim.currentTime = 9999;
+  assert_equals(getComputedStyle(div).left, '90px');
+  anim.currentTime = 10000;
+  assert_equals(getComputedStyle(div).left, '100px');
+  anim.currentTime = 11000;
+  assert_equals(getComputedStyle(div).left, '100px');
+}, 'The computed values are correct with Frames timing on CSS Transitions');
+
+</script>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css-timing/testcommon.js
@@ -0,0 +1,63 @@
+/*
+Distributed under both the W3C Test Suite License [1] and the W3C
+3-clause BSD License [2]. To contribute to a W3C Test Suite, see the
+policies and contribution forms [3].
+
+[1] http://www.w3.org/Consortium/Legal/2008/04-testsuite-license
+[2] http://www.w3.org/Consortium/Legal/2008/03-bsd-license
+[3] http://www.w3.org/2004/10/27-testcases
+ */
+
+'use strict';
+
+var MS_PER_SEC = 1000;
+
+// creates 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 element of given tagName, appends it to the document body and
+// removes the created element during test cleanup
+// if tagName is null or undefined, returns 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;
+}
+
+// Creates a style element with the specified rules, appends it to the document
+// head and removes the created element during test cleanup.
+// |rules| is an object. For example:
+// { '@keyframes anim': '' ,
+//   '.className': 'animation: anim 100s;' };
+// or
+// { '.className1::before': 'content: ""; width: 0px; transition: all 10s;',
+//   '.className2::before': 'width: 100px;' };
+// The object property name could be a keyframes name, or a selector.
+// The object property value is declarations which are property:value pairs
+// split by a space.
+function createStyle(test, rules, doc) {
+  if (!doc) {
+    doc = document;
+  }
+  var extraStyle = doc.createElement('style');
+  doc.head.appendChild(extraStyle);
+  if (rules) {
+    var sheet = extraStyle.sheet;
+    for (var selector in rules) {
+      sheet.insertRule(selector + '{' + rules[selector] + '}',
+                       sheet.cssRules.length);
+    }
+  }
+  test.add_cleanup(function() {
+    extraStyle.remove();
+  });
+}