Port first garden-o-matic component over to polymer

Tools/GardeningServer/ui/ct-results-comparison.html

Index: Tools/GardeningServer/ui/ct-results-comparison.html
diff --git a/Tools/GardeningServer/ui/ct-results-comparison.html b/Tools/GardeningServer/ui/ct-results-comparison.html
new file mode 100644
index 0000000000000000000000000000000000000000..91d7adcd0297bcbfb5e833b58c03b324b39b8865
--- /dev/null
+++ b/Tools/GardeningServer/ui/ct-results-comparison.html
@@ -0,0 +1,65 @@
+<!--
+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="ct-results-comparison" attributes="type expectedUrl actualUrl diffUrl">
+    <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>
+
+        <template repeat="{{resultKind in _resultKinds}}">
+            <div class="container">
+                <h2>{{resultKind}}</h2>
+                <div class="result">
+                    <template if="{{type == _kImageType && _urlForKind(resultKind)}}">
+                        <img src="{{_urlForKind(resultKind)}}">
+                    </template>
+                    <template if="{{type == _kTextType && _urlForKind(resultKind)}}">
+                        <iframe src="{{_urlForKind(resultKind)}}"></iframe>
+                    </template>
+                    <template if="{{type == _kAudioType && _urlForKind(resultKind)}}">
+                        <audio controls src="{{_urlForKind(resultKind)}}"></audio>
+                    </template>
+                </div>
+            </div>
+        </template>
+    </template>
+    <script>
+        Polymer({
+            _urlForKind: function(kind) {
+                if (kind == "Expected")
+                    return this.expectedUrl;
+                if (kind == "Actual")
+                    return this.actualUrl;
+                if (kind == "Diff")
+                    return this.diffUrl;
+            },
+            _kAudioType: results.kAudioType,
+            _kImageType: results.kImageType,
+            _kTextType: results.kTextType,
+            _resultKinds: ["Expected",  "Actual",  "Diff"],
+        });
+    </script>
+</polymer-element>