Add an animation to the host page.

Designed by @mknadler. R=kevmoo@google.com Review URL: https://codereview.chromium.org//1087403002
dart-lang · Apr 16, 2015 · 9fbb895 · 9fbb895
1 parent 98a8dd7
commit 9fbb895
Show file tree

Hide file tree

Showing 3 changed files with 281 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,8 @@
 
 * Add a `--version` flag.
 
+* Add an animation to run in the browser while testing.
+
 ### 0.12.0-beta.7
 
 * Browser tests can now load assets by making HTTP requests to the corresponding

diff --git a/lib/src/runner/browser/static/host.css b/lib/src/runner/browser/static/host.css
@@ -0,0 +1,267 @@
+/* Copyright (c) 2015, the Dart project authors.  Please see the AUTHORS file
+ * for details. All rights reserved. Use of this source code is governed by a
+ * BSD-style license that can be found in the LICENSE file. */
+
+/* Compiled output from
+ * http://codepen.io/mknadler/pen/11b75cb014a3c382f54abf527655af21. */
+
+iframe {
+  display: none;
+}
+
+svg {
+  position: absolute;
+  margin: auto;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+}
+
+#right-flank {
+  fill: #0074C1;
+  stroke-color: #0074C1;
+  -webkit-animation: right-flank 8s ease infinite alternate;
+          animation: right-flank 8s ease infinite alternate;
+}
+
+#right-ear {
+  fill: #00B5AB;
+  stroke-color: #00B5AB;
+  -webkit-animation: right-ear 8s ease-in infinite alternate;
+          animation: right-ear 8s ease-in infinite alternate;
+}
+
+#right-paw {
+  fill: #00A6E4;
+  stroke-color: #00A6E4;
+  -webkit-animation: right-paw 8s ease-out infinite alternate;
+          animation: right-paw 8s ease-out infinite alternate;
+}
+
+#left-flank {
+  fill: #00B5AB;
+  stroke-color: #00B5AB;
+  -webkit-animation: left-flank 8s ease-in-out infinite alternate;
+          animation: left-flank 8s ease-in-out infinite alternate;
+}
+
+#left-ear {
+  fill: #0074C1;
+  stroke-color: #0074C1;
+  -webkit-animation: left-ear 8s linear infinite alternate;
+          animation: left-ear 8s linear infinite alternate;
+}
+
+#left-paw {
+  fill: #41C1BC;
+  stroke-color: #41C1BC;
+  -webkit-animation: left-paw 8s ease infinite alternate;
+          animation: left-paw 8s ease infinite alternate;
+}
+
+@-webkit-keyframes left-ear {
+  20% {
+    -webkit-transform: translate(250px, 150px) rotateY(180deg) scale(0.6);
+            transform: translate(250px, 150px) rotateY(180deg) scale(0.6);
+    fill: #00A6E4;
+  }
+  50% {
+    -webkit-transform: translate(100px, 75px) rotateY(80deg) scale(1.1);
+            transform: translate(100px, 75px) rotateY(80deg) scale(1.1);
+    fill: #41C1BC;
+  }
+  80% {
+    -webkit-transform: translate(0px, 0px) scale(1);
+            transform: translate(0px, 0px) scale(1);
+    fill: #0074C1;
+  }
+}
+
+@keyframes left-ear {
+  20% {
+    -webkit-transform: translate(250px, 150px) rotateY(180deg) scale(0.6);
+            transform: translate(250px, 150px) rotateY(180deg) scale(0.6);
+    fill: #00A6E4;
+  }
+  50% {
+    -webkit-transform: translate(100px, 75px) rotateY(80deg) scale(1.1);
+            transform: translate(100px, 75px) rotateY(80deg) scale(1.1);
+    fill: #41C1BC;
+  }
+  80% {
+    -webkit-transform: translate(0px, 0px) scale(1);
+            transform: translate(0px, 0px) scale(1);
+    fill: #0074C1;
+  }
+}
+@-webkit-keyframes right-ear {
+  20% {
+    -webkit-transform: translate(200px, 250px) rotateX(180deg) scale(0.6);
+            transform: translate(200px, 250px) rotateX(180deg) scale(0.6);
+    fill: #41C1BC;
+  }
+  50% {
+    -webkit-transform: translate(75px, 100px) rotateX(80deg) scale(1.1);
+            transform: translate(75px, 100px) rotateX(80deg) scale(1.1);
+    fill: #00A6E4;
+  }
+  80% {
+    -webkit-transform: translate(0px, 0px) scale(1);
+            transform: translate(0px, 0px) scale(1);
+    fill: #00B5AB;
+  }
+}
+@keyframes right-ear {
+  20% {
+    -webkit-transform: translate(200px, 250px) rotateX(180deg) scale(0.6);
+            transform: translate(200px, 250px) rotateX(180deg) scale(0.6);
+    fill: #41C1BC;
+  }
+  50% {
+    -webkit-transform: translate(75px, 100px) rotateX(80deg) scale(1.1);
+            transform: translate(75px, 100px) rotateX(80deg) scale(1.1);
+    fill: #00A6E4;
+  }
+  80% {
+    -webkit-transform: translate(0px, 0px) scale(1);
+            transform: translate(0px, 0px) scale(1);
+    fill: #00B5AB;
+  }
+}
+@-webkit-keyframes left-paw {
+  20% {
+    -webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6);
+            transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6);
+    fill: #00B5AB;
+  }
+  50% {
+    -webkit-transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6);
+            transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6);
+    fill: #00B5AB;
+  }
+  80% {
+    -webkit-transform: translate(0px, 0px) scale(1);
+            transform: translate(0px, 0px) scale(1);
+    fill: #41C1BC;
+  }
+}
+@keyframes left-paw {
+  20% {
+    -webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6);
+            transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6);
+    fill: #00B5AB;
+  }
+  50% {
+    -webkit-transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6);
+            transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6);
+    fill: #00B5AB;
+  }
+  80% {
+    -webkit-transform: translate(0px, 0px) scale(1);
+            transform: translate(0px, 0px) scale(1);
+    fill: #41C1BC;
+  }
+}
+@-webkit-keyframes right-paw {
+  20% {
+    -webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6);
+            transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6);
+    fill: #41C1BC;
+  }
+  50% {
+    -webkit-transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6);
+            transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6);
+    fill: #41C1BC;
+  }
+  80% {
+    -webkit-transform: translate(0px, 0px) scale(1);
+            transform: translate(0px, 0px) scale(1);
+    fill: #00A6E4;
+  }
+}
+@keyframes right-paw {
+  20% {
+    -webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6);
+            transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6);
+    fill: #41C1BC;
+  }
+  50% {
+    -webkit-transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6);
+            transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6);
+    fill: #41C1BC;
+  }
+  80% {
+    -webkit-transform: translate(0px, 0px) scale(1);
+            transform: translate(0px, 0px) scale(1);
+    fill: #00A6E4;
+  }
+}
+@-webkit-keyframes left-flank {
+  20% {
+    -webkit-transform: translate(0px, 100px) scale(0.6);
+            transform: translate(0px, 100px) scale(0.6);
+    fill: #00A6E4;
+  }
+  50% {
+    -webkit-transform: translate(0px, 100px) scale(0.4);
+            transform: translate(0px, 100px) scale(0.4);
+    fill: #00A6E4;
+  }
+  80% {
+    -webkit-transform: translate(0px, 0px) scale(1);
+            transform: translate(0px, 0px) scale(1);
+    fill: #00B5AB;
+  }
+}
+@keyframes left-flank {
+  20% {
+    -webkit-transform: translate(0px, 100px) scale(0.6);
+            transform: translate(0px, 100px) scale(0.6);
+    fill: #00A6E4;
+  }
+  50% {
+    -webkit-transform: translate(0px, 100px) scale(0.4);
+            transform: translate(0px, 100px) scale(0.4);
+    fill: #00A6E4;
+  }
+  80% {
+    -webkit-transform: translate(0px, 0px) scale(1);
+            transform: translate(0px, 0px) scale(1);
+    fill: #00B5AB;
+  }
+}
+@-webkit-keyframes right-flank {
+  20% {
+    -webkit-transform: translate(100px, -25px) scale(0.6);
+            transform: translate(100px, -25px) scale(0.6);
+    fill: #41C1BC;
+  }
+  50% {
+    -webkit-transform: translate(110px, 0px) scale(0.4);
+            transform: translate(110px, 0px) scale(0.4);
+    fill: #00A6E4;
+  }
+  80% {
+    -webkit-transform: translate(0px, 0px) scale(1);
+            transform: translate(0px, 0px) scale(1);
+    fill: #0074C1;
+  }
+}
+@keyframes right-flank {
+  20% {
+    -webkit-transform: translate(100px, -25px) scale(0.6);
+            transform: translate(100px, -25px) scale(0.6);
+    fill: #41C1BC;
+  }
+  50% {
+    -webkit-transform: translate(110px, 0px) scale(0.4);
+            transform: translate(110px, 0px) scale(0.4);
+    fill: #00A6E4;
+  }
+  80% {
+    -webkit-transform: translate(0px, 0px) scale(1);
+            transform: translate(0px, 0px) scale(1);
+    fill: #0074C1;
+  }
+}
diff --git a/lib/src/runner/browser/static/index.html b/lib/src/runner/browser/static/index.html
@@ -3,7 +3,17 @@
 <head>
   <title>test Browser Host</title>
   <script src="host.dart.js"></script>
