Updated example

.gitignore

@@ -5,8 +5,8 @@
 .packages
 .project
 .pub/
-build/
+# build/
-**/packages/
+# **/packages/
 
 # Files created by dart2js
 # (Most Dart developers will use pub build to compile Dart, use/modify these 
@@ -26,4 +26,4 @@ doc/api/
 # (Library packages only! Remove pattern if developing an application package)
 pubspec.lock
 
-log.txt
+log.txt

build/lib/src/runner/browser/static/packages/browser/dart.js

@@ -0,0 +1,32 @@
+// Copyright (c) 2013, 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.
+
+(function() {
+// Bootstrap support for Dart scripts on the page as this script.
+if (navigator.userAgent.indexOf('(Dart)') === -1) {
+  // TODO:
+  // - Support in-browser compilation.
+  // - Handle inline Dart scripts.
+
+  // Fall back to compiled JS. Run through all the scripts and
+  // replace them if they have a type that indicate that they source
+  // in Dart code (type="application/dart").
+  var scripts = document.getElementsByTagName("script");
+  var length = scripts.length;
+  for (var i = 0; i < length; ++i) {
+    if (scripts[i].type == "application/dart") {
+      // Remap foo.dart to foo.dart.js.
+      if (scripts[i].src && scripts[i].src != '') {
+        var script = document.createElement('script');
+        script.src = scripts[i].src.replace(/\.dart(?=\?|$)/, '.dart.js');
+        var parent = scripts[i].parentNode;
+        // TODO(vsm): Find a solution for issue 8455 that works with more
+        // than one script.
+        document.currentScript = script;
+        parent.replaceChild(script, scripts[i]);
+      }
+    }
+  }
+}
+})();

build/lib/src/runner/browser/static/packages/browser/interop.js

@@ -0,0 +1,9 @@
+// Copyright (c) 2013, 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.
+
+// TODO(jmesserly): remove this script after a deprecation period.
+if (typeof console == "object" && typeof console.warn == "function") {
+  console.warn('<script src="packages/browser/interop.js"> is no longer ' +
+      'needed for dart:js. See http://pub.dartlang.org/packages/browser.');
+}

build/web/packages/browser/dart.js

@@ -0,0 +1,32 @@
+// Copyright (c) 2013, 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.
+
+(function() {
+// Bootstrap support for Dart scripts on the page as this script.
+if (navigator.userAgent.indexOf('(Dart)') === -1) {
+  // TODO:
+  // - Support in-browser compilation.
+  // - Handle inline Dart scripts.
+
+  // Fall back to compiled JS. Run through all the scripts and
+  // replace them if they have a type that indicate that they source
+  // in Dart code (type="application/dart").
+  var scripts = document.getElementsByTagName("script");
+  var length = scripts.length;
+  for (var i = 0; i < length; ++i) {
+    if (scripts[i].type == "application/dart") {
+      // Remap foo.dart to foo.dart.js.
+      if (scripts[i].src && scripts[i].src != '') {
+        var script = document.createElement('script');
+        script.src = scripts[i].src.replace(/\.dart(?=\?|$)/, '.dart.js');
+        var parent = scripts[i].parentNode;
+        // TODO(vsm): Find a solution for issue 8455 that works with more
+        // than one script.
+        document.currentScript = script;
+        parent.replaceChild(script, scripts[i]);
+      }
+    }
+  }
+}
+})();

build/web/packages/browser/interop.js

@@ -0,0 +1,9 @@
+// Copyright (c) 2013, 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.
+
+// TODO(jmesserly): remove this script after a deprecation period.
+if (typeof console == "object" && typeof console.warn == "function") {
+  console.warn('<script src="packages/browser/interop.js"> is no longer ' +
+      'needed for dart:js. See http://pub.dartlang.org/packages/browser.');
+}

build/web/packages/package_resolver/src/test_package_config

@@ -0,0 +1,3 @@
+# This needs to be in src/ so the tests can access it using a package: URI.
+foo:file:///foo/bar/
+bar:http://dartlang.org/bar/

build/web/packages/test/dart.js

