Port first garden-o-matic component over to polymer

Tools/GardeningServer/ui/results-comparison.html

Index: Tools/GardeningServer/ui/results-comparison.html
diff --git a/Tools/GardeningServer/ui/results-comparison.html b/Tools/GardeningServer/ui/results-comparison.html
new file mode 100644
index 0000000000000000000000000000000000000000..6017fef4ddcd6a6fe99400a76d567c0a9ce918cf
--- /dev/null
+++ b/Tools/GardeningServer/ui/results-comparison.html
@@ -0,0 +1,88 @@
+<!--
+Copyright 2014 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.
+-->
+
+ <polymer-element name="results-comparison" attributes="type urlsByKind">
+    <template>
+        <style>
+            :host {
+                display: flex;
+                flex-wrap: wrap;
+                width: 100%;
+            }
+            .container {
+                flex: 1;
+                min-width: 300px;
+            }
+            .result {
+                border: 1px solid gray;
+            }
+            iframe {
+                border: none;
+                width: 100%;
+                height: 400px;
+            }
+            img {
+                width: 100%;
+            }
+        </style>
+
+        <div class="container">
+            <h2>Expected</h2>
+            <div id="expected" class="result"></div>
+        </div>
+
+        <div class="container">
+            <h2>Actual</h2>
+            <div id="actual" class="result"></div>
+        </div>
+
+        <div class="container">
+            <h2>Diff</h2>
+            <div id="diff" class="result"></div>
+        </div>
+    </template>
+    <script>
+        Polymer("results-comparison", {
+            type: "",
+            urlsByKind: null,
+
+            _update: function() {
+                if (!this.type || !this.urlsByKind)
+                    return;
+
+                for (var kind in this.urlsByKind) {
+                    var container = this.$[kind];
+                    if (!container)
+                        throw new Error('Passed in an invalid comparison kind: ' + kind);
+
+                    var result;
+                    if (this.type == results.kImageType) {
+                        result = document.createElement('img');
+                    } else if (this.type == results.kAudioType) {
+                        result = document.createElement('audio');
+                        result.controls = 'controls';
+                    } else {
+                        result = document.createElement('iframe');
+                    }
+
+                    result.src = this.urlsByKind[kind];
+                    result.classList.add(kind);
+
+                    container.innerHTML = '';
+                    container.appendChild(result);
+                }
+            },
+
+            typeChanged: function(oldValue, newValue) {
+                this._update();
+            },
+
+            urlsByKindChanged: function(oldValue, newValue) {
+                this._update();
+            },
+        });
+    </script>
+</polymer-element>