+  <link rel="stylesheet" type="text/css" href="host.css" />
 </head>
-<!-- TODO(nweiz): add something pleasant to look at on this page to entertain
-     people during long-running tests. -->
+<body>
+  <svg version="1.1" x="0px" y="0px" width="400px" height="400px"
+      viewBox="0 0 400 400">
+    <path id="right-flank" fill="#0083C9" d="M249.379,226.486l-6.676,15.572L166.174,166h58.82c0,0,2.807-0.409,3.645,1.966L249.379,226.486z"/>
+    <path id="right-ear"   fill="#00D2B8" d="M201.84,141.906L166.174,166h58.82c0,0,2.168-0.25,2.645,0.566l-2.694-8.848l-15.024-14.68C207.555,140.329,203.578,140.744,201.84,141.906z"/>
+    <path id="left-flank"  fill="#00D2B8" d="M242.616,241.856l-15.022,6.799l-60.493-21.429c-1.035-0.395-1.101-3.696-1.101-3.696v-57.932L242.616,241.856z"/>
+    <path id="left-paw"    fill="#55DECA" d="M167.003,227.098l60.636,21.558l15.064-6.799L237.224,259h-43.856c0,0-14.077-13.929-18.141-17.993C171.162,236.943,169.162,233.989,167.003,227.098z"/>
+    <path id="right-paw"   fill="#00A4E4" d="M227.676,166.365c0.963,1.401,1.361,2.473,1.361,2.473l20.352,57.648l-6.711,15.37L259,236.463v-44.854c0,0-13.678-13.965-17.741-17.882C237.193,169.811,231.466,166.319,227.676,166.365z"/>
+    <path id="left-ear"    fill="#0083C9" d="M166.769,227.098c0,0-0.769-1.104-0.769-4.355v-57.144l-23.115,34.877c-1.626,1.774-1.567,6.538,1.595,9.755l13.636,13.892L166.769,227.098z"/>
+  </svg>
+</body>
 </html>