Implement quantum ink splashes

sky/examples/stocks/stock.sky

 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 -->
+<import src="/sky/framework/material-element.sky" />
 <import src="/sky/framework/sky-element.sky" />
 <import src="stock-arrow.sky" />
 
 <sky-element>
 <template>
   <style>
   :host {
     // TODO(eseidel): Why does setting height here make this too big?
     // height: 48px;
     max-height: 48px;
@@ skipping 23 matching lines @@
   </style>
   <stock-arrow id="arrow" />
   <div id="ticker" />
   <div id="last-sale" />
   <div id="change" />
 </template>
 <script>
 import "dart:sky";
 
 @Tagname('stock')
-class Stock extends SkyElement {
+class Stock extends MaterialElement {
   var model; // model.Stock
 
   void shadowRootReady() {
     shadowRoot.getElementById('ticker').textContent = model.symbol;
 
     Element lastSale = shadowRoot.getElementById('last-sale');
     lastSale.textContent = "\$${model.lastSale.toStringAsFixed(2)}";
 
     Element change = shadowRoot.getElementById('change');
     String changeString = "${model.percentChange.toStringAsFixed(2)}%";
     if (model.percentChange > 0)
       changeString = "+" + changeString;
     change.textContent = changeString;
 
     StockArrow arrow = shadowRoot.getElementById('arrow');
     arrow.change = model.percentChange;
   }
 }
 
 _init(script) => register(script, Stock);
 </script>
 </sky-element>