diff --git a/examples/index.html b/examples/index.html
index e838365..49e90fe 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -28,6 +28,8 @@
       
         <li><a href="compare.html?name=circle">circle</a></li>
       
+        <li><a href="compare.html?name=circular-dependencies">circular-dependencies</a></li>
+      
         <li><a href="compare.html?name=click">click</a></li>
       
         <li><a href="compare.html?name=color">color</a></li>
diff --git a/examples/svg/circular-dependencies.svg b/examples/svg/circular-dependencies.svg
new file mode 100644
index 0000000..5a3fa29
--- /dev/null
+++ b/examples/svg/circular-dependencies.svg
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="200">
+
+  <script>
+    var started = [];
+    var oldtime = new Date().getTime();
+
+    function logBegin(name) {
+      var newtime = new Date().getTime();
+      if (newtime - oldtime > 300) {
+        oldtime = newtime;
+        if (started.length > 0) {
+          started.sort();
+          console.log(started);
+          started = [];
+        }
+      }
+
+      started.push(name);
+    }
+  </script>
+
+  <rect x="200" y="0" width="28" height="100" fill="green">
+    <animate id="E" attributeName="y" from="0" to="100" dur="1s" begin="1s; F.begin - 1s; F.begin + 1s" onbegin="logBegin('E')"/>
+  </rect>
+  <rect x="231" y="0" width="28" height="100" fill="green">
+    <animate id="F" attributeName="y" from="0" to="100" dur="1s" begin="E.begin + 4s" onbegin="logBegin('F')"/>
+  </rect>
+
+  <!--
+    Firefox begins with
+      Array [ "E" ]
+      Array [ "E" ]
+      Array [ "F" ]
+      Array [ "E" ]
+      Array [ "E" ]
+      Array [ "F" ]
+      Array [ "E" ]
+      Array [ "F" ]
+      Array [ "E", "E", "F" ]
+      Array [ "E" ]
+      Array [ "F" ]
+      Array [ "E", "E", "F" ]
+    and then repeats
+      Array [ "E", "F" ]
+
+    Chrome begins with
+      ["E"]
+      ["E"]
+      ["F"]
+      ["E"]
+      ["E"]
+      ["F"]
+      ["E"]
+      ["F"]
+    and then repeats
+      ["E", "F"]
+      ["E"]
+      ["F"]
+      ["E"]
+      ["F"]
+    Immediately after the ["E", "F"] animation completes, Chrome holds F at y=100 for a second; Firefox never does.
+  -->    
+</svg>
diff --git a/examples/web/circular-dependencies.html b/examples/web/circular-dependencies.html
new file mode 100644
index 0000000..046e275
--- /dev/null
+++ b/examples/web/circular-dependencies.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <svg width="500" height="200">
+      <rect id="rectE" x="200" y="0" width="28" height="100" fill="green"/>
+      <rect id="rectF" x="231" y="0" width="28" height="100" fill="green"/>
+    </svg>
+    <script src="../web-animations.js"></script>
+    <script>
+      'use strict';
+      var rectE = document.getElementById('rectE');
+      var rectF = document.getElementById('rectF');
+
+      var keyframes = [
+        { y: '0' },
+        { y: '100' },
+      ];
+      rectE.animate(keyframes, {duration: 1000 }).startTime = 1000;
+
+      // The later animation have not been implemented.
+      // We first need to establish the correct behavior as Chrome and Firefox differ.
+    </script>
+  </body>
+</html>
