Update CSS tests to revision d674587d6ae7d2e231d632785559f2613d554eb0

author: Ms2ger <Ms2ger@gmail.com> 2015-08-21 17:46:44 +0200
committer: Ms2ger <Ms2ger@gmail.com> 2015-08-21 18:40:37 +0200
commit: f235d49372ba86d6d01530fe1b9ebdf8bea74468 (patch)
tree: 13d3535ee53fcae1b8d61265e3d97adb00dd60eb /tests/wpt/css-tests/css-animations-1_dev
parent: 7c45ff8e05a6ebd21f9aa5c360e997a01d48b1fc (diff)
download: servo-f235d49372ba86d6d01530fe1b9ebdf8bea74468.tar.gz
servo-f235d49372ba86d6d01530fe1b9ebdf8bea74468.zip
148 files changed, 10752 insertions, 36 deletions
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-001.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-001.htm
new file mode 100644
index 00000000000..366f1009439
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-001.htm
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-delay - negative value</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-18 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-delay is set to a negative time offset,
+                             animation will execute as soon as it is applied
+                             but act as if the animation had started the specified
+                             time in the past." name="assert">
+<style>
+  div {
+    animation-timing-function: linear;
+
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  #test-negative-delay {
+    animation-name: test-negative-delay;
+    animation-duration: 10s;
+    animation-delay: -5s;
+
+    background-color: blue;
+  }
+
+  #ref-no-delay {
+    animation-name: ref-no-delay;
+    animation-duration: 5s;
+
+    background-color: yellow;
+  }
+
+  @keyframes test-negative-delay {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+
+  @keyframes ref-no-delay {
+    from {
+      left: 75px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there are a filled blue square with 'Filler Text'
+    and a filled yellow square with 'Filler Text', and if the two squares
+    start moving together from right to left as soon as the page loads.
+  </p>
+  <div id="test-negative-delay">Filler Text</div>
+  <div id="ref-no-delay">Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-002.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-002.htm
new file mode 100644
index 00000000000..45e8ea15b7b
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-002.htm
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-delay - positive value</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-18 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-delay is set to a positive time offset,
+                             animation will delay execution by the specified offset value." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 5s;
+    animation-delay: 5s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left after about 5 seconds
+    from the time the page is loaded.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-003.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-003.htm
new file mode 100644
index 00000000000..f3c3e1a5d2b
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-003.htm
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-delay - 0s</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-18 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-delay is set to 0s (zero seconds),
+                             animation will execute as soon as it is applied." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-delay: 0s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left as soon as the page loads.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-004.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-004.htm
new file mode 100644
index 00000000000..2d097814670
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-004.htm
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-delay - ::after</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-18 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-delay applies to the ::after pseudo element." name="assert">
+<style>
+  div::after {
+    animation-name: sample;
+    animation-duration: 5s;
+    animation-delay: 5s;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left after about 5 seconds
+    from the time the page is loaded.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-005.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-005.htm
new file mode 100644
index 00000000000..eecf4c77b44
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-005.htm
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-delay - ::before</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-18 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-delay applies to the ::before pseudo element." name="assert">
+<style>
+  div::before {
+    animation-name: sample;
+    animation-duration: 5s;
+    animation-delay: 5s;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left after about 5 seconds
+    from the time the page is loaded.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-006.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-006.htm
new file mode 100644
index 00000000000..d40da375589
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-006.htm
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-delay - initial keyword</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#values" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-delay property accepts 'initial' keyword." name="assert">
+<style>
+  #contatiner {
+    animation-delay: 5s;
+  }
+
+  #test {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-delay: initial;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left upon page load and lasts for a span of 10 seconds.
+  </p>
+  <div id="container">
+    <div id="test">Filler Text</div>
+  </div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-007.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-007.htm
new file mode 100644
index 00000000000..38f99cc0bf5
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-007.htm
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-delay - inherit keyword</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#values" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-delay property accepts 'inherit' keyword." name="assert">
+<style>
+  #container {
+    animation-delay: 5s;
+  }
+
+  #test {
+    animation-name: sample;
+    animation-duration: 5s;
+    animation-delay: inherit;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts staying left for about 5 seconds, and then moves
+    from right to left and lasts for a span of 5 seconds.
+  </p>
+  <div id="container">
+    <div id="test">Filler Text</div>
+  </div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-001.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-001.htm
new file mode 100644
index 00000000000..b57893095df
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-001.htm
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-direction - alternate</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-direction is set to alternate,
+                             animation cycle will iteration that are 
+                             odd counts are played in the normal direction,
+                             and the animation cycle iterations that are 
+                             even counts are played in a reverse direction." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-direction: alternate;
+    animation-iteration-count: infinite;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left on the page load,
+    and then moves from left to right. This cycle gets repeated.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-002.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-002.htm
new file mode 100644
index 00000000000..09e960c18fd
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-002.htm
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-direction - normal</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-direction is set to normal,
+                             all iterations of animation are played as specified." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-direction: normal;
+    animation-iteration-count: infinite;
+   
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled color square with 'Filler Text',
+    which starts moving from right to left, then back to right and moves from
+    right to left again. This cycle gets repeated.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-003.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-003.htm
new file mode 100644
index 00000000000..33416b7a320
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-003.htm
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-direction - alternate-reverse</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-direction is set to alternate-reverse,
+                             the animation cycle iterations that are
+                             odd counts are played in the normal direction,
+                             and the animation cycle iterations that are
+                             even counts are played in a reverse direction." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-direction: alternate-reverse;
+    animation-iteration-count: infinite;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 0px;
+    }
+    to {
+      left: 150px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left on the page load,
+    and then moves from left to right. This cycle gets repeated.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-004.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-004.htm
new file mode 100644
index 00000000000..8a4c2cc68f9
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-004.htm
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-direction - reverse</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-direction is set to reverse,
+                             all iterations of the animation are played in the reverse direction
+                             from the way they were specified." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-direction: reverse;
+    animation-iteration-count: infinite;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled color square with 'Filler Text',
+    which starts moving from left to right, then back to left again and moves from
+    left to right. This cycle gets repeated.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-005.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-005.htm
new file mode 100644
index 00000000000..66550df39c0
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-005.htm
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-direction - ::after</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-direction applies to the ::after pseudo element." name="assert">
+<style>
+  div::after {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-direction: alternate;
+    animation-iteration-count: infinite;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left on the page load,
+    and then moves from left to right. This cycle gets repeated.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-006.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-006.htm
new file mode 100644
index 00000000000..8e9698bb946
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-006.htm
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-direction - ::before</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-direction applies to the ::before pseudo element" name="assert">
+<style>
+  div::before {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-direction: alternate;
+    animation-iteration-count: infinite;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left on the page load,
+    and then moves from left to right. This cycle gets repeated.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-display.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-display.htm
new file mode 100644
index 00000000000..fbd138d5d4a
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-display.htm
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation - display</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animations" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that setting 'display' property to 'none' terminates
+                             running animation applied to the element, and updating 'display'
+                             property to a value other than 'none' will start the animation." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which moves from right to left twice.
+  </p>
+  <div>Filler Text</div>
+  <script>
+    var div = document.getElementsByTagName("div");
+    
+    setTimeout(function() {
+      div[0].style.display = "none";
+    }, 5000);
+
+    setTimeout(function() {
+      div[0].style.display = "block";
+    }, 8000);
+  </script>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-001.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-001.htm
new file mode 100644
index 00000000000..5f0b961a465
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-001.htm
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-duration - blank value</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-duration value is set blank, there will be no animation seen." name="assert">
+<style>
+  div {
+    animation-name: sample;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts staying left for about 2 seconds upon page load,
+    then moves from right to left.
+  </p>
+  <div>Filler Text</div>
+  <script>
+    var div = document.getElementsByTagName("div");
+    div[0].style.animationDuration = "";
+    setTimeout(setAnimationDuration, 2000);
+
+    function setAnimationDuration() {
+      div[0].style.animationDuration = "10s";
+    }
+  </script>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-002.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-002.htm
new file mode 100644
index 00000000000..db945f4be2a
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-002.htm
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-duration - finite value</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-duration is set a finite time offset,
+                             animation takes the specifies time to complete one cycle." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left upon page load and lasts for a span of 10 seconds.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-003.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-003.htm
new file mode 100644
index 00000000000..a3c5d5ab60d
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-003.htm
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-duration - negative value</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-duration is set to a negative value,
+                             it is treated as 0s (zero seconds) and no animation is seen." name="assert">
+<style>
+  div {
+    animation-name: sample;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts staying left for about 2 seconds upon page load,
+    then moves from right to left.
+  </p>
+  <div>Filler Text</div>
+  <script>
+    var div = document.getElementsByTagName("div");
+    div[0].style.animationDuration = "-2s";
+    setTimeout(setAnimationDuration, 2000);
+
+    function setAnimationDuration() {
+      div[0].style.animationDuration = "10s";
+    }
+  </script>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-004.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-004.htm
new file mode 100644
index 00000000000..b23be4f8995
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-004.htm
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-duration - 0s</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-duration is set to 0s (zero seconds),
+                             animation occurs instantaneously, there will be no animation seen." name="assert">
+<style>
+  div {
+    animation-name: sample;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts staying left for about 2 seconds upon page load,
+    then moves from right to left.
+  </p>
+  <div>Filler Text</div>
+  <script>
+    var div = document.getElementsByTagName("div");
+    div[0].style.animationDuration = "0s";
+    setTimeout(setAnimationDuration, 2000);
+
+    function setAnimationDuration() {
+      div[0].style.animationDuration = "10s";
+    }
+  </script>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-005.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-005.htm
new file mode 100644
index 00000000000..b05c1714f45
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-005.htm
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-duration - 0s, animation-fill-mode - forwards</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-duration is set to 0s (zero seconds),
+                             and 'animation-fill-mode' is set to 'forwards',
+                             the last frame of the animation will be displayed." name="assert">
+<style>
+  div {
+    height: 100px;
+    width: 100px;
+    position: absolute;
+  }
+
+  #test {
+    animation-name: sample;
+    animation-duration: 0s;
+    animation-fill-mode: forwards;
+
+    background-color: blue;
+  }
+
+  #ref {
+    background-color: red;
+    left: 150px;
+  }
+
+  @keyframes sample {
+    from {
+      left: 0px;
+    }
+    to {
+      left: 150px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue with 'Filler Text',
+    and without animation, and if there is no red.
+  </p>
+  <div id="ref"></div>
+  <div id="test">Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-006.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-006.htm
new file mode 100644
index 00000000000..fae7d12f451
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-006.htm
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-duration - 0s, animation-fill-mode - both</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-duration is set to 0s (zero seconds),
+                             and 'animation-fill-mode' is set to 'both',
+                             the last frame of the animation will be displayed." name="assert">
+<style>
+  div {
+    height: 100px;
+    width: 100px;
+    position: absolute;
+  }
+
+  #test {
+    animation-name: sample;
+    animation-duration: 0s;
+    animation-fill-mode: both;
+
+    background-color: blue;
+  }
+
+  #ref {
+    background-color: red;
+    left: 150px;
+  }
+
+  @keyframes sample {
+    from {
+      left: 0px;
+    }
+    to {
+      left: 150px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue with 'Filler Text',
+    and without animation, and if there is no red.
+  </p>
+  <div id="ref"></div>
+  <div id="test">Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-007.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-007.htm
new file mode 100644
index 00000000000..a4f06469d71
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-007.htm
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-duration - ::before</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-duration applies to the ::before pseudo element." name="assert">
+<style>
+  div::before {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left upon page load and lasts for a span of 10 seconds.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-008.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-008.htm
new file mode 100644
index 00000000000..47ded646d8c
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-008.htm
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-duration - ::after</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-duration applies to the ::after pseudo element." name="assert">
+<style>
+  div::after {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left upon page load and lasts for a span of 10 seconds.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-001.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-001.htm
new file mode 100644
index 00000000000..c7feeb3e50c
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-001.htm
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-fill-mode - none</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-fill-mode is set to none,
+                             animation has no effect when it is applied but not executing." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 5s;
+    animation-fill-mode: none;
+    
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+  @keyframes sample {
+    from {
+      background-color: yellow;
+    }
+    to {
+      background-color: green;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled color square with 'Filler Text',
+    whose color gradually changes in the order:
+    YELLOW to GREEN to BLUE.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-002.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-002.htm
new file mode 100644
index 00000000000..14e63cec587
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-002.htm
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-fill-mode - forwards</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-fill-mode is set to forwards, 
+                             animation will apply the property values for the time the amination ended 
+                             after the animation ends." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 5s;
+    animation-fill-mode: forwards;
+    
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+  @keyframes sample {
+    from {
+      background-color: yellow;
+    }
+    to {
+      background-color: green;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled color square with 'Filler Text',
+    whose color gradually changes in the order:
+    YELLOW to GREEN.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-003.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-003.htm
new file mode 100644
index 00000000000..4fe53bfc9f6
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-003.htm
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-fill-mode - backwards</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-fill-mode is set to backwards,
+                             animation-delay is set a positive time offset,
+                             and animation-direction is 'normal' or 'alternate-reverse',
+                             animation will apply the from or 0% keyframe
+                             that will start the first iteration." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 5s;
+    animation-delay: 5s;
+    animation-fill-mode: backwards;
+    
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+  @keyframes sample {
+    from {
+      background-color: yellow;
+    }
+    to {
+      background-color: green;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled color square with 'Filler Text',
+    whose color gradually changes in the order:
+    YELLOW to GREEN to BLUE.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-004.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-004.htm
new file mode 100644
index 00000000000..233ef75728d
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-004.htm
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-fill-mode - both</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check if animation-fill-mode is set to both,
+                             the effects of both 'forwards' and 'backwards' will apply." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 5s;
+    animation-delay: 5s;
+    animation-fill-mode: both;
+    
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+  @keyframes sample {
+    from {
+      background-color: yellow;
+    }
+    to {
+      background-color: green;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled color square with 'Filler Text',
+    whose color gradually changes in the order:
+    YELLOW to GREEN.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-005.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-005.htm
new file mode 100644
index 00000000000..c63b0fadca5
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-005.htm
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-fill-mode - ::after</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-fill-mode applies to the ::after pseudo element." name="assert">
+<style>
+  div::after {
+    animation-name: sample;
+    animation-duration: 5s;
+    animation-fill-mode: forwards;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+  @keyframes sample {
+    from {
+      background-color: yellow;
+    }
+    to {
+      background-color: green;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled color square with 'Filler Text',
+    whose color gradually changes in the order:
+    YELLOW to GREEN.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-006.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-006.htm
new file mode 100644
index 00000000000..0b781205a42
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-006.htm
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-fill-mode - ::before</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-fill-mode applies to the ::before pseudo element." name="assert">
+<style>
+  div::before {
+    animation-name: sample;
+    animation-duration: 5s;
+    animation-fill-mode: forwards;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+  @keyframes sample {
+    from {
+      background-color: yellow;
+    }
+    to {
+      background-color: green;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled color square with 'Filler Text',
+    whose color gradually changes in the order:
+    YELLOW to GREEN.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-001.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-001.htm
new file mode 100644
index 00000000000..68073365922
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-001.htm
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-iteration-count - default value</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-iteration-count is not set, 1 is taken by default and
+                             animation will play from beginning to end once." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left once.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-002.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-002.htm
new file mode 100644
index 00000000000..2bb0f6f69ec
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-002.htm
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-iteration-count - infinite value</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-iteration-count is set to infinite,
+                             animation will repeat forever." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-iteration-count: infinite;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled square with 'Filler Text',
+    which repeatedly moves from right to left. Every time a cycle is finished,
+    the square gets re-positioned to right and continues to move left.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-003.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-003.htm
new file mode 100644
index 00000000000..d64033a5444
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-003.htm
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-iteration-count - negative value</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-iteration-count is set to negative count,
+                             it is invalid and animation will play from beginning to end once." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-iteration-count: -2;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left once.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-004.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-004.htm
new file mode 100644
index 00000000000..1343a1eb8ee
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-004.htm
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-iteration-count - non-integer value</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-iteration-count is set to non-integer,
+                             animation will end partway through its last cycle." name="assert">
+<style>
+  #test-iteration-count {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-iteration-count: 2.1;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  #ref-path {
+    background-color: yellow;
+    height: 10px;
+    width: 250px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left along the yellow bar twice,
+    and for the third time it ends partway and then immediately positions
+    itself to the left.
+  </p>
+  <div id="test-iteration-count">Filler Text</div>
+  <div id="ref-path"></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-005.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-005.htm
new file mode 100644
index 00000000000..9b0313fb4f0
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-005.htm
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-iteration-count - integer value</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-iteration-count is set to integer count,
+                             animation will repeat the specified number of times." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-iteration-count: 2;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left twice.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-006.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-006.htm
new file mode 100644
index 00000000000..af0fa5e27c1
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-006.htm
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-iteration-count - 0 (zero)</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-iteration-count is set to 0 (zero), no animation is seen." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts staying left for about 2 seconds upon page load,
+    then moves from right to left once.
+  </p>
+  <div>Filler Text</div>
+  <script>
+    var div = document.getElementsByTagName("div");
+    div[0].style.animationIterationCount = 0;
+    setTimeout(setAnimationDuration, 2000);
+
+    function setAnimationDuration() {
+      div[0].style.animationIterationCount = 1;
+    }
+  </script>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-007.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-007.htm
new file mode 100644
index 00000000000..e378e075daf
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-007.htm
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-iteration-count - ::after</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-iteration-count applies to the ::after pseudo element." name="assert">
+<style>
+  div::after {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-iteration-count: 2;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left twice.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-008.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-008.htm
new file mode 100644
index 00000000000..6970e5dbc01
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-008.htm
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-iteration-count - ::before</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-iteration-count applies to the ::before pseudo element." name="assert">
+<style>
+  div::before  {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-iteration-count: 2;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left twice.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-event.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-event.htm
new file mode 100644
index 00000000000..3a3096584db
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-event.htm
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation events - animationiteration</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#events" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animationiteration event occurs at the end of
+                             each iteration of an animation for which animation-iteration-count
+                             is greater than one." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-iteration-count: 3;
+
+    color: yellow;
+    font-weight: bolder;
+    font-size: xx-large;
+    text-align: center;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square, which moves from right to left
+    three times; and if the square contains digit 1 for the first animation,
+    digit 2 for the second, and 3 for the third animation.
+  </p>
+  <div></div>
+  <script>
+    var count = 1;
+    var div = document.getElementsByTagName("div");
+    div[0].innerHTML = count;
+    div[0].addEventListener("animationiteration", animationIteration, true);
+
+    function animationIteration() {
+      count += 1;
+      div[0].innerHTML = count;
+    }
+  </script>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-keyframes-001.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-keyframes-001.htm
new file mode 100644
index 00000000000..50d80b712db
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-keyframes-001.htm
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: @keyframes - from, to, percentage</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#keyframes" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that @keyframes rule accepts 'from' and 'to'
+                             keywords, and percentage values." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+  }
+
+  @keyframes sample {
+    from {
+      background-color: blue;
+    }
+    30% {
+      background-color: green;
+    }
+    65% {
+      background-color: yellow;
+    }
+    to {
+      background-color: blue;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text'
+    initially on page load, and if the color of the square gradully changes
+    in order: BLUE to GREEN to YELLOW and back to BLUE in 10 seconds.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-keyframes-002.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-keyframes-002.htm
new file mode 100644
index 00000000000..ca39a592207
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-keyframes-002.htm
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: @keyframes - negative percentage and higher than 100%</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#keyframes" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that a keyframe selector specifies negative percentage values
+                             or values higher than 100%, the keyframe will be ignored." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+  }
+
+  @keyframes sample {
+    -100% {
+      background-color: red;
+    }
+    0% {
+      background-color: blue;
+    }
+    30% {
+      background-color: green;
+    }
+    65% {
+      background-color: yellow;
+    }
+    100% {
+      background-color: blue;
+    }
+    200% {
+      background-color: red;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text'
+    initially on page load, if the color of the square gradully changes
+    in order: BLUE to GREEN to YELLOW and back to BLUE in 10 seconds,
+    and if there is no red.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-keyframes-003.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-keyframes-003.htm
new file mode 100644
index 00000000000..6c5bb642ed1
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-keyframes-003.htm
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: @keyframes - animation-timing-function</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#keyframes" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that @keyframes rule accpets 'animation-timing-function'
+                             property used as the animation moves to the next keyframe." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+      animation-timing-function: linear;
+    }
+    50% {
+      left: 75px;
+      animation-timing-function: linear;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left with constant speed.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-001.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-001.htm
new file mode 100644
index 00000000000..ffb643f2fa0
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-001.htm
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-name - blank value</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-name is set without any value,
+                             there will be no animation." name="assert">
+<style>
+  div {
+    animation-name: ;
+    animation-duration: 8s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts staying left about 2 seconds, then moves from right to left.
+  </p>
+  <div>Filler Text</div>
+  <script>
+    setTimeout(setAnimationName, 2000);
+
+    function setAnimationName () {
+      var div = document.getElementsByTagName("div");
+      div[0].style.animationName = "sample";
+    }
+  </script>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-002.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-002.htm
new file mode 100644
index 00000000000..0308f551728
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-002.htm
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-name matchs keyframes at-rule</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-name is set to refer to a keyframe at-rule
+                             that provides the property values for the animation,
+                             animation will execute." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left on the page load.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-003.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-003.htm
new file mode 100644
index 00000000000..1a059e509bc
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-003.htm
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-name - none</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-name is set to none, there will be no animation." name="assert">
+<style>
+  div {
+    animation-name: none;
+    animation-duration: 8s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts staying left about 2 seconds, then moves from right to left.
+  </p>
+  <div>Filler Text</div>
+  <script>
+    setTimeout(setAnimationName, 2000);
+
+    function setAnimationName () {
+      var div = document.getElementsByTagName("div");
+      div[0].style.animationName = "sample";
+    }
+  </script>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-004.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-004.htm
new file mode 100644
index 00000000000..a4308281ef5
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-004.htm
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-name mismatches keyframe at-rule</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-name does not match any keyframe at-rule,
+                             there are no properties to be animated and animation will not execute." name="assert">
+<style>
+  div {
+    animation-name: sample1;
+    animation-duration: 8s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts staying left about 2 seconds, then moves from right to left.
+  </p>
+  <div>Filler Text</div>
+  <script>
+    setTimeout(setAnimationName, 2000);
+
+    function setAnimationName () {
+      var div = document.getElementsByTagName("div");
+      div[0].style.animationName = "sample";
+    }
+  </script>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-005.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-005.htm
new file mode 100644
index 00000000000..43c47c7d327
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-005.htm
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-name - ::after</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-name applies to the ::after pseudo element." name="assert">
+<style>
+  div::after {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left on the page load.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-006.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-006.htm
new file mode 100644
index 00000000000..2b028f25993
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-006.htm
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-name - ::before</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-name applies to the ::before pseudo element." name="assert">
+<style>
+  div::before {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left on the page load.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-play-state-001.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-play-state-001.htm
new file mode 100644
index 00000000000..6765a915f4b
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-play-state-001.htm
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-play-state - paused</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-play-state" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-play-state is set to paused,
+                             animation is paused where the progress it had made
+                             before being paused." name="assert">
+<style>
+  #test-animation-paused {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  #ref-path {
+    background-color: yellow;
+    height: 10px;
+    width: 250px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving right to left along the yellow bar, 
+    and pauses in the middle after about 2 seconds' animation.
+  </p>
+  <div id="test-animation-paused">Filler Text</div>
+  <div id="ref-path"></div>
+  <script>
+    setTimeout(setAnimationRunning, 2000);
+
+    function setAnimationRunning() {
+      var div = document.getElementsByTagName("div");
+      div[0].style.animationPlayState = "paused";
+    }
+  </script>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-play-state-002.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-play-state-002.htm
new file mode 100644
index 00000000000..2c02d60986e
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-play-state-002.htm
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-play-state - running</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-play-state" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-play-state is set to running,
+                             animation will proceed as normal." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-play-state: running;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-play-state-003.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-play-state-003.htm
new file mode 100644
index 00000000000..92368cc29cd
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-play-state-003.htm
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-play-state - ::after</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-play-state" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-play-state applies to the ::after pseudo element." name="assert">
+<style>
+  div::after {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-play-state: running;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-play-state-004.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-play-state-004.htm
new file mode 100644
index 00000000000..89fe227c953
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-play-state-004.htm
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-play-state - ::before</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-play-state" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-play-state applies to the ::before pseudo element." name="assert">
+<style>
+  div::before {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-play-state: running;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-shorthand-001.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-shorthand-001.htm
new file mode 100644
index 00000000000..31ab12413dc
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-shorthand-001.htm
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation shorthand</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation shorthand property accepts time
+                             values for animation-duration and animation-delay in order." name="assert">
+<style>
+  div {
+    animation: 10s 2s sample;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts staying left about 2 seconds, and then moves from right to left
+    and lasts for a span of 10 seconds.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-shorthand-002.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-shorthand-002.htm
new file mode 100644
index 00000000000..88495e08de3
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-shorthand-002.htm
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation shorthand - ::after</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation shorthand applies to the ::after pseudo element
+                             and accepts time values for animation-duration and animation-delay
+                             in order." name="assert">
+<style>
+  div::after {
+    animation: 10s 2s sample;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts staying left about 2 seconds, and then moves from right to left
+    and lasts for a span of 10 seconds.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-shorthand-003.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-shorthand-003.htm
new file mode 100644
index 00000000000..799f6d239c4
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-shorthand-003.htm
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation shorthand - ::before</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation shorthand applies to the ::before pseudo element
+                             and accepts time values for animation-duration and animation-delay
+                             in order." name="assert">
+<style>
+  div::before {
+    animation: 10s 2s sample;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts staying left about 2 seconds, and then moves from right to left
+    and lasts for a span of 10 seconds.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-001.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-001.htm
new file mode 100644
index 00000000000..069fe49aa31
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-001.htm
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-timing-function - cubic-bezier with parameters (0,0,1,1)</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-timing-function is set to cubic-bezier
+                             with parameters (0,0,1,1), animation will progress over one cycle
+                             of its duration with constant speed." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-timing-function: cubic-bezier(0,0,1,1);
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left with constant speed.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-002.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-002.htm
new file mode 100644
index 00000000000..20960965403
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-002.htm
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-timing-function - ease</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-timing-function is set to ease,
+                             animation will starts slow, gain acceleration in the middle
+                             and again slow down at the end." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-timing-function: ease;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left; initially the animation starts slow,
+    gains acceleration in the middle and again slows down at the end.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-003.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-003.htm
new file mode 100644
index 00000000000..f74cb0a4aa8
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-003.htm
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-timing-function - ease-in</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-timing-function is set to ease-in,
+                             animation will start slow, gain acceleration as time progresses." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-timing-function: ease-in;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left; animation starts slow
+    and gains acceleration as time progresses.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-004.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-004.htm
new file mode 100644
index 00000000000..37b86b1f2db
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-004.htm
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-timing-function - ease-in-out</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-timing-function is set to ease-in-out,
+                             animation will start slow, gain acceleration in the middel 
+                             and again slow down at the end." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-timing-function: ease-in-out;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left; initially the animation starts slow,
+    gains acceleration in the middle and again slows down at the end.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-005.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-005.htm
new file mode 100644
index 00000000000..ed2edca0ef6
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-005.htm
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-timing-function - ease-out</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-timing-function is set to ease-out,
+                             animation will start with higher (than the normal) speed 
+                             and relatively slow down as time progresses." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-timing-function: ease-out;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left; animation starts and relatively 
+    slows down as time progresses.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-006.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-006.htm
new file mode 100644
index 00000000000..98865f132ac
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-006.htm
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-timing-function - linear</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-timing-function is set to linear, 
+                             animation will progress over one cycle of its duration 
+                             with constant speed." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-timing-function: linear;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left with constant speed.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-007.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-007.htm
new file mode 100644
index 00000000000..899246492b9
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-007.htm
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-timing-function - step-start</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-timing-function is set to step-start,
+                             animation will play the end effect at the start of the interval." name="assert">
+<style>
+  div {
+    height: 100px;
+    width: 100px;
+    position: absolute;
+  }
+
+  #test-step-start {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-fill-mode: forwards;
+    animation-timing-function: step-start;
+
+    background-color: blue;
+  }
+
+  #ref-no-animation {
+    background-color: red;
+    left: 150px;
+  }
+
+  @keyframes sample {
+    from {
+      left: 0px;
+    }
+    to {
+      left: 150px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which stays right, and if there is NO red.
+  </p>
+  <div id="ref-no-animation"></div>
+  <div id="test-step-start">Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-008.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-008.htm
new file mode 100644
index 00000000000..aece4fbffe0
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-008.htm
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-timing-function - step-end</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-timing-function is set to step-end,
+                             animation will play the end effect at the end time point,
+                             and keep the start effect at the start of the interval." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-timing-function: step-end;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled square with 'Filler Text',
+    which stays right for about 10 seconds, and then jumps to left.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-009.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-009.htm
new file mode 100644
index 00000000000..7c9db1e161e
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-009.htm
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-timing-function - steps with parameters (&lt;number&gt;, start)</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-timing-function is set to steps with paramenters
+                             (<number>, start), animation will be defined by the number that divides
+                             the domain of operation into equally size intervals, evey time the changes
+                             happens at the start of the interval." name="assert">
+<style>
+  div {
+    float: left;
+    height: 100px;
+    width: 100px;
+    position: absolute;
+  }
+
+  #test-step-start {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-fill-mode: forwards;
+    animation-timing-function: steps(4, start);
+
+    background-color: blue;
+  }
+
+  #ref-1 {
+    background-color: yellow;
+    left: 200px;
+  }
+
+  #ref-2 {
+    background-color: green;
+    left: 100px;
+  }
+
+  #ref-3 {
+    background-color: red;
+    left: 0px;
+  }
+
+  @keyframes sample {
+    from {
+      left: 400px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there are a filled square with 'Filler Text',
+    which jumps three times from right to left and orderly covers
+    the filled YELLOW, GREEN and RED squares.
+  </p>
+  <div id="ref-1"></div>
+  <div id="ref-2"></div>
+  <div id="ref-3"></div>
+  <div id="test-step-start">Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-010.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-010.htm
new file mode 100644
index 00000000000..b49e0448c7f
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-010.htm
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-timing-function - steps with parameters (&lt;number&gt;, end)</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
+<meta content="animated" name="flags">
+<meta content="When animation-timing-function is set to steps with paramenters
+                             (<number>, end), animation will be defined by the number that divides
+                             the domain of operation into equally size intervals, evey time the changes
+                             happens at the end of the interval." name="assert">
+<style>
+  div {
+    float: left;
+    height: 100px;
+    width: 100px;
+    position: absolute;
+  }
+
+  #test-step-end {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-fill-mode: forwards;
+    animation-timing-function: steps(3, end);
+
+    background-color: blue;
+  }
+
+  #ref-1 {
+    background-color: yellow;
+    left: 200px;
+  }
+
+  #ref-2 {
+    background-color: green;
+    left: 100px;
+  }
+
+  #ref-3 {
+    background-color: red;
+    left: 0px;
+  }
+
+  @keyframes sample {
+    from {
+      left: 300px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there are a filled square with 'Filler Text',
+    which jumps three times from right to left and orderly covers
+    the filled YELLOW, GREEN and RED squares.
+  </p>
+  <div id="ref-1"></div>
+  <div id="ref-2"></div>
+  <div id="ref-3"></div>
+  <div id="test-step-end">Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-011.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-011.htm
new file mode 100644
index 00000000000..2dd7a090a0e
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-011.htm
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-timing-function - ::after</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-timing-function applies to the ::after pseudo element." name="assert">
+<style>
+  div::after {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-timing-function: linear;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which moves from right to left with constant speed.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-012.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-012.htm
new file mode 100644
index 00000000000..cf883c8b865
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-012.htm
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation-timing-function - ::before</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animation-timing-function applies to the ::before pseudo element." name="assert">
+<style>
+  div::before {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-timing-function: linear;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which moves from right to left with constant speed.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animationevent-interface.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animationevent-interface.htm
new file mode 100644
index 00000000000..582c7f05859
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animationevent-interface.htm
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: AnimationEvent interface</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="https://drafts.csswg.org/css-animations-1/#interface-dom" rel="help">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="animationevent-interface.js"></script>
+</head><body><div id="log"></div>
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animationevent-types.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animationevent-types.htm
new file mode 100644
index 00000000000..f6ea549f668
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animationevent-types.htm
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<meta content="long" name="timeout">
+<title>CSS Animations Test: AnimationEvnt types - animationstart, animationend,animationiteration</title>
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="https://drafts.csswg.org/css-animations-1/#event-animationevent" rel="help">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #test {
+    animation-name: sample;
+    animation-duration: 2s;
+    animation-delay: -1s;
+    animation-iteration-count: 2;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body><div id="test">Filler Text</div>
+<div id="log"></div>
+<script>
+  var testDiv = document.getElementById("test");
+
+  async_test(function(t) {
+    testDiv.addEventListener("animationstart", t.step_func(function(evt) {
+      assert_true(evt instanceof window.AnimationEvent);
+
+      assert_idl_attribute(evt, "animationName", "animationstart has animationName property");
+      assert_idl_attribute(evt, "elapsedTime", "animationstart has elapsedTime property");
+
+      assert_equals(evt.animationName, "sample", "animationstart has animationName value");
+      assert_equals(evt.elapsedTime, 1, "animationstart has elapsedTime value");
+
+      t.done();
+    }), true);
+  }, "animationstart event is instanceof AnimationEvent");
+
+  async_test(function(t) {
+    testDiv.addEventListener("animationend", t.step_func(function(evt) {
+      assert_true(evt instanceof window.AnimationEvent);
+
+      assert_idl_attribute(evt, "animationName", "animationend has animationName property");
+      assert_idl_attribute(evt, "elapsedTime", "animationend has elapsedTime property");
+
+      assert_equals(evt.animationName, "sample", "animationend has animationName value");
+      assert_equals(evt.elapsedTime, 4, "animationend has elapsedTime value");
+
+      t.done();
+    }), true);
+  }, "animationend event is instanceof AnimationEvent");
+
+  async_test(function(t) {
+    testDiv.addEventListener("animationiteration", t.step_func(function(evt) {
+      assert_true(evt instanceof window.AnimationEvent);
+
+      assert_idl_attribute(evt, "animationName", "animationiteration has animationName property");
+      assert_idl_attribute(evt, "elapsedTime", "animationiteration has elapsedTime property");
+
+      assert_equals(evt.animationName, "sample", "animationiteration has animationName value");
+      assert_equals(evt.elapsedTime, 2, "animationiteration has elapsedTime value");
+
+      t.done();
+    }), true);
+  }, "animationiteration event is instanceof AnimationEvent");
+</script>
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animationstart-and-animationend-events.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animationstart-and-animationend-events.htm
new file mode 100644
index 00000000000..4066e3a51f8
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/animationstart-and-animationend-events.htm
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>CSS Animations Test: animation events - animationstart and animationend</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
+<link href="http://www.intel.com" rel="author" title="Intel">
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
+<link href="https://drafts.csswg.org/css-animations-1/#events" rel="help">
+<meta content="animated" name="flags">
+<meta content="Check that animationstart event occurs at the start of an animation,
+                             animationend event occurs when animation finishes." name="assert">
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square,
+    which moves from right to left with text 'START'
+    and changes to 'END' when the animation is finished.
+  </p>
+  <div>Filler Text</div>
+  <script>
+    var div = document.getElementsByTagName("div");
+    div[0].addEventListener("animationstart", animationStart, true);
+    div[0].addEventListener("animationend", animationEnd, true);
+
+    function animationStart() {
+      div[0].innerHTML = "START";
+    }
+
+    function animationEnd() {
+      div[0].innerHTML = "END";
+    }
+  </script>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/chapter-2.htm b/tests/wpt/css-tests/css-animations-1_dev/html/chapter-2.htm
index 117ec5e7652..8f52171d80c 100644
--- a/tests/wpt/css-tests/css-animations-1_dev/html/chapter-2.htm
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/chapter-2.htm
@@ -13,7 +13,7 @@
  <body>
 
   <h1>CSS Animations Module Level 1 CR Test Suite</h1>
-  <h2>Values (0 tests)</h2>
+  <h2>Values (2 tests)</h2>
   <table width="100%">
     <col id="test-column">
     <col id="refs-column">
@@ -31,7 +31,29 @@
       <tr><th colspan="4" scope="rowgroup">
         <a href="#s2">+</a>
         <a href="http://www.w3.org/TR/css3-animations/#values">2 Values</a></th></tr>
-      <!-- 0 tests -->
+      <!-- 2 tests -->
+      <tr id="animation-delay-006-2" class="animated">
+        <td>
+            <a href="animation-delay-006.htm">animation-delay-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - initial keyword
+          <ul class="assert">
+            <li>Check that animation-delay property accepts 'initial' keyword.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-007-2" class="animated">
+        <td>
+            <a href="animation-delay-007.htm">animation-delay-007</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - inherit keyword
+          <ul class="assert">
+            <li>Check that animation-delay property accepts 'inherit' keyword.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
   </table>
 
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/chapter-3.htm b/tests/wpt/css-tests/css-animations-1_dev/html/chapter-3.htm
index 160d77aa719..eab1eb91b8f 100644
--- a/tests/wpt/css-tests/css-animations-1_dev/html/chapter-3.htm
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/chapter-3.htm
@@ -13,7 +13,7 @@
  <body>
 
   <h1>CSS Animations Module Level 1 CR Test Suite</h1>
-  <h2>Animations (15 tests)</h2>
+  <h2>Animations (16 tests)</h2>
   <table width="100%">
     <col id="test-column">
     <col id="refs-column">
@@ -31,7 +31,18 @@
       <tr><th colspan="4" scope="rowgroup">
         <a href="#s3">+</a>
         <a href="http://www.w3.org/TR/css3-animations/#animations">3 Animations</a></th></tr>
-      <!-- 15 tests -->
+      <!-- 16 tests -->
+      <tr id="animation-display-3" class="animated">
+        <td>
+            <a href="animation-display.htm">animation-display</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation - display
+          <ul class="assert">
+            <li>Check that setting 'display' property to 'none' terminates running animation applied to the element, and updating 'display' property to a value other than 'none' will start the animation.</li>
+          </ul>
+        </td>
+      </tr>
       <tr id="animations-001-3" class="ahem animated">
         <td>
             <a href="animations-001.htm">animations-001</a></td>
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/chapter-4.htm b/tests/wpt/css-tests/css-animations-1_dev/html/chapter-4.htm
index 5e155a1bbef..ae26ca0158a 100644
--- a/tests/wpt/css-tests/css-animations-1_dev/html/chapter-4.htm
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/chapter-4.htm
@@ -13,7 +13,7 @@
  <body>
 
   <h1>CSS Animations Module Level 1 CR Test Suite</h1>
-  <h2>Keyframes (0 tests)</h2>
+  <h2>Keyframes (66 tests)</h2>
   <table width="100%">
     <col id="test-column">
     <col id="refs-column">
@@ -31,7 +31,40 @@
       <tr><th colspan="4" scope="rowgroup">
         <a href="#s4">+</a>
         <a href="http://www.w3.org/TR/css3-animations/#keyframes">4 Keyframes</a></th></tr>
-      <!-- 0 tests -->
+      <!-- 3 tests -->
+      <tr id="animation-keyframes-001-4" class="animated">
+        <td>
+            <a href="animation-keyframes-001.htm">animation-keyframes-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>@keyframes - from, to, percentage
+          <ul class="assert">
+            <li>Check that @keyframes rule accepts 'from' and 'to' keywords, and percentage values.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-keyframes-002-4" class="animated">
+        <td>
+            <a href="animation-keyframes-002.htm">animation-keyframes-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>@keyframes - negative percentage and higher than 100%
+          <ul class="assert">
+            <li>Check that a keyframe selector specifies negative percentage values or values higher than 100%, the keyframe will be ignored.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-keyframes-003-4" class="animated">
+        <td>
+            <a href="animation-keyframes-003.htm">animation-keyframes-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>@keyframes - animation-timing-function
+          <ul class="assert">
+            <li>Check that @keyframes rule accpets 'animation-timing-function' property used as the animation moves to the next keyframe.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s4.#keyframe-declaration-block">
       <!-- 0 tests -->
@@ -52,7 +85,700 @@
       <!-- 0 tests -->
     </tbody>
     <tbody id="s4.2.#animation-name">
-      <!-- 0 tests -->
+      <!-- 63 tests -->
+      <tr id="animation-delay-001-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-delay-001.htm">animation-delay-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - negative value
+          <ul class="assert">
+            <li>When animation-delay is set to a negative time offset, animation will execute as soon as it is applied but act as if the animation had started the specified time in the past.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-002-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-delay-002.htm">animation-delay-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - positive value
+          <ul class="assert">
+            <li>When animation-delay is set to a positive time offset, animation will delay execution by the specified offset value.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-003-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-delay-003.htm">animation-delay-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - 0s
+          <ul class="assert">
+            <li>When animation-delay is set to 0s (zero seconds), animation will execute as soon as it is applied.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-004-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-delay-004.htm">animation-delay-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - ::after
+          <ul class="assert">
+            <li>Check that animation-delay applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-005-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-delay-005.htm">animation-delay-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - ::before
+          <ul class="assert">
+            <li>Check that animation-delay applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-006-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-delay-006.htm">animation-delay-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - initial keyword
+          <ul class="assert">
+            <li>Check that animation-delay property accepts 'initial' keyword.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-007-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-delay-007.htm">animation-delay-007</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - inherit keyword
+          <ul class="assert">
+            <li>Check that animation-delay property accepts 'inherit' keyword.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-001-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-direction-001.htm">animation-direction-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - alternate
+          <ul class="assert">
+            <li>When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-002-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-direction-002.htm">animation-direction-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - normal
+          <ul class="assert">
+            <li>When animation-direction is set to normal, all iterations of animation are played as specified.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-003-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-direction-003.htm">animation-direction-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - alternate-reverse
+          <ul class="assert">
+            <li>When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-004-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-direction-004.htm">animation-direction-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - reverse
+          <ul class="assert">
+            <li>When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-005-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-direction-005.htm">animation-direction-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - ::after
+          <ul class="assert">
+            <li>Check that animation-direction applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-006-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-direction-006.htm">animation-direction-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - ::before
+          <ul class="assert">
+            <li>Check that animation-direction applies to the ::before pseudo element</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-display-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-display.htm">animation-display</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation - display
+          <ul class="assert">
+            <li>Check that setting 'display' property to 'none' terminates running animation applied to the element, and updating 'display' property to a value other than 'none' will start the animation.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-001-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-duration-001.htm">animation-duration-001</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - blank value
+          <ul class="assert">
+            <li>When animation-duration value is set blank, there will be no animation seen.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-002-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-duration-002.htm">animation-duration-002</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - finite value
+          <ul class="assert">
+            <li>When animation-duration is set a finite time offset, animation takes the specifies time to complete one cycle.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-003-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-duration-003.htm">animation-duration-003</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - negative value
+          <ul class="assert">
+            <li>When animation-duration is set to a negative value, it is treated as 0s (zero seconds) and no animation is seen.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-004-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-duration-004.htm">animation-duration-004</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - 0s
+          <ul class="assert">
+            <li>When animation-duration is set to 0s (zero seconds), animation occurs instantaneously, there will be no animation seen.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-005-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-duration-005.htm">animation-duration-005</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - 0s, animation-fill-mode - forwards
+          <ul class="assert">
+            <li>When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'forwards', the last frame of the animation will be displayed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-006-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-duration-006.htm">animation-duration-006</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - 0s, animation-fill-mode - both
+          <ul class="assert">
+            <li>When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'both', the last frame of the animation will be displayed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-007-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-duration-007.htm">animation-duration-007</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - ::before
+          <ul class="assert">
+            <li>Check that animation-duration applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-008-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-duration-008.htm">animation-duration-008</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - ::after
+          <ul class="assert">
+            <li>Check that animation-duration applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-001-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-fill-mode-001.htm">animation-fill-mode-001</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - none
+          <ul class="assert">
+            <li>When animation-fill-mode is set to none, animation has no effect when it is applied but not executing.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-002-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-fill-mode-002.htm">animation-fill-mode-002</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - forwards
+          <ul class="assert">
+            <li>When animation-fill-mode is set to forwards, animation will apply the property values for the time the amination ended after the animation ends.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-003-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-fill-mode-003.htm">animation-fill-mode-003</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - backwards
+          <ul class="assert">
+            <li>When animation-fill-mode is set to backwards, animation-delay is set a positive time offset, and animation-direction is 'normal' or 'alternate-reverse', animation will apply the from or 0% keyframe that will start the first iteration.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-004-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-fill-mode-004.htm">animation-fill-mode-004</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - both
+          <ul class="assert">
+            <li>Check if animation-fill-mode is set to both, the effects of both 'forwards' and 'backwards' will apply.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-005-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-fill-mode-005.htm">animation-fill-mode-005</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - ::after
+          <ul class="assert">
+            <li>Check that animation-fill-mode applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-006-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-fill-mode-006.htm">animation-fill-mode-006</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - ::before
+          <ul class="assert">
+            <li>Check that animation-fill-mode applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-001-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-iteration-count-001.htm">animation-iteration-count-001</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - default value
+          <ul class="assert">
+            <li>When animation-iteration-count is not set, 1 is taken by default and animation will play from beginning to end once.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-002-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-iteration-count-002.htm">animation-iteration-count-002</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - infinite value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to infinite, animation will repeat forever.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-003-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-iteration-count-003.htm">animation-iteration-count-003</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - negative value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to negative count, it is invalid and animation will play from beginning to end once.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-004-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-iteration-count-004.htm">animation-iteration-count-004</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - non-integer value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to non-integer, animation will end partway through its last cycle.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-005-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-iteration-count-005.htm">animation-iteration-count-005</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - integer value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to integer count, animation will repeat the specified number of times.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-006-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-iteration-count-006.htm">animation-iteration-count-006</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - 0 (zero)
+          <ul class="assert">
+            <li>When animation-iteration-count is set to 0 (zero), no animation is seen.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-007-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-iteration-count-007.htm">animation-iteration-count-007</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - ::after
+          <ul class="assert">
+            <li>Check that animation-iteration-count applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-008-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-iteration-count-008.htm">animation-iteration-count-008</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - ::before
+          <ul class="assert">
+            <li>Check that animation-iteration-count applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-event-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-iteration-event.htm">animation-iteration-event</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation events - animationiteration
+          <ul class="assert">
+            <li>Check that animationiteration event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-keyframes-001-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-keyframes-001.htm">animation-keyframes-001</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>@keyframes - from, to, percentage
+          <ul class="assert">
+            <li>Check that @keyframes rule accepts 'from' and 'to' keywords, and percentage values.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-keyframes-002-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-keyframes-002.htm">animation-keyframes-002</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>@keyframes - negative percentage and higher than 100%
+          <ul class="assert">
+            <li>Check that a keyframe selector specifies negative percentage values or values higher than 100%, the keyframe will be ignored.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-keyframes-003-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-keyframes-003.htm">animation-keyframes-003</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>@keyframes - animation-timing-function
+          <ul class="assert">
+            <li>Check that @keyframes rule accpets 'animation-timing-function' property used as the animation moves to the next keyframe.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-001-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-name-001.htm">animation-name-001</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name - blank value
+          <ul class="assert">
+            <li>Check that animation-name is set without any value, there will be no animation.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-002-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-name-002.htm">animation-name-002</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name matchs keyframes at-rule
+          <ul class="assert">
+            <li>When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation, animation will execute.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-003-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-name-003.htm">animation-name-003</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name - none
+          <ul class="assert">
+            <li>Check that animation-name is set to none, there will be no animation.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-004-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-name-004.htm">animation-name-004</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name mismatches keyframe at-rule
+          <ul class="assert">
+            <li>Check that animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-005-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-name-005.htm">animation-name-005</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name - ::after
+          <ul class="assert">
+            <li>Check that animation-name applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-006-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-name-006.htm">animation-name-006</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name - ::before
+          <ul class="assert">
+            <li>Check that animation-name applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-play-state-001-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-play-state-001.htm">animation-play-state-001</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - paused
+          <ul class="assert">
+            <li>When animation-play-state is set to paused, animation is paused where the progress it had made before being paused.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-play-state-002-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-play-state-002.htm">animation-play-state-002</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - running
+          <ul class="assert">
+            <li>When animation-play-state is set to running, animation will proceed as normal.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-play-state-003-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-play-state-003.htm">animation-play-state-003</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - ::after
+          <ul class="assert">
+            <li>Check that animation-play-state applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-play-state-004-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-play-state-004.htm">animation-play-state-004</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - ::before
+          <ul class="assert">
+            <li>Check that animation-play-state applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-001-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-001.htm">animation-timing-function-001</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - cubic-bezier with parameters (0,0,1,1)
+          <ul class="assert">
+            <li>When animation-timing-function is set to cubic-bezier with parameters (0,0,1,1), animation will progress over one cycle of its duration with constant speed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-002-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-002.htm">animation-timing-function-002</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease, animation will starts slow, gain acceleration in the middle and again slow down at the end.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-003-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-003.htm">animation-timing-function-003</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease-in
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease-in, animation will start slow, gain acceleration as time progresses.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-004-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-004.htm">animation-timing-function-004</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease-in-out
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease-in-out, animation will start slow, gain acceleration in the middel and again slow down at the end.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-005-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-005.htm">animation-timing-function-005</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease-out
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease-out, animation will start with higher (than the normal) speed and relatively slow down as time progresses.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-006-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-006.htm">animation-timing-function-006</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - linear
+          <ul class="assert">
+            <li>When animation-timing-function is set to linear, animation will progress over one cycle of its duration with constant speed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-007-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-007.htm">animation-timing-function-007</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - step-start
+          <ul class="assert">
+            <li>When animation-timing-function is set to step-start, animation will play the end effect at the start of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-008-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-008.htm">animation-timing-function-008</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - step-end
+          <ul class="assert">
+            <li>When animation-timing-function is set to step-end, animation will play the end effect at the end time point, and keep the start effect at the start of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-009-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-009.htm">animation-timing-function-009</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - steps with parameters (&lt;number&gt;, start)
+          <ul class="assert">
+            <li>When animation-timing-function is set to steps with paramenters (&lt;number&gt;, start), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the start of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-010-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-010.htm">animation-timing-function-010</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - steps with parameters (&lt;number&gt;, end)
+          <ul class="assert">
+            <li>When animation-timing-function is set to steps with paramenters (&lt;number&gt;, end), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the end of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-011-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-011.htm">animation-timing-function-011</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ::after
+          <ul class="assert">
+            <li>Check that animation-timing-function applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-012-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-012.htm">animation-timing-function-012</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ::before
+          <ul class="assert">
+            <li>Check that animation-timing-function applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animationstart-and-animationend-events-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animationstart-and-animationend-events.htm">animationstart-and-animationend-events</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation events - animationstart and animationend
+          <ul class="assert">
+            <li>Check that animationstart event occurs at the start of an animation, animationend event occurs when animation finishes.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s4.2.#list-matching">
       <!-- 0 tests -->
@@ -67,7 +793,700 @@
       <!-- 0 tests -->
     </tbody>
     <tbody id="s4.3.#animation-duration">
-      <!-- 0 tests -->
+      <!-- 63 tests -->
+      <tr id="animation-delay-001-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-delay-001.htm">animation-delay-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - negative value
+          <ul class="assert">
+            <li>When animation-delay is set to a negative time offset, animation will execute as soon as it is applied but act as if the animation had started the specified time in the past.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-002-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-delay-002.htm">animation-delay-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - positive value
+          <ul class="assert">
+            <li>When animation-delay is set to a positive time offset, animation will delay execution by the specified offset value.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-003-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-delay-003.htm">animation-delay-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - 0s
+          <ul class="assert">
+            <li>When animation-delay is set to 0s (zero seconds), animation will execute as soon as it is applied.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-004-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-delay-004.htm">animation-delay-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - ::after
+          <ul class="assert">
+            <li>Check that animation-delay applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-005-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-delay-005.htm">animation-delay-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - ::before
+          <ul class="assert">
+            <li>Check that animation-delay applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-006-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-delay-006.htm">animation-delay-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - initial keyword
+          <ul class="assert">
+            <li>Check that animation-delay property accepts 'initial' keyword.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-007-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-delay-007.htm">animation-delay-007</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - inherit keyword
+          <ul class="assert">
+            <li>Check that animation-delay property accepts 'inherit' keyword.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-001-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-direction-001.htm">animation-direction-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - alternate
+          <ul class="assert">
+            <li>When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-002-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-direction-002.htm">animation-direction-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - normal
+          <ul class="assert">
+            <li>When animation-direction is set to normal, all iterations of animation are played as specified.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-003-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-direction-003.htm">animation-direction-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - alternate-reverse
+          <ul class="assert">
+            <li>When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-004-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-direction-004.htm">animation-direction-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - reverse
+          <ul class="assert">
+            <li>When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-005-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-direction-005.htm">animation-direction-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - ::after
+          <ul class="assert">
+            <li>Check that animation-direction applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-006-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-direction-006.htm">animation-direction-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - ::before
+          <ul class="assert">
+            <li>Check that animation-direction applies to the ::before pseudo element</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-display-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-display.htm">animation-display</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation - display
+          <ul class="assert">
+            <li>Check that setting 'display' property to 'none' terminates running animation applied to the element, and updating 'display' property to a value other than 'none' will start the animation.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-001-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-duration-001.htm">animation-duration-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - blank value
+          <ul class="assert">
+            <li>When animation-duration value is set blank, there will be no animation seen.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-002-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-duration-002.htm">animation-duration-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - finite value
+          <ul class="assert">
+            <li>When animation-duration is set a finite time offset, animation takes the specifies time to complete one cycle.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-003-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-duration-003.htm">animation-duration-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - negative value
+          <ul class="assert">
+            <li>When animation-duration is set to a negative value, it is treated as 0s (zero seconds) and no animation is seen.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-004-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-duration-004.htm">animation-duration-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - 0s
+          <ul class="assert">
+            <li>When animation-duration is set to 0s (zero seconds), animation occurs instantaneously, there will be no animation seen.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-005-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-duration-005.htm">animation-duration-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - 0s, animation-fill-mode - forwards
+          <ul class="assert">
+            <li>When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'forwards', the last frame of the animation will be displayed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-006-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-duration-006.htm">animation-duration-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - 0s, animation-fill-mode - both
+          <ul class="assert">
+            <li>When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'both', the last frame of the animation will be displayed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-007-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-duration-007.htm">animation-duration-007</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - ::before
+          <ul class="assert">
+            <li>Check that animation-duration applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-008-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-duration-008.htm">animation-duration-008</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - ::after
+          <ul class="assert">
+            <li>Check that animation-duration applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-001-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-fill-mode-001.htm">animation-fill-mode-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - none
+          <ul class="assert">
+            <li>When animation-fill-mode is set to none, animation has no effect when it is applied but not executing.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-002-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-fill-mode-002.htm">animation-fill-mode-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - forwards
+          <ul class="assert">
+            <li>When animation-fill-mode is set to forwards, animation will apply the property values for the time the amination ended after the animation ends.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-003-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-fill-mode-003.htm">animation-fill-mode-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - backwards
+          <ul class="assert">
+            <li>When animation-fill-mode is set to backwards, animation-delay is set a positive time offset, and animation-direction is 'normal' or 'alternate-reverse', animation will apply the from or 0% keyframe that will start the first iteration.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-004-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-fill-mode-004.htm">animation-fill-mode-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - both
+          <ul class="assert">
+            <li>Check if animation-fill-mode is set to both, the effects of both 'forwards' and 'backwards' will apply.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-005-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-fill-mode-005.htm">animation-fill-mode-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - ::after
+          <ul class="assert">
+            <li>Check that animation-fill-mode applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-006-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-fill-mode-006.htm">animation-fill-mode-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - ::before
+          <ul class="assert">
+            <li>Check that animation-fill-mode applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-001-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-iteration-count-001.htm">animation-iteration-count-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - default value
+          <ul class="assert">
+            <li>When animation-iteration-count is not set, 1 is taken by default and animation will play from beginning to end once.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-002-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-iteration-count-002.htm">animation-iteration-count-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - infinite value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to infinite, animation will repeat forever.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-003-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-iteration-count-003.htm">animation-iteration-count-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - negative value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to negative count, it is invalid and animation will play from beginning to end once.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-004-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-iteration-count-004.htm">animation-iteration-count-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - non-integer value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to non-integer, animation will end partway through its last cycle.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-005-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-iteration-count-005.htm">animation-iteration-count-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - integer value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to integer count, animation will repeat the specified number of times.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-006-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-iteration-count-006.htm">animation-iteration-count-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - 0 (zero)
+          <ul class="assert">
+            <li>When animation-iteration-count is set to 0 (zero), no animation is seen.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-007-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-iteration-count-007.htm">animation-iteration-count-007</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - ::after
+          <ul class="assert">
+            <li>Check that animation-iteration-count applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-008-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-iteration-count-008.htm">animation-iteration-count-008</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - ::before
+          <ul class="assert">
+            <li>Check that animation-iteration-count applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-event-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-iteration-event.htm">animation-iteration-event</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation events - animationiteration
+          <ul class="assert">
+            <li>Check that animationiteration event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-keyframes-001-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-keyframes-001.htm">animation-keyframes-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>@keyframes - from, to, percentage
+          <ul class="assert">
+            <li>Check that @keyframes rule accepts 'from' and 'to' keywords, and percentage values.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-keyframes-002-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-keyframes-002.htm">animation-keyframes-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>@keyframes - negative percentage and higher than 100%
+          <ul class="assert">
+            <li>Check that a keyframe selector specifies negative percentage values or values higher than 100%, the keyframe will be ignored.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-keyframes-003-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-keyframes-003.htm">animation-keyframes-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>@keyframes - animation-timing-function
+          <ul class="assert">
+            <li>Check that @keyframes rule accpets 'animation-timing-function' property used as the animation moves to the next keyframe.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-001-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-name-001.htm">animation-name-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name - blank value
+          <ul class="assert">
+            <li>Check that animation-name is set without any value, there will be no animation.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-002-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-name-002.htm">animation-name-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name matchs keyframes at-rule
+          <ul class="assert">
+            <li>When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation, animation will execute.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-003-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-name-003.htm">animation-name-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name - none
+          <ul class="assert">
+            <li>Check that animation-name is set to none, there will be no animation.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-004-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-name-004.htm">animation-name-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name mismatches keyframe at-rule
+          <ul class="assert">
+            <li>Check that animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-005-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-name-005.htm">animation-name-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name - ::after
+          <ul class="assert">
+            <li>Check that animation-name applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-006-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-name-006.htm">animation-name-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name - ::before
+          <ul class="assert">
+            <li>Check that animation-name applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-play-state-001-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-play-state-001.htm">animation-play-state-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - paused
+          <ul class="assert">
+            <li>When animation-play-state is set to paused, animation is paused where the progress it had made before being paused.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-play-state-002-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-play-state-002.htm">animation-play-state-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - running
+          <ul class="assert">
+            <li>When animation-play-state is set to running, animation will proceed as normal.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-play-state-003-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-play-state-003.htm">animation-play-state-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - ::after
+          <ul class="assert">
+            <li>Check that animation-play-state applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-play-state-004-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-play-state-004.htm">animation-play-state-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - ::before
+          <ul class="assert">
+            <li>Check that animation-play-state applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-001-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-001.htm">animation-timing-function-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - cubic-bezier with parameters (0,0,1,1)
+          <ul class="assert">
+            <li>When animation-timing-function is set to cubic-bezier with parameters (0,0,1,1), animation will progress over one cycle of its duration with constant speed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-002-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-002.htm">animation-timing-function-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease, animation will starts slow, gain acceleration in the middle and again slow down at the end.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-003-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-003.htm">animation-timing-function-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease-in
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease-in, animation will start slow, gain acceleration as time progresses.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-004-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-004.htm">animation-timing-function-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease-in-out
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease-in-out, animation will start slow, gain acceleration in the middel and again slow down at the end.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-005-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-005.htm">animation-timing-function-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease-out
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease-out, animation will start with higher (than the normal) speed and relatively slow down as time progresses.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-006-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-006.htm">animation-timing-function-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - linear
+          <ul class="assert">
+            <li>When animation-timing-function is set to linear, animation will progress over one cycle of its duration with constant speed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-007-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-007.htm">animation-timing-function-007</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - step-start
+          <ul class="assert">
+            <li>When animation-timing-function is set to step-start, animation will play the end effect at the start of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-008-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-008.htm">animation-timing-function-008</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - step-end
+          <ul class="assert">
+            <li>When animation-timing-function is set to step-end, animation will play the end effect at the end time point, and keep the start effect at the start of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-009-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-009.htm">animation-timing-function-009</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - steps with parameters (&lt;number&gt;, start)
+          <ul class="assert">
+            <li>When animation-timing-function is set to steps with paramenters (&lt;number&gt;, start), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the start of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-010-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-010.htm">animation-timing-function-010</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - steps with parameters (&lt;number&gt;, end)
+          <ul class="assert">
+            <li>When animation-timing-function is set to steps with paramenters (&lt;number&gt;, end), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the end of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-011-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-011.htm">animation-timing-function-011</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ::after
+          <ul class="assert">
+            <li>Check that animation-timing-function applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-012-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-012.htm">animation-timing-function-012</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ::before
+          <ul class="assert">
+            <li>Check that animation-timing-function applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animationstart-and-animationend-events-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animationstart-and-animationend-events.htm">animationstart-and-animationend-events</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation events - animationstart and animationend
+          <ul class="assert">
+            <li>Check that animationstart event occurs at the start of an animation, animationend event occurs when animation finishes.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s4.4">
       <tr><th colspan="4" scope="rowgroup">
@@ -76,7 +1495,150 @@
       <!-- 0 tests -->
     </tbody>
     <tbody id="s4.4.#animation-timing-function">
-      <!-- 0 tests -->
+      <!-- 13 tests -->
+      <tr id="animation-delay-001-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-delay-001.htm">animation-delay-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - negative value
+          <ul class="assert">
+            <li>When animation-delay is set to a negative time offset, animation will execute as soon as it is applied but act as if the animation had started the specified time in the past.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-001-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-001.htm">animation-timing-function-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - cubic-bezier with parameters (0,0,1,1)
+          <ul class="assert">
+            <li>When animation-timing-function is set to cubic-bezier with parameters (0,0,1,1), animation will progress over one cycle of its duration with constant speed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-002-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-002.htm">animation-timing-function-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease, animation will starts slow, gain acceleration in the middle and again slow down at the end.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-003-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-003.htm">animation-timing-function-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease-in
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease-in, animation will start slow, gain acceleration as time progresses.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-004-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-004.htm">animation-timing-function-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease-in-out
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease-in-out, animation will start slow, gain acceleration in the middel and again slow down at the end.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-005-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-005.htm">animation-timing-function-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease-out
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease-out, animation will start with higher (than the normal) speed and relatively slow down as time progresses.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-006-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-006.htm">animation-timing-function-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - linear
+          <ul class="assert">
+            <li>When animation-timing-function is set to linear, animation will progress over one cycle of its duration with constant speed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-007-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-007.htm">animation-timing-function-007</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - step-start
+          <ul class="assert">
+            <li>When animation-timing-function is set to step-start, animation will play the end effect at the start of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-008-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-008.htm">animation-timing-function-008</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - step-end
+          <ul class="assert">
+            <li>When animation-timing-function is set to step-end, animation will play the end effect at the end time point, and keep the start effect at the start of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-009-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-009.htm">animation-timing-function-009</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - steps with parameters (&lt;number&gt;, start)
+          <ul class="assert">
+            <li>When animation-timing-function is set to steps with paramenters (&lt;number&gt;, start), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the start of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-010-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-010.htm">animation-timing-function-010</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - steps with parameters (&lt;number&gt;, end)
+          <ul class="assert">
+            <li>When animation-timing-function is set to steps with paramenters (&lt;number&gt;, end), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the end of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-011-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-011.htm">animation-timing-function-011</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ::after
+          <ul class="assert">
+            <li>Check that animation-timing-function applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-012-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-012.htm">animation-timing-function-012</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ::before
+          <ul class="assert">
+            <li>Check that animation-timing-function applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s4.5">
       <tr><th colspan="4" scope="rowgroup">
@@ -85,7 +1647,172 @@
       <!-- 0 tests -->
     </tbody>
     <tbody id="s4.5.#animation-iteration-count">
-      <!-- 0 tests -->
+      <!-- 15 tests -->
+      <tr id="animation-direction-001-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-direction-001.htm">animation-direction-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - alternate
+          <ul class="assert">
+            <li>When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-002-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-direction-002.htm">animation-direction-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - normal
+          <ul class="assert">
+            <li>When animation-direction is set to normal, all iterations of animation are played as specified.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-003-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-direction-003.htm">animation-direction-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - alternate-reverse
+          <ul class="assert">
+            <li>When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-004-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-direction-004.htm">animation-direction-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - reverse
+          <ul class="assert">
+            <li>When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-005-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-direction-005.htm">animation-direction-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - ::after
+          <ul class="assert">
+            <li>Check that animation-direction applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-006-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-direction-006.htm">animation-direction-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - ::before
+          <ul class="assert">
+            <li>Check that animation-direction applies to the ::before pseudo element</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-001-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-iteration-count-001.htm">animation-iteration-count-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - default value
+          <ul class="assert">
+            <li>When animation-iteration-count is not set, 1 is taken by default and animation will play from beginning to end once.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-002-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-iteration-count-002.htm">animation-iteration-count-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - infinite value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to infinite, animation will repeat forever.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-003-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-iteration-count-003.htm">animation-iteration-count-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - negative value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to negative count, it is invalid and animation will play from beginning to end once.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-004-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-iteration-count-004.htm">animation-iteration-count-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - non-integer value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to non-integer, animation will end partway through its last cycle.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-005-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-iteration-count-005.htm">animation-iteration-count-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - integer value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to integer count, animation will repeat the specified number of times.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-006-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-iteration-count-006.htm">animation-iteration-count-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - 0 (zero)
+          <ul class="assert">
+            <li>When animation-iteration-count is set to 0 (zero), no animation is seen.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-007-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-iteration-count-007.htm">animation-iteration-count-007</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - ::after
+          <ul class="assert">
+            <li>Check that animation-iteration-count applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-008-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-iteration-count-008.htm">animation-iteration-count-008</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - ::before
+          <ul class="assert">
+            <li>Check that animation-iteration-count applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-event-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-iteration-event.htm">animation-iteration-event</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation events - animationiteration
+          <ul class="assert">
+            <li>Check that animationiteration event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s4.5.#single-animation-iteration-count">
       <!-- 0 tests -->
@@ -103,7 +1830,73 @@
       <!-- 0 tests -->
     </tbody>
     <tbody id="s4.6.#animation-direction">
-      <!-- 0 tests -->
+      <!-- 6 tests -->
+      <tr id="animation-direction-001-4.6.#animation-direction" class="primary animated">
+        <td><strong>
+            <a href="animation-direction-001.htm">animation-direction-001</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - alternate
+          <ul class="assert">
+            <li>When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-002-4.6.#animation-direction" class="primary animated">
+        <td><strong>
+            <a href="animation-direction-002.htm">animation-direction-002</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - normal
+          <ul class="assert">
+            <li>When animation-direction is set to normal, all iterations of animation are played as specified.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-003-4.6.#animation-direction" class="primary animated">
+        <td><strong>
+            <a href="animation-direction-003.htm">animation-direction-003</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - alternate-reverse
+          <ul class="assert">
+            <li>When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-004-4.6.#animation-direction" class="primary animated">
+        <td><strong>
+            <a href="animation-direction-004.htm">animation-direction-004</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - reverse
+          <ul class="assert">
+            <li>When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-005-4.6.#animation-direction" class="primary animated">
+        <td><strong>
+            <a href="animation-direction-005.htm">animation-direction-005</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - ::after
+          <ul class="assert">
+            <li>Check that animation-direction applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-006-4.6.#animation-direction" class="primary animated">
+        <td><strong>
+            <a href="animation-direction-006.htm">animation-direction-006</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - ::before
+          <ul class="assert">
+            <li>Check that animation-direction applies to the ::before pseudo element</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s4.6.#normal">
       <!-- 0 tests -->
@@ -121,7 +1914,51 @@
       <!-- 0 tests -->
     </tbody>
     <tbody id="s4.7.#animation-play-state">
-      <!-- 0 tests -->
+      <!-- 4 tests -->
+      <tr id="animation-play-state-001-4.7.#animation-play-state" class="animated">
+        <td>
+            <a href="animation-play-state-001.htm">animation-play-state-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - paused
+          <ul class="assert">
+            <li>When animation-play-state is set to paused, animation is paused where the progress it had made before being paused.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-play-state-002-4.7.#animation-play-state" class="animated">
+        <td>
+            <a href="animation-play-state-002.htm">animation-play-state-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - running
+          <ul class="assert">
+            <li>When animation-play-state is set to running, animation will proceed as normal.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-play-state-003-4.7.#animation-play-state" class="animated">
+        <td>
+            <a href="animation-play-state-003.htm">animation-play-state-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - ::after
+          <ul class="assert">
+            <li>Check that animation-play-state applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-play-state-004-4.7.#animation-play-state" class="animated">
+        <td>
+            <a href="animation-play-state-004.htm">animation-play-state-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - ::before
+          <ul class="assert">
+            <li>Check that animation-play-state applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s4.7.#single-animation-play-state">
       <!-- 0 tests -->
@@ -133,7 +1970,106 @@
       <!-- 0 tests -->
     </tbody>
     <tbody id="s4.8.#animation-delay">
-      <!-- 0 tests -->
+      <!-- 9 tests -->
+      <tr id="animation-delay-001-4.8.#animation-delay" class="primary animated">
+        <td><strong>
+            <a href="animation-delay-001.htm">animation-delay-001</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - negative value
+          <ul class="assert">
+            <li>When animation-delay is set to a negative time offset, animation will execute as soon as it is applied but act as if the animation had started the specified time in the past.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-002-4.8.#animation-delay" class="primary animated">
+        <td><strong>
+            <a href="animation-delay-002.htm">animation-delay-002</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - positive value
+          <ul class="assert">
+            <li>When animation-delay is set to a positive time offset, animation will delay execution by the specified offset value.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-003-4.8.#animation-delay" class="primary animated">
+        <td><strong>
+            <a href="animation-delay-003.htm">animation-delay-003</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - 0s
+          <ul class="assert">
+            <li>When animation-delay is set to 0s (zero seconds), animation will execute as soon as it is applied.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-004-4.8.#animation-delay" class="primary animated">
+        <td><strong>
+            <a href="animation-delay-004.htm">animation-delay-004</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - ::after
+          <ul class="assert">
+            <li>Check that animation-delay applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-005-4.8.#animation-delay" class="primary animated">
+        <td><strong>
+            <a href="animation-delay-005.htm">animation-delay-005</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - ::before
+          <ul class="assert">
+            <li>Check that animation-delay applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-006-4.8.#animation-delay" class="primary animated">
+        <td><strong>
+            <a href="animation-delay-006.htm">animation-delay-006</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - initial keyword
+          <ul class="assert">
+            <li>Check that animation-delay property accepts 'initial' keyword.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-007-4.8.#animation-delay" class="primary animated">
+        <td><strong>
+            <a href="animation-delay-007.htm">animation-delay-007</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - inherit keyword
+          <ul class="assert">
+            <li>Check that animation-delay property accepts 'inherit' keyword.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-003-4.8.#animation-delay" class="animated">
+        <td>
+            <a href="animation-fill-mode-003.htm">animation-fill-mode-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - backwards
+          <ul class="assert">
+            <li>When animation-fill-mode is set to backwards, animation-delay is set a positive time offset, and animation-direction is 'normal' or 'alternate-reverse', animation will apply the from or 0% keyframe that will start the first iteration.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-004-4.8.#animation-delay" class="animated">
+        <td>
+            <a href="animation-fill-mode-004.htm">animation-fill-mode-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - both
+          <ul class="assert">
+            <li>Check if animation-fill-mode is set to both, the effects of both 'forwards' and 'backwards' will apply.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s4.9">
       <tr><th colspan="4" scope="rowgroup">
@@ -142,7 +2078,128 @@
       <!-- 0 tests -->
     </tbody>
     <tbody id="s4.9.#animation-fill-mode">
-      <!-- 0 tests -->
+      <!-- 11 tests -->
+      <tr id="animation-duration-005-4.9.#animation-fill-mode" class="animated">
+        <td>
+            <a href="animation-duration-005.htm">animation-duration-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - 0s, animation-fill-mode - forwards
+          <ul class="assert">
+            <li>When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'forwards', the last frame of the animation will be displayed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-006-4.9.#animation-fill-mode" class="animated">
+        <td>
+            <a href="animation-duration-006.htm">animation-duration-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - 0s, animation-fill-mode - both
+          <ul class="assert">
+            <li>When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'both', the last frame of the animation will be displayed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-001-4.9.#animation-fill-mode" class="animated">
+        <td>
+            <a href="animation-fill-mode-001.htm">animation-fill-mode-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - none
+          <ul class="assert">
+            <li>When animation-fill-mode is set to none, animation has no effect when it is applied but not executing.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-002-4.9.#animation-fill-mode" class="animated">
+        <td>
+            <a href="animation-fill-mode-002.htm">animation-fill-mode-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - forwards
+          <ul class="assert">
+            <li>When animation-fill-mode is set to forwards, animation will apply the property values for the time the amination ended after the animation ends.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-003-4.9.#animation-fill-mode" class="animated">
+        <td>
+            <a href="animation-fill-mode-003.htm">animation-fill-mode-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - backwards
+          <ul class="assert">
+            <li>When animation-fill-mode is set to backwards, animation-delay is set a positive time offset, and animation-direction is 'normal' or 'alternate-reverse', animation will apply the from or 0% keyframe that will start the first iteration.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-004-4.9.#animation-fill-mode" class="animated">
+        <td>
+            <a href="animation-fill-mode-004.htm">animation-fill-mode-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - both
+          <ul class="assert">
+            <li>Check if animation-fill-mode is set to both, the effects of both 'forwards' and 'backwards' will apply.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-005-4.9.#animation-fill-mode" class="animated">
+        <td>
+            <a href="animation-fill-mode-005.htm">animation-fill-mode-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - ::after
+          <ul class="assert">
+            <li>Check that animation-fill-mode applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-006-4.9.#animation-fill-mode" class="animated">
+        <td>
+            <a href="animation-fill-mode-006.htm">animation-fill-mode-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - ::before
+          <ul class="assert">
+            <li>Check that animation-fill-mode applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-007-4.9.#animation-fill-mode" class="animated">
+        <td>
+            <a href="animation-timing-function-007.htm">animation-timing-function-007</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - step-start
+          <ul class="assert">
+            <li>When animation-timing-function is set to step-start, animation will play the end effect at the start of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-009-4.9.#animation-fill-mode" class="animated">
+        <td>
+            <a href="animation-timing-function-009.htm">animation-timing-function-009</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - steps with parameters (&lt;number&gt;, start)
+          <ul class="assert">
+            <li>When animation-timing-function is set to steps with paramenters (&lt;number&gt;, start), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the start of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-010-4.9.#animation-fill-mode" class="animated">
+        <td>
+            <a href="animation-timing-function-010.htm">animation-timing-function-010</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - steps with parameters (&lt;number&gt;, end)
+          <ul class="assert">
+            <li>When animation-timing-function is set to steps with paramenters (&lt;number&gt;, end), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the end of the interval.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s4.9.#single-animation-fill-mode">
       <!-- 0 tests -->
@@ -154,7 +2211,40 @@
       <!-- 0 tests -->
     </tbody>
     <tbody id="s4.10.#animation">
-      <!-- 0 tests -->
+      <!-- 3 tests -->
+      <tr id="animation-shorthand-001-4.10.#animation" class="primary animated">
+        <td><strong>
+            <a href="animation-shorthand-001.htm">animation-shorthand-001</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation shorthand
+          <ul class="assert">
+            <li>Check that animation shorthand property accepts time values for animation-duration and animation-delay in order.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-shorthand-002-4.10.#animation" class="primary animated">
+        <td><strong>
+            <a href="animation-shorthand-002.htm">animation-shorthand-002</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation shorthand - ::after
+          <ul class="assert">
+            <li>Check that animation shorthand applies to the ::after pseudo element and accepts time values for animation-duration and animation-delay in order.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-shorthand-003-4.10.#animation" class="primary animated">
+        <td><strong>
+            <a href="animation-shorthand-003.htm">animation-shorthand-003</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation shorthand - ::before
+          <ul class="assert">
+            <li>Check that animation shorthand applies to the ::before pseudo element and accepts time values for animation-duration and animation-delay in order.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s4.10.#single-animation">
       <!-- 0 tests -->
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/toc.htm b/tests/wpt/css-tests/css-animations-1_dev/html/toc.htm
index 8fd9abb4b71..4c0492f7965 100644
--- a/tests/wpt/css-tests/css-animations-1_dev/html/toc.htm
+++ b/tests/wpt/css-tests/css-animations-1_dev/html/toc.htm
@@ -27,17 +27,17 @@
     <tbody id="s2">
       <tr><th><a href="chapter-2.htm">Chapter 2 - 
         Values</a></th>
-      <td>(0 Tests)</td></tr>
+      <td>(2 Tests)</td></tr>
     </tbody>
     <tbody id="s3">
       <tr><th><a href="chapter-3.htm">Chapter 3 - 
         Animations</a></th>
-      <td>(15 Tests)</td></tr>
+      <td>(16 Tests)</td></tr>
     </tbody>
     <tbody id="s4">
       <tr><th><a href="chapter-4.htm">Chapter 4 - 
         Keyframes</a></th>
-      <td>(0 Tests)</td></tr>
+      <td>(66 Tests)</td></tr>
     </tbody>
     <tbody id="s5">
       <tr><th><a href="chapter-5.htm">Chapter 5 - 
diff --git a/tests/wpt/css-tests/css-animations-1_dev/implementation-report-TEMPLATE.data b/tests/wpt/css-tests/css-animations-1_dev/implementation-report-TEMPLATE.data
index 8e3bdc96508..a477cea9f09 100644
--- a/tests/wpt/css-tests/css-animations-1_dev/implementation-report-TEMPLATE.data
+++ b/tests/wpt/css-tests/css-animations-1_dev/implementation-report-TEMPLATE.data
@@ -3,8 +3,144 @@
 # http://test.csswg.org/suites/css-animations-1_dev/DATESTAMP/
 # See http://wiki.csswg.org/test/implementation-report for instructions
 testname	revision	result	comment
+html/animation-delay-001.htm	a59cfbaf4a9ecfae621b3b94f31a39d973effc6b	?
+xhtml1/animation-delay-001.xht	a59cfbaf4a9ecfae621b3b94f31a39d973effc6b	?
+html/animation-delay-002.htm	c2f5a26e91124f1659e115345c64e46b29e77ddf	?
+xhtml1/animation-delay-002.xht	c2f5a26e91124f1659e115345c64e46b29e77ddf	?
+html/animation-delay-003.htm	d00f228e0f8b6dedb1323493b1b73072f2385212	?
+xhtml1/animation-delay-003.xht	d00f228e0f8b6dedb1323493b1b73072f2385212	?
+html/animation-delay-004.htm	126b62ca8059c74fc012172a5f19dd6f2dadbde4	?
+xhtml1/animation-delay-004.xht	126b62ca8059c74fc012172a5f19dd6f2dadbde4	?
+html/animation-delay-005.htm	26ecab722c342d2f3f8dd7dc864f1ac64490027c	?
+xhtml1/animation-delay-005.xht	26ecab722c342d2f3f8dd7dc864f1ac64490027c	?
+html/animation-delay-006.htm	13c48bd6b709280df6a9a5bfff09c2880e868a41	?
+xhtml1/animation-delay-006.xht	13c48bd6b709280df6a9a5bfff09c2880e868a41	?
+html/animation-delay-007.htm	2f27e7970e6df9f0039f97e9543f4cf5fb16d5a3	?
+xhtml1/animation-delay-007.xht	2f27e7970e6df9f0039f97e9543f4cf5fb16d5a3	?
+html/animation-direction-001.htm	a7e38f2510c639abc4f8a90f699435377d04bcfd	?
+xhtml1/animation-direction-001.xht	a7e38f2510c639abc4f8a90f699435377d04bcfd	?
+html/animation-direction-002.htm	10d5d6cd6132c928fadcbe3312b8a7ffb2c0dacc	?
+xhtml1/animation-direction-002.xht	10d5d6cd6132c928fadcbe3312b8a7ffb2c0dacc	?
+html/animation-direction-003.htm	2525726c04b8605f6b2c4809f33866f566ae1b3e	?
+xhtml1/animation-direction-003.xht	2525726c04b8605f6b2c4809f33866f566ae1b3e	?
+html/animation-direction-004.htm	f14768d125e6639a43406b4640dcc9d93ba83576	?
+xhtml1/animation-direction-004.xht	f14768d125e6639a43406b4640dcc9d93ba83576	?
+html/animation-direction-005.htm	5fa0f64355db4c2c051c6232bdb80f4ac8ff248b	?
+xhtml1/animation-direction-005.xht	5fa0f64355db4c2c051c6232bdb80f4ac8ff248b	?
+html/animation-direction-006.htm	05f86fa498917fde4d1216bb9252609c74a7c3f3	?
+xhtml1/animation-direction-006.xht	05f86fa498917fde4d1216bb9252609c74a7c3f3	?
+html/animation-display.htm	8e6c27c47e1a837e07eed4a94d6cff0b13f133dc	?
+xhtml1/animation-display.xht	8e6c27c47e1a837e07eed4a94d6cff0b13f133dc	?
+html/animation-duration-001.htm	b7e9e6b620eddf01ef5ce9ff3a90a9d39ce733b2	?
+xhtml1/animation-duration-001.xht	b7e9e6b620eddf01ef5ce9ff3a90a9d39ce733b2	?
+html/animation-duration-002.htm	0a1ced535f37c055b5be633a34613f4a40dc4ed9	?
+xhtml1/animation-duration-002.xht	0a1ced535f37c055b5be633a34613f4a40dc4ed9	?
+html/animation-duration-003.htm	5578f320f4d80f5d8e5c0ede61139763bd6343a2	?
+xhtml1/animation-duration-003.xht	5578f320f4d80f5d8e5c0ede61139763bd6343a2	?
+html/animation-duration-004.htm	62fffb69c3d6ef31d371778495735a3f55ef1c51	?
+xhtml1/animation-duration-004.xht	62fffb69c3d6ef31d371778495735a3f55ef1c51	?
+html/animation-duration-005.htm	1aa4ed306edafc44f849e8c7e270af0cc73a09a4	?
+xhtml1/animation-duration-005.xht	1aa4ed306edafc44f849e8c7e270af0cc73a09a4	?
+html/animation-duration-006.htm	8f01bff7015212232e2e378bdb2bf30f4d7e390d	?
+xhtml1/animation-duration-006.xht	8f01bff7015212232e2e378bdb2bf30f4d7e390d	?
+html/animation-duration-007.htm	a4fc15e755ec66168590d0e39c02e49e1dc10efb	?
+xhtml1/animation-duration-007.xht	a4fc15e755ec66168590d0e39c02e49e1dc10efb	?
+html/animation-duration-008.htm	1a0b1995d43a4a2524555d9da34a6b36ae31a8ff	?
+xhtml1/animation-duration-008.xht	1a0b1995d43a4a2524555d9da34a6b36ae31a8ff	?
+html/animation-fill-mode-001.htm	92d88eae75f4d45c2af24235c5390469f6a2fe70	?
+xhtml1/animation-fill-mode-001.xht	92d88eae75f4d45c2af24235c5390469f6a2fe70	?
+html/animation-fill-mode-002.htm	a2e61dd6fc284dc628ed692448f222e8b560622a	?
+xhtml1/animation-fill-mode-002.xht	a2e61dd6fc284dc628ed692448f222e8b560622a	?
+html/animation-fill-mode-003.htm	abb5c141f0f145c8dfda82c28f669112f5b89c3a	?
+xhtml1/animation-fill-mode-003.xht	abb5c141f0f145c8dfda82c28f669112f5b89c3a	?
+html/animation-fill-mode-004.htm	e3a3d5e256446592c490233b94568d41e820a6f1	?
+xhtml1/animation-fill-mode-004.xht	e3a3d5e256446592c490233b94568d41e820a6f1	?
+html/animation-fill-mode-005.htm	d60439ebb629902cc04d45b8a9d3f46d334e54b3	?
+xhtml1/animation-fill-mode-005.xht	d60439ebb629902cc04d45b8a9d3f46d334e54b3	?
+html/animation-fill-mode-006.htm	e4474eae90dde4cb56ce31fd173ff32cbde1437b	?
+xhtml1/animation-fill-mode-006.xht	e4474eae90dde4cb56ce31fd173ff32cbde1437b	?
+html/animation-iteration-count-001.htm	f0d73fe77862535d66dfb252ab96a0ec4adf4a5a	?
+xhtml1/animation-iteration-count-001.xht	f0d73fe77862535d66dfb252ab96a0ec4adf4a5a	?
+html/animation-iteration-count-002.htm	c0cf3a4cd1863455e91de1ee14cfe7a04d8055d0	?
+xhtml1/animation-iteration-count-002.xht	c0cf3a4cd1863455e91de1ee14cfe7a04d8055d0	?
+html/animation-iteration-count-003.htm	8021971d9a81045eddbc7ca024479aa4d5390122	?
+xhtml1/animation-iteration-count-003.xht	8021971d9a81045eddbc7ca024479aa4d5390122	?
+html/animation-iteration-count-004.htm	3f36b4a02e18c3883aa19c5216af3fd3222fd4ae	?
+xhtml1/animation-iteration-count-004.xht	3f36b4a02e18c3883aa19c5216af3fd3222fd4ae	?
+html/animation-iteration-count-005.htm	5ed553e15237ae1c9b18cc0466aee617ca246cac	?
+xhtml1/animation-iteration-count-005.xht	5ed553e15237ae1c9b18cc0466aee617ca246cac	?
+html/animation-iteration-count-006.htm	649574f98923c8f0d9ba605ba4573596cc7c63aa	?
+xhtml1/animation-iteration-count-006.xht	649574f98923c8f0d9ba605ba4573596cc7c63aa	?
+html/animation-iteration-count-007.htm	053fffd162daaf0db34a1e25da133bd20cd01f3a	?
+xhtml1/animation-iteration-count-007.xht	053fffd162daaf0db34a1e25da133bd20cd01f3a	?
+html/animation-iteration-count-008.htm	3ae4c0e686fb5cf330151ee176b298cb51a77ef9	?
+xhtml1/animation-iteration-count-008.xht	3ae4c0e686fb5cf330151ee176b298cb51a77ef9	?
+html/animation-iteration-event.htm	e521ed19e72a1757572ca7c324be4e288a5c33c6	?
+xhtml1/animation-iteration-event.xht	e521ed19e72a1757572ca7c324be4e288a5c33c6	?
+html/animation-keyframes-001.htm	dd13bbf052c41758c69fd457cda3747ad6a10fb2	?
+xhtml1/animation-keyframes-001.xht	dd13bbf052c41758c69fd457cda3747ad6a10fb2	?
+html/animation-keyframes-002.htm	91d4a884eb431ceb0c8636098d33a6d93a2c014e	?
+xhtml1/animation-keyframes-002.xht	91d4a884eb431ceb0c8636098d33a6d93a2c014e	?
+html/animation-keyframes-003.htm	d1768e205585cf4224307af0b7cee0cf72c01258	?
+xhtml1/animation-keyframes-003.xht	d1768e205585cf4224307af0b7cee0cf72c01258	?
+html/animation-name-001.htm	cb26f4c55e9f6b4c169dcb2e13f4378c5c7136f1	?
+xhtml1/animation-name-001.xht	cb26f4c55e9f6b4c169dcb2e13f4378c5c7136f1	?
+html/animation-name-002.htm	70bd1cb364ec82be357ee418cb344e10ea301376	?
+xhtml1/animation-name-002.xht	70bd1cb364ec82be357ee418cb344e10ea301376	?
+html/animation-name-003.htm	8c98816bda0880f90a945cab8806e89fa6542d70	?
+xhtml1/animation-name-003.xht	8c98816bda0880f90a945cab8806e89fa6542d70	?
+html/animation-name-004.htm	3cce09a98cd0cb9d7b3d101f608128e4a759bc79	?
+xhtml1/animation-name-004.xht	3cce09a98cd0cb9d7b3d101f608128e4a759bc79	?
+html/animation-name-005.htm	9ef57c67ba391e1a00060db5eca52be5fc68c6f0	?
+xhtml1/animation-name-005.xht	9ef57c67ba391e1a00060db5eca52be5fc68c6f0	?
+html/animation-name-006.htm	af99446d3d688a8e6ad08caee199229327c2279a	?
+xhtml1/animation-name-006.xht	af99446d3d688a8e6ad08caee199229327c2279a	?
+html/animation-play-state-001.htm	64af3a1bf0816b76b3ac6f15ad15e6cc6c7ccfb3	?
+xhtml1/animation-play-state-001.xht	64af3a1bf0816b76b3ac6f15ad15e6cc6c7ccfb3	?
+html/animation-play-state-002.htm	22aac25e6c5bc4fccf865d0843e7f97e05ff72e0	?
+xhtml1/animation-play-state-002.xht	22aac25e6c5bc4fccf865d0843e7f97e05ff72e0	?
+html/animation-play-state-003.htm	1dca5c63b44436557a976a9d2f26755fefb6ade5	?
+xhtml1/animation-play-state-003.xht	1dca5c63b44436557a976a9d2f26755fefb6ade5	?
+html/animation-play-state-004.htm	5047e6044f322dd9211c9c3ffc4655b4d6c50540	?
+xhtml1/animation-play-state-004.xht	5047e6044f322dd9211c9c3ffc4655b4d6c50540	?
+html/animation-shorthand-001.htm	021fa6b8453b8e7c009ce8fea9853bc4a31bf762	?
+xhtml1/animation-shorthand-001.xht	021fa6b8453b8e7c009ce8fea9853bc4a31bf762	?
+html/animation-shorthand-002.htm	75ac427634fb58686568403ea3f5f91c6654ac95	?
+xhtml1/animation-shorthand-002.xht	75ac427634fb58686568403ea3f5f91c6654ac95	?
+html/animation-shorthand-003.htm	228b0f49702e90694efdca63112fe58f2d3efeff	?
+xhtml1/animation-shorthand-003.xht	228b0f49702e90694efdca63112fe58f2d3efeff	?
+html/animation-timing-function-001.htm	f9aadf639f98f9795400a5218e8540c08366e8cd	?
+xhtml1/animation-timing-function-001.xht	f9aadf639f98f9795400a5218e8540c08366e8cd	?
+html/animation-timing-function-002.htm	7527eff75562c5f49d9599e7495c47aa9bd9f414	?
+xhtml1/animation-timing-function-002.xht	7527eff75562c5f49d9599e7495c47aa9bd9f414	?
+html/animation-timing-function-003.htm	214819b56e1e46f9c7aa07d0ce144830ac65e924	?
+xhtml1/animation-timing-function-003.xht	214819b56e1e46f9c7aa07d0ce144830ac65e924	?
+html/animation-timing-function-004.htm	4064198bc4b46aaf5eb99144c7343655485b86a9	?
+xhtml1/animation-timing-function-004.xht	4064198bc4b46aaf5eb99144c7343655485b86a9	?
+html/animation-timing-function-005.htm	5a29c60d50b81071e5c7d9d5d75aacbf7fd56fe5	?
+xhtml1/animation-timing-function-005.xht	5a29c60d50b81071e5c7d9d5d75aacbf7fd56fe5	?
+html/animation-timing-function-006.htm	2bb42397e46fd890be8f37a020d4febef34c5b96	?
+xhtml1/animation-timing-function-006.xht	2bb42397e46fd890be8f37a020d4febef34c5b96	?
+html/animation-timing-function-007.htm	ffbe76fc315f072878076a7bf711ac9a891eba52	?
+xhtml1/animation-timing-function-007.xht	ffbe76fc315f072878076a7bf711ac9a891eba52	?
+html/animation-timing-function-008.htm	4fbb8d08f0f4b411101c203fc66f72d222df7f44	?
+xhtml1/animation-timing-function-008.xht	4fbb8d08f0f4b411101c203fc66f72d222df7f44	?
+html/animation-timing-function-009.htm	0c8dd1d5b92dfaeb20edb3ff4f3287bb06ecff30	?
+xhtml1/animation-timing-function-009.xht	0c8dd1d5b92dfaeb20edb3ff4f3287bb06ecff30	?
+html/animation-timing-function-010.htm	da7e0cd2f6006255f27cbd3721e0040771631adb	?
+xhtml1/animation-timing-function-010.xht	da7e0cd2f6006255f27cbd3721e0040771631adb	?
+html/animation-timing-function-011.htm	bbc7283ae0b15aaa2ed784a7645b404a7fa301a5	?
+xhtml1/animation-timing-function-011.xht	bbc7283ae0b15aaa2ed784a7645b404a7fa301a5	?
+html/animation-timing-function-012.htm	d6a471751d34018dfc5e91a83592e896d8e6e5b5	?
+xhtml1/animation-timing-function-012.xht	d6a471751d34018dfc5e91a83592e896d8e6e5b5	?
+html/animationevent-interface.htm	a1e39dcdabe246037312ac3a8bab7bf3fe904a79	?
+xhtml1/animationevent-interface.xht	a1e39dcdabe246037312ac3a8bab7bf3fe904a79	?
+html/animationevent-types.htm	11cda4945e4216dee93775c6217d3ce303ea04a9	?
+xhtml1/animationevent-types.xht	11cda4945e4216dee93775c6217d3ce303ea04a9	?
 html/animations-001.htm	58200be49397d3ebd75335737334fadb5f72043a	?
 xhtml1/animations-001.xht	58200be49397d3ebd75335737334fadb5f72043a	?
+html/animationstart-and-animationend-events.htm	8faa1d6d24026a7e26d4c00bc57b7f70d4042146	?
+xhtml1/animationstart-and-animationend-events.xht	8faa1d6d24026a7e26d4c00bc57b7f70d4042146	?
 html/css-filters-animation-blur.htm	53622387367e3daa90b9880e22ff9548665f4883	?
 xhtml1/css-filters-animation-blur.xht	53622387367e3daa90b9880e22ff9548665f4883	?
 html/css-filters-animation-brightness.htm	6ef87e3d77b51aaa2d33c91de5b6c84e96b41eae	?
diff --git a/tests/wpt/css-tests/css-animations-1_dev/index.htm b/tests/wpt/css-tests/css-animations-1_dev/index.htm
index 1d22cd0ece6..50c34daa90d 100644
--- a/tests/wpt/css-tests/css-animations-1_dev/index.htm
+++ b/tests/wpt/css-tests/css-animations-1_dev/index.htm
@@ -126,7 +126,9 @@
   <ul>
     <li>Fran&Atilde;&sect;ois REMY</li>
     <li>Gunther Brunner</li>
+    <li>Intel</li>
     <li>Mihai Balan</li>
+    <li>Nokia Inc.</li>
   </ul>
 
 </body>
diff --git a/tests/wpt/css-tests/css-animations-1_dev/index.xht b/tests/wpt/css-tests/css-animations-1_dev/index.xht
index cb38cb0ec55..4f003ef3b4e 100644
--- a/tests/wpt/css-tests/css-animations-1_dev/index.xht
+++ b/tests/wpt/css-tests/css-animations-1_dev/index.xht
@@ -126,7 +126,9 @@
   <ul>
     <li>Fran&Atilde;&sect;ois REMY</li>
     <li>Gunther Brunner</li>
+    <li>Intel</li>
     <li>Mihai Balan</li>
+    <li>Nokia Inc.</li>
   </ul>
 
 </body>
diff --git a/tests/wpt/css-tests/css-animations-1_dev/testinfo.data b/tests/wpt/css-tests/css-animations-1_dev/testinfo.data
index 27ed2eb3444..7840164ef55 100644
--- a/tests/wpt/css-tests/css-animations-1_dev/testinfo.data
+++ b/tests/wpt/css-tests/css-animations-1_dev/testinfo.data
@@ -1,5 +1,73 @@
 id	references	title	flags	links	revision	credits	assertion
+animation-delay-001		animation-delay - negative value	animated	https://drafts.csswg.org/css-animations-1/#animation-delay,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function	a59cfbaf4a9ecfae621b3b94f31a39d973effc6b	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	When animation-delay is set to a negative time offset, animation will execute as soon as it is applied but act as if the animation had started the specified time in the past.
+animation-delay-002		animation-delay - positive value	animated	https://drafts.csswg.org/css-animations-1/#animation-delay,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration	c2f5a26e91124f1659e115345c64e46b29e77ddf	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	When animation-delay is set to a positive time offset, animation will delay execution by the specified offset value.
+animation-delay-003		animation-delay - 0s	animated	https://drafts.csswg.org/css-animations-1/#animation-delay,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration	d00f228e0f8b6dedb1323493b1b73072f2385212	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	When animation-delay is set to 0s (zero seconds), animation will execute as soon as it is applied.
+animation-delay-004		animation-delay - ::after	animated	https://drafts.csswg.org/css-animations-1/#animation-delay,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration	126b62ca8059c74fc012172a5f19dd6f2dadbde4	`Intel`<http://www.intel.com>	Check that animation-delay applies to the ::after pseudo element.
+animation-delay-005		animation-delay - ::before	animated	https://drafts.csswg.org/css-animations-1/#animation-delay,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration	26ecab722c342d2f3f8dd7dc864f1ac64490027c	`Intel`<http://www.intel.com>	Check that animation-delay applies to the ::before pseudo element.
+animation-delay-006		animation-delay - initial keyword	animated	https://drafts.csswg.org/css-animations-1/#animation-delay,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#values	13c48bd6b709280df6a9a5bfff09c2880e868a41	`Intel`<http://www.intel.com>	Check that animation-delay property accepts 'initial' keyword.
+animation-delay-007		animation-delay - inherit keyword	animated	https://drafts.csswg.org/css-animations-1/#animation-delay,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#values	2f27e7970e6df9f0039f97e9543f4cf5fb16d5a3	`Intel`<http://www.intel.com>	Check that animation-delay property accepts 'inherit' keyword.
+animation-direction-001		animation-direction - alternate	animated	https://drafts.csswg.org/css-animations-1/#animation-direction,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count	a7e38f2510c639abc4f8a90f699435377d04bcfd	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
+animation-direction-002		animation-direction - normal	animated	https://drafts.csswg.org/css-animations-1/#animation-direction,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count	10d5d6cd6132c928fadcbe3312b8a7ffb2c0dacc	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	When animation-direction is set to normal, all iterations of animation are played as specified.
+animation-direction-003		animation-direction - alternate-reverse	animated	https://drafts.csswg.org/css-animations-1/#animation-direction,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count	2525726c04b8605f6b2c4809f33866f566ae1b3e	`Intel`<http://www.intel.com>	When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
+animation-direction-004		animation-direction - reverse	animated	https://drafts.csswg.org/css-animations-1/#animation-direction,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count	f14768d125e6639a43406b4640dcc9d93ba83576	`Intel`<http://www.intel.com>	When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.
+animation-direction-005		animation-direction - ::after	animated	https://drafts.csswg.org/css-animations-1/#animation-direction,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count	5fa0f64355db4c2c051c6232bdb80f4ac8ff248b	`Intel`<http://www.intel.com>	Check that animation-direction applies to the ::after pseudo element.
+animation-direction-006		animation-direction - ::before	animated	https://drafts.csswg.org/css-animations-1/#animation-direction,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count	05f86fa498917fde4d1216bb9252609c74a7c3f3	`Intel`<http://www.intel.com>	Check that animation-direction applies to the ::before pseudo element
+animation-display		animation - display	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animations	8e6c27c47e1a837e07eed4a94d6cff0b13f133dc	`Intel`<http://www.intel.com>	Check that setting 'display' property to 'none' terminates running animation applied to the element, and updating 'display' property to a value other than 'none' will start the animation.
+animation-duration-001		animation-duration - blank value	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration	b7e9e6b620eddf01ef5ce9ff3a90a9d39ce733b2	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	When animation-duration value is set blank, there will be no animation seen.
+animation-duration-002		animation-duration - finite value	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration	0a1ced535f37c055b5be633a34613f4a40dc4ed9	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	When animation-duration is set a finite time offset, animation takes the specifies time to complete one cycle.
+animation-duration-003		animation-duration - negative value	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration	5578f320f4d80f5d8e5c0ede61139763bd6343a2	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	When animation-duration is set to a negative value, it is treated as 0s (zero seconds) and no animation is seen.
+animation-duration-004		animation-duration - 0s	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration	62fffb69c3d6ef31d371778495735a3f55ef1c51	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	When animation-duration is set to 0s (zero seconds), animation occurs instantaneously, there will be no animation seen.
+animation-duration-005		animation-duration - 0s, animation-fill-mode - forwards	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode	1aa4ed306edafc44f849e8c7e270af0cc73a09a4	`Intel`<http://www.intel.com>	When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'forwards', the last frame of the animation will be displayed.
+animation-duration-006		animation-duration - 0s, animation-fill-mode - both	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode	8f01bff7015212232e2e378bdb2bf30f4d7e390d	`Intel`<http://www.intel.com>	When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'both', the last frame of the animation will be displayed.
+animation-duration-007		animation-duration - ::before	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration	a4fc15e755ec66168590d0e39c02e49e1dc10efb	`Intel`<http://www.intel.com>	Check that animation-duration applies to the ::before pseudo element.
+animation-duration-008		animation-duration - ::after	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration	1a0b1995d43a4a2524555d9da34a6b36ae31a8ff	`Intel`<http://www.intel.com>	Check that animation-duration applies to the ::after pseudo element.
+animation-fill-mode-001		animation-fill-mode - none	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode	92d88eae75f4d45c2af24235c5390469f6a2fe70	`Intel`<http://www.intel.com>	When animation-fill-mode is set to none, animation has no effect when it is applied but not executing.
+animation-fill-mode-002		animation-fill-mode - forwards	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode	a2e61dd6fc284dc628ed692448f222e8b560622a	`Intel`<http://www.intel.com>	When animation-fill-mode is set to forwards, animation will apply the property values for the time the amination ended after the animation ends.
+animation-fill-mode-003		animation-fill-mode - backwards	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-delay,https://drafts.csswg.org/css-animations-1/#animation-fill-mode	abb5c141f0f145c8dfda82c28f669112f5b89c3a	`Intel`<http://www.intel.com>	When animation-fill-mode is set to backwards, animation-delay is set a positive time offset, and animation-direction is 'normal' or 'alternate-reverse', animation will apply the from or 0% keyframe that will start the first iteration.
+animation-fill-mode-004		animation-fill-mode - both	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-delay,https://drafts.csswg.org/css-animations-1/#animation-fill-mode	e3a3d5e256446592c490233b94568d41e820a6f1	`Intel`<http://www.intel.com>	Check if animation-fill-mode is set to both, the effects of both 'forwards' and 'backwards' will apply.
+animation-fill-mode-005		animation-fill-mode - ::after	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode	d60439ebb629902cc04d45b8a9d3f46d334e54b3	`Intel`<http://www.intel.com>	Check that animation-fill-mode applies to the ::after pseudo element.
+animation-fill-mode-006		animation-fill-mode - ::before	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode	e4474eae90dde4cb56ce31fd173ff32cbde1437b	`Intel`<http://www.intel.com>	Check that animation-fill-mode applies to the ::before pseudo element.
+animation-iteration-count-001		animation-iteration-count - default value	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count	f0d73fe77862535d66dfb252ab96a0ec4adf4a5a	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	When animation-iteration-count is not set, 1 is taken by default and animation will play from beginning to end once.
+animation-iteration-count-002		animation-iteration-count - infinite value	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count	c0cf3a4cd1863455e91de1ee14cfe7a04d8055d0	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	When animation-iteration-count is set to infinite, animation will repeat forever.
+animation-iteration-count-003		animation-iteration-count - negative value	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count	8021971d9a81045eddbc7ca024479aa4d5390122	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	When animation-iteration-count is set to negative count, it is invalid and animation will play from beginning to end once.
+animation-iteration-count-004		animation-iteration-count - non-integer value	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count	3f36b4a02e18c3883aa19c5216af3fd3222fd4ae	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	When animation-iteration-count is set to non-integer, animation will end partway through its last cycle.
+animation-iteration-count-005		animation-iteration-count - integer value	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count	5ed553e15237ae1c9b18cc0466aee617ca246cac	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	When animation-iteration-count is set to integer count, animation will repeat the specified number of times.
+animation-iteration-count-006		animation-iteration-count - 0 (zero)	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count	649574f98923c8f0d9ba605ba4573596cc7c63aa	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	When animation-iteration-count is set to 0 (zero), no animation is seen.
+animation-iteration-count-007		animation-iteration-count - ::after	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count	053fffd162daaf0db34a1e25da133bd20cd01f3a	`Intel`<http://www.intel.com>	Check that animation-iteration-count applies to the ::after pseudo element.
+animation-iteration-count-008		animation-iteration-count - ::before	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count	3ae4c0e686fb5cf330151ee176b298cb51a77ef9	`Intel`<http://www.intel.com>	Check that animation-iteration-count applies to the ::before pseudo element.
+animation-iteration-event		animation events - animationiteration	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count,https://drafts.csswg.org/css-animations-1/#events	e521ed19e72a1757572ca7c324be4e288a5c33c6	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	Check that animationiteration event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.
+animation-keyframes-001		@keyframes - from, to, percentage	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#keyframes	dd13bbf052c41758c69fd457cda3747ad6a10fb2	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	Check that @keyframes rule accepts 'from' and 'to' keywords, and percentage values.
+animation-keyframes-002		@keyframes - negative percentage and higher than 100%	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#keyframes	91d4a884eb431ceb0c8636098d33a6d93a2c014e	`Intel`<http://www.intel.com>	Check that a keyframe selector specifies negative percentage values or values higher than 100%, the keyframe will be ignored.
+animation-keyframes-003		@keyframes - animation-timing-function	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#keyframes	d1768e205585cf4224307af0b7cee0cf72c01258	`Intel`<http://www.intel.com>	Check that @keyframes rule accpets 'animation-timing-function' property used as the animation moves to the next keyframe.
+animation-name-001		animation-name - blank value	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration	cb26f4c55e9f6b4c169dcb2e13f4378c5c7136f1	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	Check that animation-name is set without any value, there will be no animation.
+animation-name-002		animation-name matchs keyframes at-rule	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration	70bd1cb364ec82be357ee418cb344e10ea301376	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation, animation will execute.
+animation-name-003		animation-name - none	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration	8c98816bda0880f90a945cab8806e89fa6542d70	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	Check that animation-name is set to none, there will be no animation.
+animation-name-004		animation-name mismatches keyframe at-rule	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration	3cce09a98cd0cb9d7b3d101f608128e4a759bc79	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	Check that animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute.
+animation-name-005		animation-name - ::after	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration	9ef57c67ba391e1a00060db5eca52be5fc68c6f0	`Intel`<http://www.intel.com>	Check that animation-name applies to the ::after pseudo element.
+animation-name-006		animation-name - ::before	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration	af99446d3d688a8e6ad08caee199229327c2279a	`Intel`<http://www.intel.com>	Check that animation-name applies to the ::before pseudo element.
+animation-play-state-001		animation-play-state - paused	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-play-state	64af3a1bf0816b76b3ac6f15ad15e6cc6c7ccfb3	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	When animation-play-state is set to paused, animation is paused where the progress it had made before being paused.
+animation-play-state-002		animation-play-state - running	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-play-state	22aac25e6c5bc4fccf865d0843e7f97e05ff72e0	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	When animation-play-state is set to running, animation will proceed as normal.
+animation-play-state-003		animation-play-state - ::after	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-play-state	1dca5c63b44436557a976a9d2f26755fefb6ade5	`Intel`<http://www.intel.com>	Check that animation-play-state applies to the ::after pseudo element.
+animation-play-state-004		animation-play-state - ::before	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-play-state	5047e6044f322dd9211c9c3ffc4655b4d6c50540	`Intel`<http://www.intel.com>	Check that animation-play-state applies to the ::before pseudo element.
+animation-shorthand-001		animation shorthand	animated	https://drafts.csswg.org/css-animations-1/#animation	021fa6b8453b8e7c009ce8fea9853bc4a31bf762	`Intel`<http://www.intel.com>	Check that animation shorthand property accepts time values for animation-duration and animation-delay in order.
+animation-shorthand-002		animation shorthand - ::after	animated	https://drafts.csswg.org/css-animations-1/#animation	75ac427634fb58686568403ea3f5f91c6654ac95	`Intel`<http://www.intel.com>	Check that animation shorthand applies to the ::after pseudo element and accepts time values for animation-duration and animation-delay in order.
+animation-shorthand-003		animation shorthand - ::before	animated	https://drafts.csswg.org/css-animations-1/#animation	228b0f49702e90694efdca63112fe58f2d3efeff	`Intel`<http://www.intel.com>	Check that animation shorthand applies to the ::before pseudo element and accepts time values for animation-duration and animation-delay in order.
+animation-timing-function-001		animation-timing-function - cubic-bezier with parameters (0,0,1,1)	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function	f9aadf639f98f9795400a5218e8540c08366e8cd	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	When animation-timing-function is set to cubic-bezier with parameters (0,0,1,1), animation will progress over one cycle of its duration with constant speed.
+animation-timing-function-002		animation-timing-function - ease	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function	7527eff75562c5f49d9599e7495c47aa9bd9f414	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	Check that animation-timing-function is set to ease, animation will starts slow, gain acceleration in the middle and again slow down at the end.
+animation-timing-function-003		animation-timing-function - ease-in	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function	214819b56e1e46f9c7aa07d0ce144830ac65e924	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	Check that animation-timing-function is set to ease-in, animation will start slow, gain acceleration as time progresses.
+animation-timing-function-004		animation-timing-function - ease-in-out	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function	4064198bc4b46aaf5eb99144c7343655485b86a9	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	Check that animation-timing-function is set to ease-in-out, animation will start slow, gain acceleration in the middel and again slow down at the end.
+animation-timing-function-005		animation-timing-function - ease-out	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function	5a29c60d50b81071e5c7d9d5d75aacbf7fd56fe5	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	Check that animation-timing-function is set to ease-out, animation will start with higher (than the normal) speed and relatively slow down as time progresses.
+animation-timing-function-006		animation-timing-function - linear	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function	2bb42397e46fd890be8f37a020d4febef34c5b96	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	When animation-timing-function is set to linear, animation will progress over one cycle of its duration with constant speed.
+animation-timing-function-007		animation-timing-function - step-start	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode,https://drafts.csswg.org/css-animations-1/#animation-timing-function	ffbe76fc315f072878076a7bf711ac9a891eba52	`Intel`<http://www.intel.com>	When animation-timing-function is set to step-start, animation will play the end effect at the start of the interval.
+animation-timing-function-008		animation-timing-function - step-end	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function	4fbb8d08f0f4b411101c203fc66f72d222df7f44	`Intel`<http://www.intel.com>	When animation-timing-function is set to step-end, animation will play the end effect at the end time point, and keep the start effect at the start of the interval.
+animation-timing-function-009		animation-timing-function - steps with parameters (<number>, start)	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode,https://drafts.csswg.org/css-animations-1/#animation-timing-function	0c8dd1d5b92dfaeb20edb3ff4f3287bb06ecff30	`Intel`<http://www.intel.com>	When animation-timing-function is set to steps with paramenters (<number>, start), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the start of the interval.
+animation-timing-function-010		animation-timing-function - steps with parameters (<number>, end)	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode,https://drafts.csswg.org/css-animations-1/#animation-timing-function	da7e0cd2f6006255f27cbd3721e0040771631adb	`Intel`<http://www.intel.com>	When animation-timing-function is set to steps with paramenters (<number>, end), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the end of the interval.
+animation-timing-function-011		animation-timing-function - ::after	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function	bbc7283ae0b15aaa2ed784a7645b404a7fa301a5	`Intel`<http://www.intel.com>	Check that animation-timing-function applies to the ::after pseudo element.
+animation-timing-function-012		animation-timing-function - ::before	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function	d6a471751d34018dfc5e91a83592e896d8e6e5b5	`Intel`<http://www.intel.com>	Check that animation-timing-function applies to the ::before pseudo element.
+animationevent-interface		AnimationEvent interface	script	https://drafts.csswg.org/css-animations-1/#interface-dom	a1e39dcdabe246037312ac3a8bab7bf3fe904a79	`Intel`<http://www.intel.com>	
+animationevent-types		AnimationEvnt types - animationstart, animationend,animationiteration	script	https://drafts.csswg.org/css-animations-1/#event-animationevent	11cda4945e4216dee93775c6217d3ce303ea04a9	`Intel`<http://www.intel.com>	
 animations-001	reference/animations-001-ref	CSS Regions: animating content flowed into a region	ahem,animated	http://www.w3.org/TR/css3-regions/#the-flow-into-property,http://www.w3.org/TR/css3-regions/#the-flow-from-property,http://www.w3.org/TR/css-transforms-1/#transform-functions,http://www.w3.org/TR/css3-animations/#animations	58200be49397d3ebd75335737334fadb5f72043a	`Mihai Balan`<mailto:mibalan@adobe.com>	Test checks that content that has an animated 3D transform renders and animates when flowed in a region.
+animationstart-and-animationend-events		animation events - animationstart and animationend	animated	https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#events	8faa1d6d24026a7e26d4c00bc57b7f70d4042146	`Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com>	Check that animationstart event occurs at the start of an animation, animationend event occurs when animation finishes.
 css-filters-animation-blur	reference/css-filters-animation-blur-ref	CSS Filters Animation: Blur		http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-blur,http://www.w3.org/TR/css3-animations/#animations	53622387367e3daa90b9880e22ff9548665f4883	`Gunther Brunner`<mailto:takeshimiya@gmail.com>	The blue square should be 10px blurred
 css-filters-animation-brightness	reference/css-filters-animation-brightness-ref	CSS Filters Animation: Brightness		http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-brightness,http://www.w3.org/TR/css3-animations/#animations	6ef87e3d77b51aaa2d33c91de5b6c84e96b41eae	`Gunther Brunner`<mailto:takeshimiya@gmail.com>	The blue square should be dark blue
 css-filters-animation-combined-001	reference/css-filters-animation-combined-001-ref	CSS Filters Animation: Combined filters 001		http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-blur,http://www.w3.org/TR/filter-effects-1/#funcdef-brightness,http://www.w3.org/TR/filter-effects-1/#funcdef-sepia,http://www.w3.org/TR/filter-effects-1/#funcdef-grayscale,http://www.w3.org/TR/filter-effects-1/#funcdef-saturate,http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate,http://www.w3.org/TR/filter-effects-1/#funcdef-invert,http://www.w3.org/TR/filter-effects-1/#funcdef-opacity,http://www.w3.org/TR/css3-animations/#animations	aaaa710118343f2b999ebc2edcd0c2c7e18d1ffe	`Gunther Brunner`<mailto:takeshimiya@gmail.com>	The black square should be a gray square 10px blurred
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-delay-001.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-delay-001.xht
new file mode 100644
index 00000000000..d81c6e5fe4a
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-delay-001.xht
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-delay - negative value</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-03-18 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-delay is set to a negative time offset,
+                             animation will execute as soon as it is applied
+                             but act as if the animation had started the specified
+                             time in the past." name="assert" />
+<style>
+  div {
+    animation-timing-function: linear;
+
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  #test-negative-delay {
+    animation-name: test-negative-delay;
+    animation-duration: 10s;
+    animation-delay: -5s;
+
+    background-color: blue;
+  }
+
+  #ref-no-delay {
+    animation-name: ref-no-delay;
+    animation-duration: 5s;
+
+    background-color: yellow;
+  }
+
+  @keyframes test-negative-delay {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+
+  @keyframes ref-no-delay {
+    from {
+      left: 75px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there are a filled blue square with 'Filler Text'
+    and a filled yellow square with 'Filler Text', and if the two squares
+    start moving together from right to left as soon as the page loads.
+  </p>
+  <div id="test-negative-delay">Filler Text</div>
+  <div id="ref-no-delay">Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-delay-002.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-delay-002.xht
new file mode 100644
index 00000000000..bb3308d3d72
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-delay-002.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-delay - positive value</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-03-18 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-delay is set to a positive time offset,
+                             animation will delay execution by the specified offset value." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 5s;
+    animation-delay: 5s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left after about 5 seconds
+    from the time the page is loaded.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-delay-003.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-delay-003.xht
new file mode 100644
index 00000000000..3fd1059da6c
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-delay-003.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-delay - 0s</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-03-18 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-delay is set to 0s (zero seconds),
+                             animation will execute as soon as it is applied." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-delay: 0s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left as soon as the page loads.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-delay-004.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-delay-004.xht
new file mode 100644
index 00000000000..95187f66ef5
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-delay-004.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-delay - ::after</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-03-18 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-delay applies to the ::after pseudo element." name="assert" />
+<style>
+  div::after {
+    animation-name: sample;
+    animation-duration: 5s;
+    animation-delay: 5s;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left after about 5 seconds
+    from the time the page is loaded.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-delay-005.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-delay-005.xht
new file mode 100644
index 00000000000..53f9c7c5ac4
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-delay-005.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-delay - ::before</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-03-18 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-delay applies to the ::before pseudo element." name="assert" />
+<style>
+  div::before {
+    animation-name: sample;
+    animation-duration: 5s;
+    animation-delay: 5s;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left after about 5 seconds
+    from the time the page is loaded.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-delay-006.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-delay-006.xht
new file mode 100644
index 00000000000..24bf5eeaea3
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-delay-006.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-delay - initial keyword</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#values" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-delay property accepts 'initial' keyword." name="assert" />
+<style>
+  #contatiner {
+    animation-delay: 5s;
+  }
+
+  #test {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-delay: initial;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left upon page load and lasts for a span of 10 seconds.
+  </p>
+  <div id="container">
+    <div id="test">Filler Text</div>
+  </div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-delay-007.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-delay-007.xht
new file mode 100644
index 00000000000..d5ac4dbfaa9
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-delay-007.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-delay - inherit keyword</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#values" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-delay property accepts 'inherit' keyword." name="assert" />
+<style>
+  #container {
+    animation-delay: 5s;
+  }
+
+  #test {
+    animation-name: sample;
+    animation-duration: 5s;
+    animation-delay: inherit;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts staying left for about 5 seconds, and then moves
+    from right to left and lasts for a span of 5 seconds.
+  </p>
+  <div id="container">
+    <div id="test">Filler Text</div>
+  </div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-direction-001.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-direction-001.xht
new file mode 100644
index 00000000000..8071cc912cc
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-direction-001.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-direction - alternate</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-03-24 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-direction is set to alternate,
+                             animation cycle will iteration that are 
+                             odd counts are played in the normal direction,
+                             and the animation cycle iterations that are 
+                             even counts are played in a reverse direction." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-direction: alternate;
+    animation-iteration-count: infinite;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left on the page load,
+    and then moves from left to right. This cycle gets repeated.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-direction-002.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-direction-002.xht
new file mode 100644
index 00000000000..60bdf296de5
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-direction-002.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-direction - normal</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-03-24 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-direction is set to normal,
+                             all iterations of animation are played as specified." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-direction: normal;
+    animation-iteration-count: infinite;
+   
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled color square with 'Filler Text',
+    which starts moving from right to left, then back to right and moves from
+    right to left again. This cycle gets repeated.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-direction-003.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-direction-003.xht
new file mode 100644
index 00000000000..730aab48e5a
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-direction-003.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-direction - alternate-reverse</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-03-24 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-direction is set to alternate-reverse,
+                             the animation cycle iterations that are
+                             odd counts are played in the normal direction,
+                             and the animation cycle iterations that are
+                             even counts are played in a reverse direction." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-direction: alternate-reverse;
+    animation-iteration-count: infinite;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 0px;
+    }
+    to {
+      left: 150px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left on the page load,
+    and then moves from left to right. This cycle gets repeated.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-direction-004.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-direction-004.xht
new file mode 100644
index 00000000000..d49cca09de6
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-direction-004.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-direction - reverse</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-03-24 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-direction is set to reverse,
+                             all iterations of the animation are played in the reverse direction
+                             from the way they were specified." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-direction: reverse;
+    animation-iteration-count: infinite;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled color square with 'Filler Text',
+    which starts moving from left to right, then back to left again and moves from
+    left to right. This cycle gets repeated.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-direction-005.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-direction-005.xht
new file mode 100644
index 00000000000..0299eaba22a
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-direction-005.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-direction - ::after</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-03-24 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-direction applies to the ::after pseudo element." name="assert" />
+<style>
+  div::after {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-direction: alternate;
+    animation-iteration-count: infinite;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left on the page load,
+    and then moves from left to right. This cycle gets repeated.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-direction-006.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-direction-006.xht
new file mode 100644
index 00000000000..f28ce4e90eb
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-direction-006.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-direction - ::before</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-03-24 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-direction applies to the ::before pseudo element" name="assert" />
+<style>
+  div::before {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-direction: alternate;
+    animation-iteration-count: infinite;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left on the page load,
+    and then moves from left to right. This cycle gets repeated.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-display.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-display.xht
new file mode 100644
index 00000000000..32428689c76
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-display.xht
@@ -0,0 +1,52 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation - display</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animations" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that setting 'display' property to 'none' terminates
+                             running animation applied to the element, and updating 'display'
+                             property to a value other than 'none' will start the animation." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which moves from right to left twice.
+  </p>
+  <div>Filler Text</div>
+  <script>
+    var div = document.getElementsByTagName("div");
+    
+    setTimeout(function() {
+      div[0].style.display = "none";
+    }, 5000);
+
+    setTimeout(function() {
+      div[0].style.display = "block";
+    }, 8000);
+  </script>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-001.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-001.xht
new file mode 100644
index 00000000000..3de16c96e0c
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-001.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-duration - blank value</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-05 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-duration value is set blank, there will be no animation seen." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts staying left for about 2 seconds upon page load,
+    then moves from right to left.
+  </p>
+  <div>Filler Text</div>
+  <script>
+    var div = document.getElementsByTagName("div");
+    div[0].style.animationDuration = "";
+    setTimeout(setAnimationDuration, 2000);
+
+    function setAnimationDuration() {
+      div[0].style.animationDuration = "10s";
+    }
+  </script>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-002.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-002.xht
new file mode 100644
index 00000000000..db2bf745d95
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-002.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-duration - finite value</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-05 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-duration is set a finite time offset,
+                             animation takes the specifies time to complete one cycle." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left upon page load and lasts for a span of 10 seconds.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-003.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-003.xht
new file mode 100644
index 00000000000..a289569e0ad
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-003.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-duration - negative value</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-05 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-duration is set to a negative value,
+                             it is treated as 0s (zero seconds) and no animation is seen." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts staying left for about 2 seconds upon page load,
+    then moves from right to left.
+  </p>
+  <div>Filler Text</div>
+  <script>
+    var div = document.getElementsByTagName("div");
+    div[0].style.animationDuration = "-2s";
+    setTimeout(setAnimationDuration, 2000);
+
+    function setAnimationDuration() {
+      div[0].style.animationDuration = "10s";
+    }
+  </script>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-004.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-004.xht
new file mode 100644
index 00000000000..a30005e7567
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-004.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-duration - 0s</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-05 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-duration is set to 0s (zero seconds),
+                             animation occurs instantaneously, there will be no animation seen." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts staying left for about 2 seconds upon page load,
+    then moves from right to left.
+  </p>
+  <div>Filler Text</div>
+  <script>
+    var div = document.getElementsByTagName("div");
+    div[0].style.animationDuration = "0s";
+    setTimeout(setAnimationDuration, 2000);
+
+    function setAnimationDuration() {
+      div[0].style.animationDuration = "10s";
+    }
+  </script>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-005.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-005.xht
new file mode 100644
index 00000000000..445740155fb
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-005.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-duration - 0s, animation-fill-mode - forwards</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-05 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-duration is set to 0s (zero seconds),
+                             and 'animation-fill-mode' is set to 'forwards',
+                             the last frame of the animation will be displayed." name="assert" />
+<style>
+  div {
+    height: 100px;
+    width: 100px;
+    position: absolute;
+  }
+
+  #test {
+    animation-name: sample;
+    animation-duration: 0s;
+    animation-fill-mode: forwards;
+
+    background-color: blue;
+  }
+
+  #ref {
+    background-color: red;
+    left: 150px;
+  }
+
+  @keyframes sample {
+    from {
+      left: 0px;
+    }
+    to {
+      left: 150px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue with 'Filler Text',
+    and without animation, and if there is no red.
+  </p>
+  <div id="ref"></div>
+  <div id="test">Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-006.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-006.xht
new file mode 100644
index 00000000000..37b5bb5d2ba
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-006.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-duration - 0s, animation-fill-mode - both</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-05 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-duration is set to 0s (zero seconds),
+                             and 'animation-fill-mode' is set to 'both',
+                             the last frame of the animation will be displayed." name="assert" />
+<style>
+  div {
+    height: 100px;
+    width: 100px;
+    position: absolute;
+  }
+
+  #test {
+    animation-name: sample;
+    animation-duration: 0s;
+    animation-fill-mode: both;
+
+    background-color: blue;
+  }
+
+  #ref {
+    background-color: red;
+    left: 150px;
+  }
+
+  @keyframes sample {
+    from {
+      left: 0px;
+    }
+    to {
+      left: 150px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue with 'Filler Text',
+    and without animation, and if there is no red.
+  </p>
+  <div id="ref"></div>
+  <div id="test">Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-007.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-007.xht
new file mode 100644
index 00000000000..e6cf6ffc7de
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-007.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-duration - ::before</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-05 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-duration applies to the ::before pseudo element." name="assert" />
+<style>
+  div::before {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left upon page load and lasts for a span of 10 seconds.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-008.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-008.xht
new file mode 100644
index 00000000000..8c77e5c6410
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-008.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-duration - ::after</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-05 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-duration applies to the ::after pseudo element." name="assert" />
+<style>
+  div::after {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left upon page load and lasts for a span of 10 seconds.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-fill-mode-001.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-fill-mode-001.xht
new file mode 100644
index 00000000000..5dcec72e395
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-fill-mode-001.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-fill-mode - none</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-fill-mode is set to none,
+                             animation has no effect when it is applied but not executing." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 5s;
+    animation-fill-mode: none;
+    
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+  @keyframes sample {
+    from {
+      background-color: yellow;
+    }
+    to {
+      background-color: green;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled color square with 'Filler Text',
+    whose color gradually changes in the order:
+    YELLOW to GREEN to BLUE.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-fill-mode-002.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-fill-mode-002.xht
new file mode 100644
index 00000000000..5f690ecd584
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-fill-mode-002.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-fill-mode - forwards</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-fill-mode is set to forwards, 
+                             animation will apply the property values for the time the amination ended 
+                             after the animation ends." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 5s;
+    animation-fill-mode: forwards;
+    
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+  @keyframes sample {
+    from {
+      background-color: yellow;
+    }
+    to {
+      background-color: green;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled color square with 'Filler Text',
+    whose color gradually changes in the order:
+    YELLOW to GREEN.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-fill-mode-003.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-fill-mode-003.xht
new file mode 100644
index 00000000000..81a57768bf4
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-fill-mode-003.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-fill-mode - backwards</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-fill-mode is set to backwards,
+                             animation-delay is set a positive time offset,
+                             and animation-direction is 'normal' or 'alternate-reverse',
+                             animation will apply the from or 0% keyframe
+                             that will start the first iteration." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 5s;
+    animation-delay: 5s;
+    animation-fill-mode: backwards;
+    
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+  @keyframes sample {
+    from {
+      background-color: yellow;
+    }
+    to {
+      background-color: green;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled color square with 'Filler Text',
+    whose color gradually changes in the order:
+    YELLOW to GREEN to BLUE.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-fill-mode-004.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-fill-mode-004.xht
new file mode 100644
index 00000000000..b6afa979274
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-fill-mode-004.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-fill-mode - both</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check if animation-fill-mode is set to both,
+                             the effects of both 'forwards' and 'backwards' will apply." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 5s;
+    animation-delay: 5s;
+    animation-fill-mode: both;
+    
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+  @keyframes sample {
+    from {
+      background-color: yellow;
+    }
+    to {
+      background-color: green;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled color square with 'Filler Text',
+    whose color gradually changes in the order:
+    YELLOW to GREEN.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-fill-mode-005.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-fill-mode-005.xht
new file mode 100644
index 00000000000..84c15a6ea29
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-fill-mode-005.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-fill-mode - ::after</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-fill-mode applies to the ::after pseudo element." name="assert" />
+<style>
+  div::after {
+    animation-name: sample;
+    animation-duration: 5s;
+    animation-fill-mode: forwards;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+  @keyframes sample {
+    from {
+      background-color: yellow;
+    }
+    to {
+      background-color: green;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled color square with 'Filler Text',
+    whose color gradually changes in the order:
+    YELLOW to GREEN.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-fill-mode-006.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-fill-mode-006.xht
new file mode 100644
index 00000000000..3fa886422f7
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-fill-mode-006.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-fill-mode - ::before</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-fill-mode applies to the ::before pseudo element." name="assert" />
+<style>
+  div::before {
+    animation-name: sample;
+    animation-duration: 5s;
+    animation-fill-mode: forwards;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+  @keyframes sample {
+    from {
+      background-color: yellow;
+    }
+    to {
+      background-color: green;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled color square with 'Filler Text',
+    whose color gradually changes in the order:
+    YELLOW to GREEN.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-001.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-001.xht
new file mode 100644
index 00000000000..34159fb267b
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-001.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-iteration-count - default value</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-iteration-count is not set, 1 is taken by default and
+                             animation will play from beginning to end once." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left once.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-002.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-002.xht
new file mode 100644
index 00000000000..602465a4047
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-002.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-iteration-count - infinite value</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-iteration-count is set to infinite,
+                             animation will repeat forever." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-iteration-count: infinite;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled square with 'Filler Text',
+    which repeatedly moves from right to left. Every time a cycle is finished,
+    the square gets re-positioned to right and continues to move left.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-003.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-003.xht
new file mode 100644
index 00000000000..00be33729bc
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-003.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-iteration-count - negative value</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-iteration-count is set to negative count,
+                             it is invalid and animation will play from beginning to end once." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-iteration-count: -2;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left once.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-004.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-004.xht
new file mode 100644
index 00000000000..1639cbf58a1
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-004.xht
@@ -0,0 +1,52 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-iteration-count - non-integer value</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-iteration-count is set to non-integer,
+                             animation will end partway through its last cycle." name="assert" />
+<style>
+  #test-iteration-count {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-iteration-count: 2.1;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  #ref-path {
+    background-color: yellow;
+    height: 10px;
+    width: 250px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left along the yellow bar twice,
+    and for the third time it ends partway and then immediately positions
+    itself to the left.
+  </p>
+  <div id="test-iteration-count">Filler Text</div>
+  <div id="ref-path"></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-005.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-005.xht
new file mode 100644
index 00000000000..5e87e486c1c
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-005.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-iteration-count - integer value</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-iteration-count is set to integer count,
+                             animation will repeat the specified number of times." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-iteration-count: 2;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left twice.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-006.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-006.xht
new file mode 100644
index 00000000000..c333149edff
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-006.xht
@@ -0,0 +1,50 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-iteration-count - 0 (zero)</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-iteration-count is set to 0 (zero), no animation is seen." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts staying left for about 2 seconds upon page load,
+    then moves from right to left once.
+  </p>
+  <div>Filler Text</div>
+  <script>
+    var div = document.getElementsByTagName("div");
+    div[0].style.animationIterationCount = 0;
+    setTimeout(setAnimationDuration, 2000);
+
+    function setAnimationDuration() {
+      div[0].style.animationIterationCount = 1;
+    }
+  </script>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-007.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-007.xht
new file mode 100644
index 00000000000..71b2dcef1f1
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-007.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-iteration-count - ::after</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-iteration-count applies to the ::after pseudo element." name="assert" />
+<style>
+  div::after {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-iteration-count: 2;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left twice.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-008.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-008.xht
new file mode 100644
index 00000000000..af29fb5af2d
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-008.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-iteration-count - ::before</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-iteration-count applies to the ::before pseudo element." name="assert" />
+<style>
+  div::before  {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-iteration-count: 2;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left twice.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-event.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-event.xht
new file mode 100644
index 00000000000..2d4b6fcc1a8
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-event.xht
@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation events - animationiteration</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#events" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animationiteration event occurs at the end of
+                             each iteration of an animation for which animation-iteration-count
+                             is greater than one." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-iteration-count: 3;
+
+    color: yellow;
+    font-weight: bolder;
+    font-size: xx-large;
+    text-align: center;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square, which moves from right to left
+    three times; and if the square contains digit 1 for the first animation,
+    digit 2 for the second, and 3 for the third animation.
+  </p>
+  <div></div>
+  <script>
+    var count = 1;
+    var div = document.getElementsByTagName("div");
+    div[0].innerHTML = count;
+    div[0].addEventListener("animationiteration", animationIteration, true);
+
+    function animationIteration() {
+      count += 1;
+      div[0].innerHTML = count;
+    }
+  </script>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-keyframes-001.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-keyframes-001.xht
new file mode 100644
index 00000000000..4d4393209cf
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-keyframes-001.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: @keyframes - from, to, percentage</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#keyframes" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that @keyframes rule accepts 'from' and 'to'
+                             keywords, and percentage values." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+  }
+
+  @keyframes sample {
+    from {
+      background-color: blue;
+    }
+    30% {
+      background-color: green;
+    }
+    65% {
+      background-color: yellow;
+    }
+    to {
+      background-color: blue;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text'
+    initially on page load, and if the color of the square gradully changes
+    in order: BLUE to GREEN to YELLOW and back to BLUE in 10 seconds.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-keyframes-002.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-keyframes-002.xht
new file mode 100644
index 00000000000..6331851762d
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-keyframes-002.xht
@@ -0,0 +1,53 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: @keyframes - negative percentage and higher than 100%</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#keyframes" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that a keyframe selector specifies negative percentage values
+                             or values higher than 100%, the keyframe will be ignored." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+  }
+
+  @keyframes sample {
+    -100% {
+      background-color: red;
+    }
+    0% {
+      background-color: blue;
+    }
+    30% {
+      background-color: green;
+    }
+    65% {
+      background-color: yellow;
+    }
+    100% {
+      background-color: blue;
+    }
+    200% {
+      background-color: red;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text'
+    initially on page load, if the color of the square gradully changes
+    in order: BLUE to GREEN to YELLOW and back to BLUE in 10 seconds,
+    and if there is no red.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-keyframes-003.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-keyframes-003.xht
new file mode 100644
index 00000000000..d1de37974c0
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-keyframes-003.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: @keyframes - animation-timing-function</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#keyframes" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that @keyframes rule accpets 'animation-timing-function'
+                             property used as the animation moves to the next keyframe." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+      animation-timing-function: linear;
+    }
+    50% {
+      left: 75px;
+      animation-timing-function: linear;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left with constant speed.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-name-001.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-name-001.xht
new file mode 100644
index 00000000000..3f152b62bd4
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-name-001.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-name - blank value</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-name is set without any value,
+                             there will be no animation." name="assert" />
+<style>
+  div {
+    animation-name: ;
+    animation-duration: 8s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts staying left about 2 seconds, then moves from right to left.
+  </p>
+  <div>Filler Text</div>
+  <script>
+    setTimeout(setAnimationName, 2000);
+
+    function setAnimationName () {
+      var div = document.getElementsByTagName("div");
+      div[0].style.animationName = "sample";
+    }
+  </script>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-name-002.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-name-002.xht
new file mode 100644
index 00000000000..d513fd6f592
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-name-002.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-name matchs keyframes at-rule</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-name is set to refer to a keyframe at-rule
+                             that provides the property values for the animation,
+                             animation will execute." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left on the page load.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-name-003.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-name-003.xht
new file mode 100644
index 00000000000..2eae0b6c761
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-name-003.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-name - none</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-name is set to none, there will be no animation." name="assert" />
+<style>
+  div {
+    animation-name: none;
+    animation-duration: 8s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts staying left about 2 seconds, then moves from right to left.
+  </p>
+  <div>Filler Text</div>
+  <script>
+    setTimeout(setAnimationName, 2000);
+
+    function setAnimationName () {
+      var div = document.getElementsByTagName("div");
+      div[0].style.animationName = "sample";
+    }
+  </script>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-name-004.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-name-004.xht
new file mode 100644
index 00000000000..3d9cae340d2
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-name-004.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-name mismatches keyframe at-rule</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-name does not match any keyframe at-rule,
+                             there are no properties to be animated and animation will not execute." name="assert" />
+<style>
+  div {
+    animation-name: sample1;
+    animation-duration: 8s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts staying left about 2 seconds, then moves from right to left.
+  </p>
+  <div>Filler Text</div>
+  <script>
+    setTimeout(setAnimationName, 2000);
+
+    function setAnimationName () {
+      var div = document.getElementsByTagName("div");
+      div[0].style.animationName = "sample";
+    }
+  </script>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-name-005.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-name-005.xht
new file mode 100644
index 00000000000..4ad615e1093
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-name-005.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-name - ::after</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-name applies to the ::after pseudo element." name="assert" />
+<style>
+  div::after {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left on the page load.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-name-006.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-name-006.xht
new file mode 100644
index 00000000000..c005c7f22ba
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-name-006.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-name - ::before</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-name applies to the ::before pseudo element." name="assert" />
+<style>
+  div::before {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left on the page load.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-play-state-001.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-play-state-001.xht
new file mode 100644
index 00000000000..1d72b8a5d64
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-play-state-001.xht
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-play-state - paused</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-play-state" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-play-state is set to paused,
+                             animation is paused where the progress it had made
+                             before being paused." name="assert" />
+<style>
+  #test-animation-paused {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  #ref-path {
+    background-color: yellow;
+    height: 10px;
+    width: 250px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving right to left along the yellow bar, 
+    and pauses in the middle after about 2 seconds' animation.
+  </p>
+  <div id="test-animation-paused">Filler Text</div>
+  <div id="ref-path"></div>
+  <script>
+    setTimeout(setAnimationRunning, 2000);
+
+    function setAnimationRunning() {
+      var div = document.getElementsByTagName("div");
+      div[0].style.animationPlayState = "paused";
+    }
+  </script>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-play-state-002.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-play-state-002.xht
new file mode 100644
index 00000000000..b42d9095c78
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-play-state-002.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-play-state - running</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-play-state" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-play-state is set to running,
+                             animation will proceed as normal." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-play-state: running;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-play-state-003.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-play-state-003.xht
new file mode 100644
index 00000000000..a513f9a3d61
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-play-state-003.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-play-state - ::after</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-play-state" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-play-state applies to the ::after pseudo element." name="assert" />
+<style>
+  div::after {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-play-state: running;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-play-state-004.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-play-state-004.xht
new file mode 100644
index 00000000000..a18df10c37e
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-play-state-004.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-play-state - ::before</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-play-state" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-play-state applies to the ::before pseudo element." name="assert" />
+<style>
+  div::before {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-play-state: running;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-shorthand-001.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-shorthand-001.xht
new file mode 100644
index 00000000000..289c6203063
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-shorthand-001.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation shorthand</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation shorthand property accepts time
+                             values for animation-duration and animation-delay in order." name="assert" />
+<style>
+  div {
+    animation: 10s 2s sample;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts staying left about 2 seconds, and then moves from right to left
+    and lasts for a span of 10 seconds.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-shorthand-002.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-shorthand-002.xht
new file mode 100644
index 00000000000..ac157ab9de4
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-shorthand-002.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation shorthand - ::after</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation shorthand applies to the ::after pseudo element
+                             and accepts time values for animation-duration and animation-delay
+                             in order." name="assert" />
+<style>
+  div::after {
+    animation: 10s 2s sample;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts staying left about 2 seconds, and then moves from right to left
+    and lasts for a span of 10 seconds.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-shorthand-003.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-shorthand-003.xht
new file mode 100644
index 00000000000..44e20bd68ef
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-shorthand-003.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation shorthand - ::before</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation shorthand applies to the ::before pseudo element
+                             and accepts time values for animation-duration and animation-delay
+                             in order." name="assert" />
+<style>
+  div::before {
+    animation: 10s 2s sample;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts staying left about 2 seconds, and then moves from right to left
+    and lasts for a span of 10 seconds.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-001.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-001.xht
new file mode 100644
index 00000000000..43817e6f6c8
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-001.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-timing-function - cubic-bezier with parameters (0,0,1,1)</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-timing-function is set to cubic-bezier
+                             with parameters (0,0,1,1), animation will progress over one cycle
+                             of its duration with constant speed." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-timing-function: cubic-bezier(0,0,1,1);
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left with constant speed.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-002.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-002.xht
new file mode 100644
index 00000000000..607b234d16b
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-002.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-timing-function - ease</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-timing-function is set to ease,
+                             animation will starts slow, gain acceleration in the middle
+                             and again slow down at the end." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-timing-function: ease;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left; initially the animation starts slow,
+    gains acceleration in the middle and again slows down at the end.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-003.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-003.xht
new file mode 100644
index 00000000000..ecc5f4d9e4e
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-003.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-timing-function - ease-in</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-timing-function is set to ease-in,
+                             animation will start slow, gain acceleration as time progresses." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-timing-function: ease-in;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left; animation starts slow
+    and gains acceleration as time progresses.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-004.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-004.xht
new file mode 100644
index 00000000000..467db8e5cb4
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-004.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-timing-function - ease-in-out</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-timing-function is set to ease-in-out,
+                             animation will start slow, gain acceleration in the middel 
+                             and again slow down at the end." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-timing-function: ease-in-out;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left; initially the animation starts slow,
+    gains acceleration in the middle and again slows down at the end.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-005.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-005.xht
new file mode 100644
index 00000000000..f1d2cf76dda
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-005.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-timing-function - ease-out</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-timing-function is set to ease-out,
+                             animation will start with higher (than the normal) speed 
+                             and relatively slow down as time progresses." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-timing-function: ease-out;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left; animation starts and relatively 
+    slows down as time progresses.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-006.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-006.xht
new file mode 100644
index 00000000000..a328b4cba3d
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-006.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-timing-function - linear</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-timing-function is set to linear, 
+                             animation will progress over one cycle of its duration 
+                             with constant speed." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-timing-function: linear;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which starts moving from right to left with constant speed.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-007.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-007.xht
new file mode 100644
index 00000000000..3da1168e611
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-007.xht
@@ -0,0 +1,52 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-timing-function - step-start</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-timing-function is set to step-start,
+                             animation will play the end effect at the start of the interval." name="assert" />
+<style>
+  div {
+    height: 100px;
+    width: 100px;
+    position: absolute;
+  }
+
+  #test-step-start {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-fill-mode: forwards;
+    animation-timing-function: step-start;
+
+    background-color: blue;
+  }
+
+  #ref-no-animation {
+    background-color: red;
+    left: 150px;
+  }
+
+  @keyframes sample {
+    from {
+      left: 0px;
+    }
+    to {
+      left: 150px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which stays right, and if there is NO red.
+  </p>
+  <div id="ref-no-animation"></div>
+  <div id="test-step-start">Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-008.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-008.xht
new file mode 100644
index 00000000000..486b1d20d37
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-008.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-timing-function - step-end</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-timing-function is set to step-end,
+                             animation will play the end effect at the end time point,
+                             and keep the start effect at the start of the interval." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-timing-function: step-end;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled square with 'Filler Text',
+    which stays right for about 10 seconds, and then jumps to left.
+  </p>
+  <div>Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-009.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-009.xht
new file mode 100644
index 00000000000..2e232d57e7e
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-009.xht
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-timing-function - steps with parameters (&lt;number&gt;, start)</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-timing-function is set to steps with paramenters
+                             (&lt;number>, start), animation will be defined by the number that divides
+                             the domain of operation into equally size intervals, evey time the changes
+                             happens at the start of the interval." name="assert" />
+<style>
+  div {
+    float: left;
+    height: 100px;
+    width: 100px;
+    position: absolute;
+  }
+
+  #test-step-start {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-fill-mode: forwards;
+    animation-timing-function: steps(4, start);
+
+    background-color: blue;
+  }
+
+  #ref-1 {
+    background-color: yellow;
+    left: 200px;
+  }
+
+  #ref-2 {
+    background-color: green;
+    left: 100px;
+  }
+
+  #ref-3 {
+    background-color: red;
+    left: 0px;
+  }
+
+  @keyframes sample {
+    from {
+      left: 400px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there are a filled square with 'Filler Text',
+    which jumps three times from right to left and orderly covers
+    the filled YELLOW, GREEN and RED squares.
+  </p>
+  <div id="ref-1"></div>
+  <div id="ref-2"></div>
+  <div id="ref-3"></div>
+  <div id="test-step-start">Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-010.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-010.xht
new file mode 100644
index 00000000000..b1eff972801
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-010.xht
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-timing-function - steps with parameters (&lt;number&gt;, end)</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="When animation-timing-function is set to steps with paramenters
+                             (&lt;number>, end), animation will be defined by the number that divides
+                             the domain of operation into equally size intervals, evey time the changes
+                             happens at the end of the interval." name="assert" />
+<style>
+  div {
+    float: left;
+    height: 100px;
+    width: 100px;
+    position: absolute;
+  }
+
+  #test-step-end {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-fill-mode: forwards;
+    animation-timing-function: steps(3, end);
+
+    background-color: blue;
+  }
+
+  #ref-1 {
+    background-color: yellow;
+    left: 200px;
+  }
+
+  #ref-2 {
+    background-color: green;
+    left: 100px;
+  }
+
+  #ref-3 {
+    background-color: red;
+    left: 0px;
+  }
+
+  @keyframes sample {
+    from {
+      left: 300px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there are a filled square with 'Filler Text',
+    which jumps three times from right to left and orderly covers
+    the filled YELLOW, GREEN and RED squares.
+  </p>
+  <div id="ref-1"></div>
+  <div id="ref-2"></div>
+  <div id="ref-3"></div>
+  <div id="test-step-end">Filler Text</div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-011.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-011.xht
new file mode 100644
index 00000000000..301aad95e41
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-011.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-timing-function - ::after</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-timing-function applies to the ::after pseudo element." name="assert" />
+<style>
+  div::after {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-timing-function: linear;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which moves from right to left with constant speed.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-012.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-012.xht
new file mode 100644
index 00000000000..76707b854a1
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-012.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation-timing-function - ::before</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-07 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animation-timing-function applies to the ::before pseudo element." name="assert" />
+<style>
+  div::before {
+    animation-name: sample;
+    animation-duration: 10s;
+    animation-timing-function: linear;
+
+    background-color: blue;
+    content: "Filler Text";
+    display: block;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square with 'Filler Text',
+    which moves from right to left with constant speed.
+  </p>
+  <div></div>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animationevent-interface.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animationevent-interface.xht
new file mode 100644
index 00000000000..3ce65c959b3
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animationevent-interface.xht
@@ -0,0 +1,11 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: AnimationEvent interface</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="https://drafts.csswg.org/css-animations-1/#interface-dom" rel="help" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="animationevent-interface.js"></script>
+</head><body><div id="log"></div>
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animationevent-types.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animationevent-types.xht
new file mode 100644
index 00000000000..92d26df67e2
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animationevent-types.xht
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<meta content="long" name="timeout" />
+<title>CSS Animations Test: AnimationEvnt types - animationstart, animationend,animationiteration</title>
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="https://drafts.csswg.org/css-animations-1/#event-animationevent" rel="help" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #test {
+    animation-name: sample;
+    animation-duration: 2s;
+    animation-delay: -1s;
+    animation-iteration-count: 2;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body><div id="test">Filler Text</div>
+<div id="log"></div>
+<script>
+  var testDiv = document.getElementById("test");
+
+  async_test(function(t) {
+    testDiv.addEventListener("animationstart", t.step_func(function(evt) {
+      assert_true(evt instanceof window.AnimationEvent);
+
+      assert_idl_attribute(evt, "animationName", "animationstart has animationName property");
+      assert_idl_attribute(evt, "elapsedTime", "animationstart has elapsedTime property");
+
+      assert_equals(evt.animationName, "sample", "animationstart has animationName value");
+      assert_equals(evt.elapsedTime, 1, "animationstart has elapsedTime value");
+
+      t.done();
+    }), true);
+  }, "animationstart event is instanceof AnimationEvent");
+
+  async_test(function(t) {
+    testDiv.addEventListener("animationend", t.step_func(function(evt) {
+      assert_true(evt instanceof window.AnimationEvent);
+
+      assert_idl_attribute(evt, "animationName", "animationend has animationName property");
+      assert_idl_attribute(evt, "elapsedTime", "animationend has elapsedTime property");
+
+      assert_equals(evt.animationName, "sample", "animationend has animationName value");
+      assert_equals(evt.elapsedTime, 4, "animationend has elapsedTime value");
+
+      t.done();
+    }), true);
+  }, "animationend event is instanceof AnimationEvent");
+
+  async_test(function(t) {
+    testDiv.addEventListener("animationiteration", t.step_func(function(evt) {
+      assert_true(evt instanceof window.AnimationEvent);
+
+      assert_idl_attribute(evt, "animationName", "animationiteration has animationName property");
+      assert_idl_attribute(evt, "elapsedTime", "animationiteration has elapsedTime property");
+
+      assert_equals(evt.animationName, "sample", "animationiteration has animationName value");
+      assert_equals(evt.elapsedTime, 2, "animationiteration has elapsedTime value");
+
+      t.done();
+    }), true);
+  }, "animationiteration event is instanceof AnimationEvent");
+</script>
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animationstart-and-animationend-events.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animationstart-and-animationend-events.xht
new file mode 100644
index 00000000000..79a57681c4c
--- /dev/null
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/animationstart-and-animationend-events.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Animations Test: animation events - animationstart and animationend</title>
+<link href="http://www.nokia.com" rel="author" title="Nokia Inc." />
+<link href="http://www.intel.com" rel="author" title="Intel" />
+<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang" /> <!-- 2015-05-06 -->
+<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
+<link href="https://drafts.csswg.org/css-animations-1/#events" rel="help" />
+<meta content="animated" name="flags" />
+<meta content="Check that animationstart event occurs at the start of an animation,
+                             animationend event occurs when animation finishes." name="assert" />
+<style>
+  div {
+    animation-name: sample;
+    animation-duration: 10s;
+
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    position: relative;
+  }
+
+  @keyframes sample {
+    from {
+      left: 150px;
+    }
+    to {
+      left: 0px;
+    }
+  }
+</style>
+</head><body>
+  <p>
+    Test passes if there is a filled blue square,
+    which moves from right to left with text 'START'
+    and changes to 'END' when the animation is finished.
+  </p>
+  <div>Filler Text</div>
+  <script>
+    var div = document.getElementsByTagName("div");
+    div[0].addEventListener("animationstart", animationStart, true);
+    div[0].addEventListener("animationend", animationEnd, true);
+
+    function animationStart() {
+      div[0].innerHTML = "START";
+    }
+
+    function animationEnd() {
+      div[0].innerHTML = "END";
+    }
+  </script>
+
+
+</body></html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/chapter-2.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/chapter-2.xht
index 15d2c337df8..b7d473c3e6f 100644
--- a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/chapter-2.xht
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/chapter-2.xht
@@ -13,7 +13,7 @@
  <body>
 
   <h1>CSS Animations Module Level 1 CR Test Suite</h1>
-  <h2>Values (0 tests)</h2>
+  <h2>Values (2 tests)</h2>
   <table width="100%">
     <col id="test-column"></col>
     <col id="refs-column"></col>
@@ -31,7 +31,29 @@
       <tr><th colspan="4" scope="rowgroup">
         <a href="#s2">+</a>
         <a href="http://www.w3.org/TR/css3-animations/#values">2 Values</a></th></tr>
-      <!-- 0 tests -->
+      <!-- 2 tests -->
+      <tr id="animation-delay-006-2" class="animated">
+        <td>
+            <a href="animation-delay-006.xht">animation-delay-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - initial keyword
+          <ul class="assert">
+            <li>Check that animation-delay property accepts 'initial' keyword.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-007-2" class="animated">
+        <td>
+            <a href="animation-delay-007.xht">animation-delay-007</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - inherit keyword
+          <ul class="assert">
+            <li>Check that animation-delay property accepts 'inherit' keyword.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
   </table>
 
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/chapter-3.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/chapter-3.xht
index 94eac47263a..05f6c7b5c3e 100644
--- a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/chapter-3.xht
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/chapter-3.xht
@@ -13,7 +13,7 @@
  <body>
 
   <h1>CSS Animations Module Level 1 CR Test Suite</h1>
-  <h2>Animations (15 tests)</h2>
+  <h2>Animations (16 tests)</h2>
   <table width="100%">
     <col id="test-column"></col>
     <col id="refs-column"></col>
@@ -31,7 +31,18 @@
       <tr><th colspan="4" scope="rowgroup">
         <a href="#s3">+</a>
         <a href="http://www.w3.org/TR/css3-animations/#animations">3 Animations</a></th></tr>
-      <!-- 15 tests -->
+      <!-- 16 tests -->
+      <tr id="animation-display-3" class="animated">
+        <td>
+            <a href="animation-display.xht">animation-display</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation - display
+          <ul class="assert">
+            <li>Check that setting 'display' property to 'none' terminates running animation applied to the element, and updating 'display' property to a value other than 'none' will start the animation.</li>
+          </ul>
+        </td>
+      </tr>
       <tr id="animations-001-3" class="ahem animated">
         <td>
             <a href="animations-001.xht">animations-001</a></td>
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/chapter-4.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/chapter-4.xht
index b3bbc53924f..2aadd179a6b 100644
--- a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/chapter-4.xht
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/chapter-4.xht
@@ -13,7 +13,7 @@
  <body>
 
   <h1>CSS Animations Module Level 1 CR Test Suite</h1>
-  <h2>Keyframes (0 tests)</h2>
+  <h2>Keyframes (66 tests)</h2>
   <table width="100%">
     <col id="test-column"></col>
     <col id="refs-column"></col>
@@ -31,7 +31,40 @@
       <tr><th colspan="4" scope="rowgroup">
         <a href="#s4">+</a>
         <a href="http://www.w3.org/TR/css3-animations/#keyframes">4 Keyframes</a></th></tr>
-      <!-- 0 tests -->
+      <!-- 3 tests -->
+      <tr id="animation-keyframes-001-4" class="animated">
+        <td>
+            <a href="animation-keyframes-001.xht">animation-keyframes-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>@keyframes - from, to, percentage
+          <ul class="assert">
+            <li>Check that @keyframes rule accepts 'from' and 'to' keywords, and percentage values.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-keyframes-002-4" class="animated">
+        <td>
+            <a href="animation-keyframes-002.xht">animation-keyframes-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>@keyframes - negative percentage and higher than 100%
+          <ul class="assert">
+            <li>Check that a keyframe selector specifies negative percentage values or values higher than 100%, the keyframe will be ignored.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-keyframes-003-4" class="animated">
+        <td>
+            <a href="animation-keyframes-003.xht">animation-keyframes-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>@keyframes - animation-timing-function
+          <ul class="assert">
+            <li>Check that @keyframes rule accpets 'animation-timing-function' property used as the animation moves to the next keyframe.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s4.#keyframe-declaration-block">
       <!-- 0 tests -->
@@ -52,7 +85,700 @@
       <!-- 0 tests -->
     </tbody>
     <tbody id="s4.2.#animation-name">
-      <!-- 0 tests -->
+      <!-- 63 tests -->
+      <tr id="animation-delay-001-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-delay-001.xht">animation-delay-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - negative value
+          <ul class="assert">
+            <li>When animation-delay is set to a negative time offset, animation will execute as soon as it is applied but act as if the animation had started the specified time in the past.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-002-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-delay-002.xht">animation-delay-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - positive value
+          <ul class="assert">
+            <li>When animation-delay is set to a positive time offset, animation will delay execution by the specified offset value.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-003-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-delay-003.xht">animation-delay-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - 0s
+          <ul class="assert">
+            <li>When animation-delay is set to 0s (zero seconds), animation will execute as soon as it is applied.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-004-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-delay-004.xht">animation-delay-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - ::after
+          <ul class="assert">
+            <li>Check that animation-delay applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-005-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-delay-005.xht">animation-delay-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - ::before
+          <ul class="assert">
+            <li>Check that animation-delay applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-006-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-delay-006.xht">animation-delay-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - initial keyword
+          <ul class="assert">
+            <li>Check that animation-delay property accepts 'initial' keyword.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-007-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-delay-007.xht">animation-delay-007</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - inherit keyword
+          <ul class="assert">
+            <li>Check that animation-delay property accepts 'inherit' keyword.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-001-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-direction-001.xht">animation-direction-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - alternate
+          <ul class="assert">
+            <li>When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-002-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-direction-002.xht">animation-direction-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - normal
+          <ul class="assert">
+            <li>When animation-direction is set to normal, all iterations of animation are played as specified.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-003-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-direction-003.xht">animation-direction-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - alternate-reverse
+          <ul class="assert">
+            <li>When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-004-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-direction-004.xht">animation-direction-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - reverse
+          <ul class="assert">
+            <li>When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-005-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-direction-005.xht">animation-direction-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - ::after
+          <ul class="assert">
+            <li>Check that animation-direction applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-006-4.2.#animation-name" class="animated">
+        <td>
+            <a href="animation-direction-006.xht">animation-direction-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - ::before
+          <ul class="assert">
+            <li>Check that animation-direction applies to the ::before pseudo element</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-display-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-display.xht">animation-display</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation - display
+          <ul class="assert">
+            <li>Check that setting 'display' property to 'none' terminates running animation applied to the element, and updating 'display' property to a value other than 'none' will start the animation.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-001-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-duration-001.xht">animation-duration-001</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - blank value
+          <ul class="assert">
+            <li>When animation-duration value is set blank, there will be no animation seen.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-002-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-duration-002.xht">animation-duration-002</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - finite value
+          <ul class="assert">
+            <li>When animation-duration is set a finite time offset, animation takes the specifies time to complete one cycle.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-003-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-duration-003.xht">animation-duration-003</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - negative value
+          <ul class="assert">
+            <li>When animation-duration is set to a negative value, it is treated as 0s (zero seconds) and no animation is seen.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-004-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-duration-004.xht">animation-duration-004</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - 0s
+          <ul class="assert">
+            <li>When animation-duration is set to 0s (zero seconds), animation occurs instantaneously, there will be no animation seen.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-005-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-duration-005.xht">animation-duration-005</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - 0s, animation-fill-mode - forwards
+          <ul class="assert">
+            <li>When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'forwards', the last frame of the animation will be displayed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-006-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-duration-006.xht">animation-duration-006</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - 0s, animation-fill-mode - both
+          <ul class="assert">
+            <li>When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'both', the last frame of the animation will be displayed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-007-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-duration-007.xht">animation-duration-007</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - ::before
+          <ul class="assert">
+            <li>Check that animation-duration applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-008-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-duration-008.xht">animation-duration-008</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - ::after
+          <ul class="assert">
+            <li>Check that animation-duration applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-001-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-fill-mode-001.xht">animation-fill-mode-001</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - none
+          <ul class="assert">
+            <li>When animation-fill-mode is set to none, animation has no effect when it is applied but not executing.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-002-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-fill-mode-002.xht">animation-fill-mode-002</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - forwards
+          <ul class="assert">
+            <li>When animation-fill-mode is set to forwards, animation will apply the property values for the time the amination ended after the animation ends.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-003-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-fill-mode-003.xht">animation-fill-mode-003</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - backwards
+          <ul class="assert">
+            <li>When animation-fill-mode is set to backwards, animation-delay is set a positive time offset, and animation-direction is 'normal' or 'alternate-reverse', animation will apply the from or 0% keyframe that will start the first iteration.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-004-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-fill-mode-004.xht">animation-fill-mode-004</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - both
+          <ul class="assert">
+            <li>Check if animation-fill-mode is set to both, the effects of both 'forwards' and 'backwards' will apply.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-005-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-fill-mode-005.xht">animation-fill-mode-005</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - ::after
+          <ul class="assert">
+            <li>Check that animation-fill-mode applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-006-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-fill-mode-006.xht">animation-fill-mode-006</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - ::before
+          <ul class="assert">
+            <li>Check that animation-fill-mode applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-001-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-iteration-count-001.xht">animation-iteration-count-001</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - default value
+          <ul class="assert">
+            <li>When animation-iteration-count is not set, 1 is taken by default and animation will play from beginning to end once.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-002-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-iteration-count-002.xht">animation-iteration-count-002</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - infinite value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to infinite, animation will repeat forever.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-003-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-iteration-count-003.xht">animation-iteration-count-003</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - negative value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to negative count, it is invalid and animation will play from beginning to end once.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-004-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-iteration-count-004.xht">animation-iteration-count-004</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - non-integer value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to non-integer, animation will end partway through its last cycle.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-005-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-iteration-count-005.xht">animation-iteration-count-005</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - integer value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to integer count, animation will repeat the specified number of times.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-006-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-iteration-count-006.xht">animation-iteration-count-006</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - 0 (zero)
+          <ul class="assert">
+            <li>When animation-iteration-count is set to 0 (zero), no animation is seen.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-007-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-iteration-count-007.xht">animation-iteration-count-007</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - ::after
+          <ul class="assert">
+            <li>Check that animation-iteration-count applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-008-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-iteration-count-008.xht">animation-iteration-count-008</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - ::before
+          <ul class="assert">
+            <li>Check that animation-iteration-count applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-event-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-iteration-event.xht">animation-iteration-event</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation events - animationiteration
+          <ul class="assert">
+            <li>Check that animationiteration event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-keyframes-001-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-keyframes-001.xht">animation-keyframes-001</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>@keyframes - from, to, percentage
+          <ul class="assert">
+            <li>Check that @keyframes rule accepts 'from' and 'to' keywords, and percentage values.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-keyframes-002-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-keyframes-002.xht">animation-keyframes-002</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>@keyframes - negative percentage and higher than 100%
+          <ul class="assert">
+            <li>Check that a keyframe selector specifies negative percentage values or values higher than 100%, the keyframe will be ignored.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-keyframes-003-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-keyframes-003.xht">animation-keyframes-003</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>@keyframes - animation-timing-function
+          <ul class="assert">
+            <li>Check that @keyframes rule accpets 'animation-timing-function' property used as the animation moves to the next keyframe.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-001-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-name-001.xht">animation-name-001</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name - blank value
+          <ul class="assert">
+            <li>Check that animation-name is set without any value, there will be no animation.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-002-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-name-002.xht">animation-name-002</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name matchs keyframes at-rule
+          <ul class="assert">
+            <li>When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation, animation will execute.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-003-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-name-003.xht">animation-name-003</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name - none
+          <ul class="assert">
+            <li>Check that animation-name is set to none, there will be no animation.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-004-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-name-004.xht">animation-name-004</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name mismatches keyframe at-rule
+          <ul class="assert">
+            <li>Check that animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-005-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-name-005.xht">animation-name-005</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name - ::after
+          <ul class="assert">
+            <li>Check that animation-name applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-006-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-name-006.xht">animation-name-006</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name - ::before
+          <ul class="assert">
+            <li>Check that animation-name applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-play-state-001-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-play-state-001.xht">animation-play-state-001</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - paused
+          <ul class="assert">
+            <li>When animation-play-state is set to paused, animation is paused where the progress it had made before being paused.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-play-state-002-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-play-state-002.xht">animation-play-state-002</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - running
+          <ul class="assert">
+            <li>When animation-play-state is set to running, animation will proceed as normal.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-play-state-003-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-play-state-003.xht">animation-play-state-003</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - ::after
+          <ul class="assert">
+            <li>Check that animation-play-state applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-play-state-004-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-play-state-004.xht">animation-play-state-004</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - ::before
+          <ul class="assert">
+            <li>Check that animation-play-state applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-001-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-001.xht">animation-timing-function-001</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - cubic-bezier with parameters (0,0,1,1)
+          <ul class="assert">
+            <li>When animation-timing-function is set to cubic-bezier with parameters (0,0,1,1), animation will progress over one cycle of its duration with constant speed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-002-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-002.xht">animation-timing-function-002</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease, animation will starts slow, gain acceleration in the middle and again slow down at the end.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-003-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-003.xht">animation-timing-function-003</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease-in
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease-in, animation will start slow, gain acceleration as time progresses.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-004-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-004.xht">animation-timing-function-004</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease-in-out
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease-in-out, animation will start slow, gain acceleration in the middel and again slow down at the end.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-005-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-005.xht">animation-timing-function-005</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease-out
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease-out, animation will start with higher (than the normal) speed and relatively slow down as time progresses.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-006-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-006.xht">animation-timing-function-006</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - linear
+          <ul class="assert">
+            <li>When animation-timing-function is set to linear, animation will progress over one cycle of its duration with constant speed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-007-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-007.xht">animation-timing-function-007</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - step-start
+          <ul class="assert">
+            <li>When animation-timing-function is set to step-start, animation will play the end effect at the start of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-008-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-008.xht">animation-timing-function-008</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - step-end
+          <ul class="assert">
+            <li>When animation-timing-function is set to step-end, animation will play the end effect at the end time point, and keep the start effect at the start of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-009-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-009.xht">animation-timing-function-009</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - steps with parameters (&lt;number&gt;, start)
+          <ul class="assert">
+            <li>When animation-timing-function is set to steps with paramenters (&lt;number&gt;, start), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the start of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-010-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-010.xht">animation-timing-function-010</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - steps with parameters (&lt;number&gt;, end)
+          <ul class="assert">
+            <li>When animation-timing-function is set to steps with paramenters (&lt;number&gt;, end), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the end of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-011-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-011.xht">animation-timing-function-011</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ::after
+          <ul class="assert">
+            <li>Check that animation-timing-function applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-012-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animation-timing-function-012.xht">animation-timing-function-012</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ::before
+          <ul class="assert">
+            <li>Check that animation-timing-function applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animationstart-and-animationend-events-4.2.#animation-name" class="primary animated">
+        <td><strong>
+            <a href="animationstart-and-animationend-events.xht">animationstart-and-animationend-events</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation events - animationstart and animationend
+          <ul class="assert">
+            <li>Check that animationstart event occurs at the start of an animation, animationend event occurs when animation finishes.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s4.2.#list-matching">
       <!-- 0 tests -->
@@ -67,7 +793,700 @@
       <!-- 0 tests -->
     </tbody>
     <tbody id="s4.3.#animation-duration">
-      <!-- 0 tests -->
+      <!-- 63 tests -->
+      <tr id="animation-delay-001-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-delay-001.xht">animation-delay-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - negative value
+          <ul class="assert">
+            <li>When animation-delay is set to a negative time offset, animation will execute as soon as it is applied but act as if the animation had started the specified time in the past.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-002-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-delay-002.xht">animation-delay-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - positive value
+          <ul class="assert">
+            <li>When animation-delay is set to a positive time offset, animation will delay execution by the specified offset value.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-003-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-delay-003.xht">animation-delay-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - 0s
+          <ul class="assert">
+            <li>When animation-delay is set to 0s (zero seconds), animation will execute as soon as it is applied.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-004-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-delay-004.xht">animation-delay-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - ::after
+          <ul class="assert">
+            <li>Check that animation-delay applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-005-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-delay-005.xht">animation-delay-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - ::before
+          <ul class="assert">
+            <li>Check that animation-delay applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-006-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-delay-006.xht">animation-delay-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - initial keyword
+          <ul class="assert">
+            <li>Check that animation-delay property accepts 'initial' keyword.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-007-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-delay-007.xht">animation-delay-007</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - inherit keyword
+          <ul class="assert">
+            <li>Check that animation-delay property accepts 'inherit' keyword.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-001-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-direction-001.xht">animation-direction-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - alternate
+          <ul class="assert">
+            <li>When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-002-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-direction-002.xht">animation-direction-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - normal
+          <ul class="assert">
+            <li>When animation-direction is set to normal, all iterations of animation are played as specified.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-003-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-direction-003.xht">animation-direction-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - alternate-reverse
+          <ul class="assert">
+            <li>When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-004-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-direction-004.xht">animation-direction-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - reverse
+          <ul class="assert">
+            <li>When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-005-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-direction-005.xht">animation-direction-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - ::after
+          <ul class="assert">
+            <li>Check that animation-direction applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-006-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-direction-006.xht">animation-direction-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - ::before
+          <ul class="assert">
+            <li>Check that animation-direction applies to the ::before pseudo element</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-display-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-display.xht">animation-display</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation - display
+          <ul class="assert">
+            <li>Check that setting 'display' property to 'none' terminates running animation applied to the element, and updating 'display' property to a value other than 'none' will start the animation.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-001-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-duration-001.xht">animation-duration-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - blank value
+          <ul class="assert">
+            <li>When animation-duration value is set blank, there will be no animation seen.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-002-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-duration-002.xht">animation-duration-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - finite value
+          <ul class="assert">
+            <li>When animation-duration is set a finite time offset, animation takes the specifies time to complete one cycle.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-003-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-duration-003.xht">animation-duration-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - negative value
+          <ul class="assert">
+            <li>When animation-duration is set to a negative value, it is treated as 0s (zero seconds) and no animation is seen.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-004-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-duration-004.xht">animation-duration-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - 0s
+          <ul class="assert">
+            <li>When animation-duration is set to 0s (zero seconds), animation occurs instantaneously, there will be no animation seen.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-005-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-duration-005.xht">animation-duration-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - 0s, animation-fill-mode - forwards
+          <ul class="assert">
+            <li>When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'forwards', the last frame of the animation will be displayed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-006-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-duration-006.xht">animation-duration-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - 0s, animation-fill-mode - both
+          <ul class="assert">
+            <li>When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'both', the last frame of the animation will be displayed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-007-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-duration-007.xht">animation-duration-007</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - ::before
+          <ul class="assert">
+            <li>Check that animation-duration applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-008-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-duration-008.xht">animation-duration-008</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - ::after
+          <ul class="assert">
+            <li>Check that animation-duration applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-001-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-fill-mode-001.xht">animation-fill-mode-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - none
+          <ul class="assert">
+            <li>When animation-fill-mode is set to none, animation has no effect when it is applied but not executing.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-002-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-fill-mode-002.xht">animation-fill-mode-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - forwards
+          <ul class="assert">
+            <li>When animation-fill-mode is set to forwards, animation will apply the property values for the time the amination ended after the animation ends.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-003-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-fill-mode-003.xht">animation-fill-mode-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - backwards
+          <ul class="assert">
+            <li>When animation-fill-mode is set to backwards, animation-delay is set a positive time offset, and animation-direction is 'normal' or 'alternate-reverse', animation will apply the from or 0% keyframe that will start the first iteration.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-004-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-fill-mode-004.xht">animation-fill-mode-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - both
+          <ul class="assert">
+            <li>Check if animation-fill-mode is set to both, the effects of both 'forwards' and 'backwards' will apply.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-005-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-fill-mode-005.xht">animation-fill-mode-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - ::after
+          <ul class="assert">
+            <li>Check that animation-fill-mode applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-006-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-fill-mode-006.xht">animation-fill-mode-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - ::before
+          <ul class="assert">
+            <li>Check that animation-fill-mode applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-001-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-iteration-count-001.xht">animation-iteration-count-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - default value
+          <ul class="assert">
+            <li>When animation-iteration-count is not set, 1 is taken by default and animation will play from beginning to end once.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-002-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-iteration-count-002.xht">animation-iteration-count-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - infinite value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to infinite, animation will repeat forever.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-003-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-iteration-count-003.xht">animation-iteration-count-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - negative value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to negative count, it is invalid and animation will play from beginning to end once.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-004-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-iteration-count-004.xht">animation-iteration-count-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - non-integer value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to non-integer, animation will end partway through its last cycle.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-005-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-iteration-count-005.xht">animation-iteration-count-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - integer value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to integer count, animation will repeat the specified number of times.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-006-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-iteration-count-006.xht">animation-iteration-count-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - 0 (zero)
+          <ul class="assert">
+            <li>When animation-iteration-count is set to 0 (zero), no animation is seen.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-007-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-iteration-count-007.xht">animation-iteration-count-007</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - ::after
+          <ul class="assert">
+            <li>Check that animation-iteration-count applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-008-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-iteration-count-008.xht">animation-iteration-count-008</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - ::before
+          <ul class="assert">
+            <li>Check that animation-iteration-count applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-event-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-iteration-event.xht">animation-iteration-event</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation events - animationiteration
+          <ul class="assert">
+            <li>Check that animationiteration event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-keyframes-001-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-keyframes-001.xht">animation-keyframes-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>@keyframes - from, to, percentage
+          <ul class="assert">
+            <li>Check that @keyframes rule accepts 'from' and 'to' keywords, and percentage values.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-keyframes-002-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-keyframes-002.xht">animation-keyframes-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>@keyframes - negative percentage and higher than 100%
+          <ul class="assert">
+            <li>Check that a keyframe selector specifies negative percentage values or values higher than 100%, the keyframe will be ignored.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-keyframes-003-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-keyframes-003.xht">animation-keyframes-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>@keyframes - animation-timing-function
+          <ul class="assert">
+            <li>Check that @keyframes rule accpets 'animation-timing-function' property used as the animation moves to the next keyframe.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-001-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-name-001.xht">animation-name-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name - blank value
+          <ul class="assert">
+            <li>Check that animation-name is set without any value, there will be no animation.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-002-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-name-002.xht">animation-name-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name matchs keyframes at-rule
+          <ul class="assert">
+            <li>When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation, animation will execute.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-003-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-name-003.xht">animation-name-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name - none
+          <ul class="assert">
+            <li>Check that animation-name is set to none, there will be no animation.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-004-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-name-004.xht">animation-name-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name mismatches keyframe at-rule
+          <ul class="assert">
+            <li>Check that animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-005-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-name-005.xht">animation-name-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name - ::after
+          <ul class="assert">
+            <li>Check that animation-name applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-name-006-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-name-006.xht">animation-name-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-name - ::before
+          <ul class="assert">
+            <li>Check that animation-name applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-play-state-001-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-play-state-001.xht">animation-play-state-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - paused
+          <ul class="assert">
+            <li>When animation-play-state is set to paused, animation is paused where the progress it had made before being paused.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-play-state-002-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-play-state-002.xht">animation-play-state-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - running
+          <ul class="assert">
+            <li>When animation-play-state is set to running, animation will proceed as normal.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-play-state-003-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-play-state-003.xht">animation-play-state-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - ::after
+          <ul class="assert">
+            <li>Check that animation-play-state applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-play-state-004-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-play-state-004.xht">animation-play-state-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - ::before
+          <ul class="assert">
+            <li>Check that animation-play-state applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-001-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-001.xht">animation-timing-function-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - cubic-bezier with parameters (0,0,1,1)
+          <ul class="assert">
+            <li>When animation-timing-function is set to cubic-bezier with parameters (0,0,1,1), animation will progress over one cycle of its duration with constant speed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-002-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-002.xht">animation-timing-function-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease, animation will starts slow, gain acceleration in the middle and again slow down at the end.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-003-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-003.xht">animation-timing-function-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease-in
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease-in, animation will start slow, gain acceleration as time progresses.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-004-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-004.xht">animation-timing-function-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease-in-out
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease-in-out, animation will start slow, gain acceleration in the middel and again slow down at the end.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-005-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-005.xht">animation-timing-function-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease-out
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease-out, animation will start with higher (than the normal) speed and relatively slow down as time progresses.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-006-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-006.xht">animation-timing-function-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - linear
+          <ul class="assert">
+            <li>When animation-timing-function is set to linear, animation will progress over one cycle of its duration with constant speed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-007-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-007.xht">animation-timing-function-007</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - step-start
+          <ul class="assert">
+            <li>When animation-timing-function is set to step-start, animation will play the end effect at the start of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-008-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-008.xht">animation-timing-function-008</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - step-end
+          <ul class="assert">
+            <li>When animation-timing-function is set to step-end, animation will play the end effect at the end time point, and keep the start effect at the start of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-009-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-009.xht">animation-timing-function-009</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - steps with parameters (&lt;number&gt;, start)
+          <ul class="assert">
+            <li>When animation-timing-function is set to steps with paramenters (&lt;number&gt;, start), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the start of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-010-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-010.xht">animation-timing-function-010</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - steps with parameters (&lt;number&gt;, end)
+          <ul class="assert">
+            <li>When animation-timing-function is set to steps with paramenters (&lt;number&gt;, end), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the end of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-011-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-011.xht">animation-timing-function-011</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ::after
+          <ul class="assert">
+            <li>Check that animation-timing-function applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-012-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animation-timing-function-012.xht">animation-timing-function-012</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ::before
+          <ul class="assert">
+            <li>Check that animation-timing-function applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animationstart-and-animationend-events-4.3.#animation-duration" class="animated">
+        <td>
+            <a href="animationstart-and-animationend-events.xht">animationstart-and-animationend-events</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation events - animationstart and animationend
+          <ul class="assert">
+            <li>Check that animationstart event occurs at the start of an animation, animationend event occurs when animation finishes.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s4.4">
       <tr><th colspan="4" scope="rowgroup">
@@ -76,7 +1495,150 @@
       <!-- 0 tests -->
     </tbody>
     <tbody id="s4.4.#animation-timing-function">
-      <!-- 0 tests -->
+      <!-- 13 tests -->
+      <tr id="animation-delay-001-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-delay-001.xht">animation-delay-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - negative value
+          <ul class="assert">
+            <li>When animation-delay is set to a negative time offset, animation will execute as soon as it is applied but act as if the animation had started the specified time in the past.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-001-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-001.xht">animation-timing-function-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - cubic-bezier with parameters (0,0,1,1)
+          <ul class="assert">
+            <li>When animation-timing-function is set to cubic-bezier with parameters (0,0,1,1), animation will progress over one cycle of its duration with constant speed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-002-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-002.xht">animation-timing-function-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease, animation will starts slow, gain acceleration in the middle and again slow down at the end.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-003-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-003.xht">animation-timing-function-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease-in
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease-in, animation will start slow, gain acceleration as time progresses.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-004-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-004.xht">animation-timing-function-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease-in-out
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease-in-out, animation will start slow, gain acceleration in the middel and again slow down at the end.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-005-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-005.xht">animation-timing-function-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ease-out
+          <ul class="assert">
+            <li>Check that animation-timing-function is set to ease-out, animation will start with higher (than the normal) speed and relatively slow down as time progresses.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-006-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-006.xht">animation-timing-function-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - linear
+          <ul class="assert">
+            <li>When animation-timing-function is set to linear, animation will progress over one cycle of its duration with constant speed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-007-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-007.xht">animation-timing-function-007</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - step-start
+          <ul class="assert">
+            <li>When animation-timing-function is set to step-start, animation will play the end effect at the start of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-008-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-008.xht">animation-timing-function-008</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - step-end
+          <ul class="assert">
+            <li>When animation-timing-function is set to step-end, animation will play the end effect at the end time point, and keep the start effect at the start of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-009-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-009.xht">animation-timing-function-009</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - steps with parameters (&lt;number&gt;, start)
+          <ul class="assert">
+            <li>When animation-timing-function is set to steps with paramenters (&lt;number&gt;, start), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the start of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-010-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-010.xht">animation-timing-function-010</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - steps with parameters (&lt;number&gt;, end)
+          <ul class="assert">
+            <li>When animation-timing-function is set to steps with paramenters (&lt;number&gt;, end), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the end of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-011-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-011.xht">animation-timing-function-011</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ::after
+          <ul class="assert">
+            <li>Check that animation-timing-function applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-012-4.4.#animation-timing-function" class="animated">
+        <td>
+            <a href="animation-timing-function-012.xht">animation-timing-function-012</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - ::before
+          <ul class="assert">
+            <li>Check that animation-timing-function applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s4.5">
       <tr><th colspan="4" scope="rowgroup">
@@ -85,7 +1647,172 @@
       <!-- 0 tests -->
     </tbody>
     <tbody id="s4.5.#animation-iteration-count">
-      <!-- 0 tests -->
+      <!-- 15 tests -->
+      <tr id="animation-direction-001-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-direction-001.xht">animation-direction-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - alternate
+          <ul class="assert">
+            <li>When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-002-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-direction-002.xht">animation-direction-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - normal
+          <ul class="assert">
+            <li>When animation-direction is set to normal, all iterations of animation are played as specified.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-003-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-direction-003.xht">animation-direction-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - alternate-reverse
+          <ul class="assert">
+            <li>When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-004-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-direction-004.xht">animation-direction-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - reverse
+          <ul class="assert">
+            <li>When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-005-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-direction-005.xht">animation-direction-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - ::after
+          <ul class="assert">
+            <li>Check that animation-direction applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-006-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-direction-006.xht">animation-direction-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - ::before
+          <ul class="assert">
+            <li>Check that animation-direction applies to the ::before pseudo element</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-001-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-iteration-count-001.xht">animation-iteration-count-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - default value
+          <ul class="assert">
+            <li>When animation-iteration-count is not set, 1 is taken by default and animation will play from beginning to end once.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-002-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-iteration-count-002.xht">animation-iteration-count-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - infinite value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to infinite, animation will repeat forever.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-003-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-iteration-count-003.xht">animation-iteration-count-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - negative value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to negative count, it is invalid and animation will play from beginning to end once.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-004-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-iteration-count-004.xht">animation-iteration-count-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - non-integer value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to non-integer, animation will end partway through its last cycle.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-005-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-iteration-count-005.xht">animation-iteration-count-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - integer value
+          <ul class="assert">
+            <li>When animation-iteration-count is set to integer count, animation will repeat the specified number of times.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-006-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-iteration-count-006.xht">animation-iteration-count-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - 0 (zero)
+          <ul class="assert">
+            <li>When animation-iteration-count is set to 0 (zero), no animation is seen.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-007-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-iteration-count-007.xht">animation-iteration-count-007</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - ::after
+          <ul class="assert">
+            <li>Check that animation-iteration-count applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-count-008-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-iteration-count-008.xht">animation-iteration-count-008</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-iteration-count - ::before
+          <ul class="assert">
+            <li>Check that animation-iteration-count applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-iteration-event-4.5.#animation-iteration-count" class="animated">
+        <td>
+            <a href="animation-iteration-event.xht">animation-iteration-event</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation events - animationiteration
+          <ul class="assert">
+            <li>Check that animationiteration event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s4.5.#single-animation-iteration-count">
       <!-- 0 tests -->
@@ -103,7 +1830,73 @@
       <!-- 0 tests -->
     </tbody>
     <tbody id="s4.6.#animation-direction">
-      <!-- 0 tests -->
+      <!-- 6 tests -->
+      <tr id="animation-direction-001-4.6.#animation-direction" class="primary animated">
+        <td><strong>
+            <a href="animation-direction-001.xht">animation-direction-001</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - alternate
+          <ul class="assert">
+            <li>When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-002-4.6.#animation-direction" class="primary animated">
+        <td><strong>
+            <a href="animation-direction-002.xht">animation-direction-002</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - normal
+          <ul class="assert">
+            <li>When animation-direction is set to normal, all iterations of animation are played as specified.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-003-4.6.#animation-direction" class="primary animated">
+        <td><strong>
+            <a href="animation-direction-003.xht">animation-direction-003</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - alternate-reverse
+          <ul class="assert">
+            <li>When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-004-4.6.#animation-direction" class="primary animated">
+        <td><strong>
+            <a href="animation-direction-004.xht">animation-direction-004</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - reverse
+          <ul class="assert">
+            <li>When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-005-4.6.#animation-direction" class="primary animated">
+        <td><strong>
+            <a href="animation-direction-005.xht">animation-direction-005</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - ::after
+          <ul class="assert">
+            <li>Check that animation-direction applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-direction-006-4.6.#animation-direction" class="primary animated">
+        <td><strong>
+            <a href="animation-direction-006.xht">animation-direction-006</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-direction - ::before
+          <ul class="assert">
+            <li>Check that animation-direction applies to the ::before pseudo element</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s4.6.#normal">
       <!-- 0 tests -->
@@ -121,7 +1914,51 @@
       <!-- 0 tests -->
     </tbody>
     <tbody id="s4.7.#animation-play-state">
-      <!-- 0 tests -->
+      <!-- 4 tests -->
+      <tr id="animation-play-state-001-4.7.#animation-play-state" class="animated">
+        <td>
+            <a href="animation-play-state-001.xht">animation-play-state-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - paused
+          <ul class="assert">
+            <li>When animation-play-state is set to paused, animation is paused where the progress it had made before being paused.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-play-state-002-4.7.#animation-play-state" class="animated">
+        <td>
+            <a href="animation-play-state-002.xht">animation-play-state-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - running
+          <ul class="assert">
+            <li>When animation-play-state is set to running, animation will proceed as normal.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-play-state-003-4.7.#animation-play-state" class="animated">
+        <td>
+            <a href="animation-play-state-003.xht">animation-play-state-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - ::after
+          <ul class="assert">
+            <li>Check that animation-play-state applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-play-state-004-4.7.#animation-play-state" class="animated">
+        <td>
+            <a href="animation-play-state-004.xht">animation-play-state-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-play-state - ::before
+          <ul class="assert">
+            <li>Check that animation-play-state applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s4.7.#single-animation-play-state">
       <!-- 0 tests -->
@@ -133,7 +1970,106 @@
       <!-- 0 tests -->
     </tbody>
     <tbody id="s4.8.#animation-delay">
-      <!-- 0 tests -->
+      <!-- 9 tests -->
+      <tr id="animation-delay-001-4.8.#animation-delay" class="primary animated">
+        <td><strong>
+            <a href="animation-delay-001.xht">animation-delay-001</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - negative value
+          <ul class="assert">
+            <li>When animation-delay is set to a negative time offset, animation will execute as soon as it is applied but act as if the animation had started the specified time in the past.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-002-4.8.#animation-delay" class="primary animated">
+        <td><strong>
+            <a href="animation-delay-002.xht">animation-delay-002</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - positive value
+          <ul class="assert">
+            <li>When animation-delay is set to a positive time offset, animation will delay execution by the specified offset value.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-003-4.8.#animation-delay" class="primary animated">
+        <td><strong>
+            <a href="animation-delay-003.xht">animation-delay-003</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - 0s
+          <ul class="assert">
+            <li>When animation-delay is set to 0s (zero seconds), animation will execute as soon as it is applied.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-004-4.8.#animation-delay" class="primary animated">
+        <td><strong>
+            <a href="animation-delay-004.xht">animation-delay-004</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - ::after
+          <ul class="assert">
+            <li>Check that animation-delay applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-005-4.8.#animation-delay" class="primary animated">
+        <td><strong>
+            <a href="animation-delay-005.xht">animation-delay-005</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - ::before
+          <ul class="assert">
+            <li>Check that animation-delay applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-006-4.8.#animation-delay" class="primary animated">
+        <td><strong>
+            <a href="animation-delay-006.xht">animation-delay-006</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - initial keyword
+          <ul class="assert">
+            <li>Check that animation-delay property accepts 'initial' keyword.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-delay-007-4.8.#animation-delay" class="primary animated">
+        <td><strong>
+            <a href="animation-delay-007.xht">animation-delay-007</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-delay - inherit keyword
+          <ul class="assert">
+            <li>Check that animation-delay property accepts 'inherit' keyword.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-003-4.8.#animation-delay" class="animated">
+        <td>
+            <a href="animation-fill-mode-003.xht">animation-fill-mode-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - backwards
+          <ul class="assert">
+            <li>When animation-fill-mode is set to backwards, animation-delay is set a positive time offset, and animation-direction is 'normal' or 'alternate-reverse', animation will apply the from or 0% keyframe that will start the first iteration.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-004-4.8.#animation-delay" class="animated">
+        <td>
+            <a href="animation-fill-mode-004.xht">animation-fill-mode-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - both
+          <ul class="assert">
+            <li>Check if animation-fill-mode is set to both, the effects of both 'forwards' and 'backwards' will apply.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s4.9">
       <tr><th colspan="4" scope="rowgroup">
@@ -142,7 +2078,128 @@
       <!-- 0 tests -->
     </tbody>
     <tbody id="s4.9.#animation-fill-mode">
-      <!-- 0 tests -->
+      <!-- 11 tests -->
+      <tr id="animation-duration-005-4.9.#animation-fill-mode" class="animated">
+        <td>
+            <a href="animation-duration-005.xht">animation-duration-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - 0s, animation-fill-mode - forwards
+          <ul class="assert">
+            <li>When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'forwards', the last frame of the animation will be displayed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-duration-006-4.9.#animation-fill-mode" class="animated">
+        <td>
+            <a href="animation-duration-006.xht">animation-duration-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-duration - 0s, animation-fill-mode - both
+          <ul class="assert">
+            <li>When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'both', the last frame of the animation will be displayed.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-001-4.9.#animation-fill-mode" class="animated">
+        <td>
+            <a href="animation-fill-mode-001.xht">animation-fill-mode-001</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - none
+          <ul class="assert">
+            <li>When animation-fill-mode is set to none, animation has no effect when it is applied but not executing.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-002-4.9.#animation-fill-mode" class="animated">
+        <td>
+            <a href="animation-fill-mode-002.xht">animation-fill-mode-002</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - forwards
+          <ul class="assert">
+            <li>When animation-fill-mode is set to forwards, animation will apply the property values for the time the amination ended after the animation ends.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-003-4.9.#animation-fill-mode" class="animated">
+        <td>
+            <a href="animation-fill-mode-003.xht">animation-fill-mode-003</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - backwards
+          <ul class="assert">
+            <li>When animation-fill-mode is set to backwards, animation-delay is set a positive time offset, and animation-direction is 'normal' or 'alternate-reverse', animation will apply the from or 0% keyframe that will start the first iteration.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-004-4.9.#animation-fill-mode" class="animated">
+        <td>
+            <a href="animation-fill-mode-004.xht">animation-fill-mode-004</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - both
+          <ul class="assert">
+            <li>Check if animation-fill-mode is set to both, the effects of both 'forwards' and 'backwards' will apply.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-005-4.9.#animation-fill-mode" class="animated">
+        <td>
+            <a href="animation-fill-mode-005.xht">animation-fill-mode-005</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - ::after
+          <ul class="assert">
+            <li>Check that animation-fill-mode applies to the ::after pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-fill-mode-006-4.9.#animation-fill-mode" class="animated">
+        <td>
+            <a href="animation-fill-mode-006.xht">animation-fill-mode-006</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-fill-mode - ::before
+          <ul class="assert">
+            <li>Check that animation-fill-mode applies to the ::before pseudo element.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-007-4.9.#animation-fill-mode" class="animated">
+        <td>
+            <a href="animation-timing-function-007.xht">animation-timing-function-007</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - step-start
+          <ul class="assert">
+            <li>When animation-timing-function is set to step-start, animation will play the end effect at the start of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-009-4.9.#animation-fill-mode" class="animated">
+        <td>
+            <a href="animation-timing-function-009.xht">animation-timing-function-009</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - steps with parameters (&lt;number&gt;, start)
+          <ul class="assert">
+            <li>When animation-timing-function is set to steps with paramenters (&lt;number&gt;, start), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the start of the interval.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-timing-function-010-4.9.#animation-fill-mode" class="animated">
+        <td>
+            <a href="animation-timing-function-010.xht">animation-timing-function-010</a></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation-timing-function - steps with parameters (&lt;number&gt;, end)
+          <ul class="assert">
+            <li>When animation-timing-function is set to steps with paramenters (&lt;number&gt;, end), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the end of the interval.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s4.9.#single-animation-fill-mode">
       <!-- 0 tests -->
@@ -154,7 +2211,40 @@
       <!-- 0 tests -->
     </tbody>
     <tbody id="s4.10.#animation">
-      <!-- 0 tests -->
+      <!-- 3 tests -->
+      <tr id="animation-shorthand-001-4.10.#animation" class="primary animated">
+        <td><strong>
+            <a href="animation-shorthand-001.xht">animation-shorthand-001</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation shorthand
+          <ul class="assert">
+            <li>Check that animation shorthand property accepts time values for animation-duration and animation-delay in order.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-shorthand-002-4.10.#animation" class="primary animated">
+        <td><strong>
+            <a href="animation-shorthand-002.xht">animation-shorthand-002</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation shorthand - ::after
+          <ul class="assert">
+            <li>Check that animation shorthand applies to the ::after pseudo element and accepts time values for animation-duration and animation-delay in order.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="animation-shorthand-003-4.10.#animation" class="primary animated">
+        <td><strong>
+            <a href="animation-shorthand-003.xht">animation-shorthand-003</a></strong></td>
+        <td></td>
+        <td><abbr class="animated" title="Animated test">Animated</abbr></td>
+        <td>animation shorthand - ::before
+          <ul class="assert">
+            <li>Check that animation shorthand applies to the ::before pseudo element and accepts time values for animation-duration and animation-delay in order.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s4.10.#single-animation">
       <!-- 0 tests -->
diff --git a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/toc.xht b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/toc.xht
index a482e69010f..2a20d90416a 100644
--- a/tests/wpt/css-tests/css-animations-1_dev/xhtml1/toc.xht
+++ b/tests/wpt/css-tests/css-animations-1_dev/xhtml1/toc.xht
@@ -27,17 +27,17 @@
     <tbody id="s2">
       <tr><th><a href="chapter-2.xht">Chapter 2 - 
         Values</a></th>
-      <td>(0 Tests)</td></tr>
+      <td>(2 Tests)</td></tr>
     </tbody>
     <tbody id="s3">
       <tr><th><a href="chapter-3.xht">Chapter 3 - 
         Animations</a></th>
-      <td>(15 Tests)</td></tr>
+      <td>(16 Tests)</td></tr>
     </tbody>
     <tbody id="s4">
       <tr><th><a href="chapter-4.xht">Chapter 4 - 
         Keyframes</a></th>
-      <td>(0 Tests)</td></tr>
+      <td>(66 Tests)</td></tr>
     </tbody>
     <tbody id="s5">
       <tr><th><a href="chapter-5.xht">Chapter 5 -
author	Ms2ger <Ms2ger@gmail.com>	2015-08-21 17:46:44 +0200
committer	Ms2ger <Ms2ger@gmail.com>	2015-08-21 18:40:37 +0200
commit	f235d49372ba86d6d01530fe1b9ebdf8bea74468 (patch)
tree	13d3535ee53fcae1b8d61265e3d97adb00dd60eb /tests/wpt/css-tests/css-animations-1_dev
parent	7c45ff8e05a6ebd21f9aa5c360e997a01d48b1fc (diff)
download	servo-f235d49372ba86d6d01530fe1b9ebdf8bea74468.tar.gz servo-f235d49372ba86d6d01530fe1b9ebdf8bea74468.zip