Merge the Sky Engine changes from the SkyDart branch

sky/tests/framework/flights-app-pixels.sky

Index: sky/tests/framework/flights-app-pixels.sky
diff --git a/sky/tests/framework/flights-app-pixels.sky b/sky/tests/framework/flights-app-pixels.sky
index 3580417f6062de183cc9ac4a1ea4167eb06406fa..1eec0ee7eded90c061168c1da104027b291d5a5e 100644
--- a/sky/tests/framework/flights-app-pixels.sky
+++ b/sky/tests/framework/flights-app-pixels.sky
@@ -1,32 +1,338 @@
-<sky>
-  <import src="../resources/run-after-display.sky" as="runAfterDisplay" />
-  <import src="/sky/examples/flights-app/flights-app.sky" />
+<app>
+  <import src="../resources/run-after-display.sky" />
+  <style>
+    * { box-sizing: border-box; }
+
+    t, span {
+      display: inline;
+    }
+
+    app {
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+      background-color: #494949;
+      font-family: "Helvetica", sans-serif;
+      font-size: 16px;
+      color: #2B2B2B;
+    }
+
+    app-header {
+      display: flex;
+      background: linear-gradient(#3E77B7, #6C98C4);
+      padding: 8px;
+      color: white;
+      border-bottom: 1px solid #3E77B7;
+    }
+
+    app-title {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      font-size: 22px;
+      margin-left: 8px;
+    }
+
+    app-menu-button {
+      display: flex;
+      border-radius: 4px;
+      justify-content: center;
+      align-items: center;
+      width: 30px;
+      height: 30px;
+    }
+
+    .menu-icon {
+      width: 18px;
+    }
+
+    .menu-icon-inner {
+      width: 14px;
+    }
+
+    app-scrollable {
+      flex: 1;
+      box-shadow: inset 0px 0px 22px 2px rgba(22, 22, 22, 0.63);
+      overflow: hidden;
+    }
+
+    app-panel {
+      display: flex;
+      flex-direction: column;
+      background-color: white;
+    }
+
+    app-panel-header {
+      background-color: #DEDEDE;
+      padding: 8px;
+      display: flex;
+      align-items: center;
+    }
+
+    app-panel-content {
+      display: flex;
+    }
+
+    app-toolbar {
+      background-color: #F6F6F6;
+      padding: 0 8px;
+    }
+
+    app-search-input {
+      background-color: #F6F6F6;
+      padding: 4px;
+      display: flex;
+      align-items: center;
+      font-size: 1.2em;
+    }
+
+    app-toast {
+      position: absolute;
+      bottom: 32px;
+      right: 32px;
+      max-width: 55%;
+      box-shadow: 0px 0px 12px 2px rgba(22, 22, 22, 0.4);
+      background-image: linear-gradient(#E5D658, #DFCF43);
+      border: 1px solid #AEA477;
+      padding: 6px;
+      border-radius: 2px;
+      display: flex;
+      align-items: center;
+      font-size: 0.8em;
+      overflow: hidden;
+    }
+
+    app-toast-header {
+      flex-shrink: 0;
+      margin-right: 6px;
+    }
+
+    app-toast-close-box {
+      position: absolute;
+      top: 3px;
+      right: 3px;
+      width: 1em;
+      overflow: hidden;
+      text-align: center;
+      outline: 1px solid #AEA477;
+    }
+
+    .tip-icon {
+      font-weight: bold;
+      font-size: 24px;
+      border-radius: 16px;
+      width: 32px;
+      height: 32px;
+      border: 2px solid black;
+      line-height: 30px;
+      text-align: center;
+    }
+
+    .tip-price {
+      font-weight: bold;
+    }
+
+    .input-text {
+      margin-left: 8px;
+    }
+
+    .route-result {
+      margin: 16px 16px 0 16px;
+      outline: 1px solid black;
+    }
+
+    .route-title {
+      flex: 1;
+    }
+
+    .airline {
+      border-radius: 2px;
+      align-items: center;
+      padding: 8px;
+    }
+
+    .airline-name {
+      flex: 1;
+    }
+
+    .airline-logo-image {
+      width: 50px;
+      flex-shrink: 0;
+    }
+
+    .airline-best-price {
+      color: #ABB4B6;
+    }
+
+    .airline-name,
+    .airline-best-price {
+      padding: 8px;
+    }
+
+    a {
+      text-decoration: none;
+      color: #1155CC;
+    }
+  </style>
+  <app-header>
+    <app-title>
+      <t>Search</t>
+    </app-title>
+    <app-menu-button>
+      <img src="/sky/examples/flights/images/menu-white.png" class="menu-icon">
+    </app-menu-button>
+  </app-header>
+  <app-toolbar>
+    <app-search-input>
+      <span class="input-icon">
+        <img src="/sky/examples/flights/images/magnifying-glass.png" style="width: 16px">
+      </span>
+      <span class="input-text"><t>flights today to dc by price</t></span>
+    </app-search-input>
+  </app-toolbar>
+  <app-scrollable>
+    <app-panel class="route-result">
+      <app-panel-header>
+        <div class="route-title">
+          <t>SFO to DCA</t>
+        </div>
+        <app-menu-button>
+          <img src="/sky/examples/flights/images/menu-enabled.png" class="menu-icon-inner">
+        </app-menu-button>
+      </app-panel-header>
+      <app-panel-content class="airline">
+        <div class="airline-logo">
+          <img class="airline-logo-image" src="/sky/examples/flights/images/virgin-america.jpg">
+        </div>
+        <div class="airline-name">
+          <t>Virgin America</t>
+        </div>
+        <div class="airline-best-price">
+          <t><a>$800</a></t>
+        </div>
+      </app-panel-content>
+      <app-panel-content class="airline">
+        <div class="airline-logo">
+          <img class="airline-logo-image" src="/sky/examples/flights/images/ba.jpg">
+        </div>
+        <div class="airline-name">
+          <t>British Airways</t>
+        </div>
+        <div class="airline-best-price">
+          <t><a>$700</a></t>
+        </div>
+      </app-panel-content>
+      <app-panel-content class="airline">
+        <div class="airline-logo">
+          <img class="airline-logo-image" src="/sky/examples/flights/images/united.jpg">
+        </div>
+        <div class="airline-name">
+          <t>United</t>
+        </div>
+        <div class="airline-best-price">
+          <t><a>$667</a></t>
+        </div>
+      </app-panel-content>
+      <app-panel-content class="airline">
+        <div class="airline-logo">
+          <img class="airline-logo-image" src="/sky/examples/flights/images/delta.jpg">
+        </div>
+        <div class="airline-name">
+          <t>Delta</t>
+        </div>
+        <div class="airline-best-price">
+          <t><a>$450</a></t>
+        </div>
+      </app-panel-content>
+    </app-panel>
+    <app-panel class="route-result">
+      <app-panel-header>
+        <div class="route-title">
+          <t>SJC to DCA</t>
+        </div>
+        <app-menu-button>
+          <img src="/sky/examples/flights/images/menu-enabled.png" class="menu-icon-inner">
+        </app-menu-button>
+      </app-panel-header>
+      <app-panel-content class="airline">
+        <div class="airline-logo">
+          <img class="airline-logo-image" src="/sky/examples/flights/images/virgin-america.jpg">
+        </div>
+        <div class="airline-name">
+          <t>Virgin America</t>
+        </div>
+        <div class="airline-best-price">
+          <t><a>$1500</a></t>
+        </div>
+      </app-panel-content>
+      <app-panel-content class="airline">
+        <div class="airline-logo">
+          <img class="airline-logo-image" src="/sky/examples/flights/images/jetblue.jpg">
+        </div>
+        <div class="airline-name">
+          <t>jetBlue</t>
+        </div>
+        <div class="airline-best-price">
+          <t><a>$650</a></t>
+        </div>
+      </app-panel-content>
+      <app-panel-content class="airline">
+        <div class="airline-logo">
+          <img class="airline-logo-image" src="/sky/examples/flights/images/united.jpg">
+        </div>
+        <div class="airline-name">
+          <t>United</t>
+        </div>
+        <div class="airline-best-price">
+          <t><a>$367</a></t>
+        </div>
+      </app-panel-content>
+    </app-panel>
+  </app-scrollable>
+  <app-toast>
+    <app-toast-header>
+      <div class="tip-icon">
+        <t>?</t>
+      </div>
+    </app-toast-header>
+    <app-toast-content>
+      <t>Flights are <span class="tip-price">$200</span> cheaper tomorrow.</t>
+    </app-toast-content>
+    <app-toast-close-box>
+      X
+    </app-toast-close-box>
+  </app-toast>
   <script>
+  import "dart:sky";
+  import "dart:sky.internals" as internals;
+  import "dart:async";
+
   var app;
 
-  function imagesLoaded() {
-    var images = app.shadowRoot.querySelectorAll('img');
+  bool imagesLoaded() {
+    var images = window.document.querySelectorAll('img');
     for (var i = 0; i < images.length; i++) {
-      if (!images[i].complete)
+      if (!images.item(i).complete)
         return false;
     }
     return true;
   }
 
-  function checkImagesLoaded() {
+  void checkImagesLoaded() {
     if (!imagesLoaded()) {
-      setTimeout(checkImagesLoaded, 10);
+      new Timer(new Duration(seconds:10), checkImagesLoaded);
       return;
     }
-    runAfterDisplay(function() {
+    runAfterDisplay(() {
       internals.notifyTestComplete("");
     });
   }
-
-  addEventListener("load", function() {
-    app = document.createElement("flights-app");
-    document.querySelector("sky").appendChild(app);
-    checkImagesLoaded();
-  });
+  void main() {
+    window.addEventListener("load", (_) {
+      var input = document.querySelector('.input-text');
+      window.getSelection().selectAllChildren(input.firstChild);
+      checkImagesLoaded();
+    });
+  }
   </script>
-</sky>
+</app>