@@ -0,0 +1,69 @@
+// 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.
+
+// This script runs in HTML files and loads the corresponding test scripts for
+// either Dartium or a JS browser. It's used by "pub serve" and user-authored
+// HTML files; when running without "pub serve", the default HTML file manually
+// chooses between serving a Dart or JS script tag.
+window.onload = function() {
+
+// Sends an error message to the server indicating that the script failed to
+// load.
+//
+// This mimics a MultiChannel-formatted message.
+var sendLoadException = function(message) {
+  window.parent.postMessage({
+    "href": window.location.href,
+    "data": [0, {"type": "loadException", "message": message}]
+  }, window.location.origin);
+}
+
+// The basename of the current page.
+var name = window.location.href.replace(/.*\//, '').replace(/#.*/, '');
+
+// Find <link rel="x-dart-test">.
+var links = document.getElementsByTagName("link");
+var testLinks = [];
+var length = links.length;
+for (var i = 0; i < length; ++i) {
+  if (links[i].rel == "x-dart-test") testLinks.push(links[i]);
+}
+
+if (testLinks.length != 1) {
+  sendLoadException(
+      'Expected exactly 1 <link rel="x-dart-test"> in ' + name + ', found ' +
+          testLinks.length + '.');
+  return;
+}
+
+var link = testLinks[0];
+
+if (link.href == '') {
+  sendLoadException(
+      'Expected <link rel="x-dart-test"> in ' + name + ' to have an "href" ' +
+          'attribute.');
+  return;
+}
+
+var script = document.createElement('script');
+
+// Load the compiled JS for a normal browser, and the Dart code for Dartium.
+if (navigator.userAgent.indexOf('(Dart)') === -1) {
+  script.src = link.href + '.browser_test.dart.js';
+} else {
+  script.src = link.href + '.browser_test.dart';
+  script.type = 'application/dart';
+}
+
+script.onerror = function(event) {
+  var message = "Failed to load script at " + script.src +
+      (event.message ? ": " + event.message : ".");
+  sendLoadException(message);
+}
+
+var parent = link.parentNode;
+document.currentScript = script;
+parent.replaceChild(script, link);
+
+};

build/web/packages/test/src/runner/browser/static/host.css

@@ -0,0 +1,314 @@
+/* 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. */
+
+iframe {
+  /* We would use display: none here, but then Firefox fails to properly compute
+   * styles. See #274 */
+  visibility: hidden;
+}
+
+#play {
+  display: none;
+  cursor: pointer;
+}
+
+#dark {
+  display: none;
+}
+
+.paused #play {
+  display: block;
+  z-index: 1;
+}
+
+.paused #dark {
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.paused #right-flank, .paused #right-ear, .paused #right-paw,
+.paused #left-flank,  .paused #left-ear,  .paused #left-paw {
+  -webkit-animation-play-state: paused;
+          animation-play-state: paused;
+}
+
+.debug body {
+  margin: 0;
+  padding: 0;
+}
+
+.debug iframe {
+  visibility: visible;
+  border: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* Compiled output from
+ * http://codepen.io/mknadler/pen/11b75cb014a3c382f54abf527655af21. */
+
+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;
+  }
+}

build/web/packages/test/src/runner/browser/static/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>test Browser Host</title>
+  <link rel="stylesheet" type="text/css" href="host.css" />
+</head>
+<body>
+  <svg id="dart" 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>
+  <div id="dark"></div>
+  <svg id="play" version="1.1" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 25 25">
+    <defs><filter id="blur"><feGaussianBlur stdDeviation="0.3" id="feGaussianBlur5097" /></filter></defs>
+    <path d="M 3.777014,1.3715789 A 1.1838119,1.1838119 0 0 0 2.693923,2.5488509 V 22.444746 a 1.1838119,1.1838119 0 0 0 1.765908,1.035999 l 17.235259,-9.95972 a 1.1838119,1.1838119 0 0 0 0,-2.071998 L 4.459831,1.5128519 A 1.1838119,1.1838119 0 0 0 3.777014,1.3715789 z" style="opacity:0.5;stroke:#000000;stroke-width:1;filter:url(#blur)" />
+    <path style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.32722104" d="M 3.4770491,1.0714664 A 1.1838119,1.1838119 0 0 0 2.3939589,2.2487382 V 22.144633 a 1.1838119,1.1838119 0 0 0 1.7659079,1.035999 l 17.2352602,-9.95972 a 1.1838119,1.1838119 0 0 0 0,-2.071998 L 4.1598668,1.2127389 A 1.1838119,1.1838119 0 0 0 3.4770491,1.0714664 z" />
+  </svg>
+  <script src="host.dart.js"></script>
+</body>
+</html>