Port first garden-o-matic component over to polymer

Tools/GardeningServer/scripts/ui_unittests.js

Index: Tools/GardeningServer/scripts/ui_unittests.js
diff --git a/Tools/GardeningServer/scripts/ui_unittests.js b/Tools/GardeningServer/scripts/ui_unittests.js
index 3e785d2c8fcb286541eb8a04ff75bc348f3bed3b..44d9d0925a551f3492ac67116f12145dea5d2b7a 100644
--- a/Tools/GardeningServer/scripts/ui_unittests.js
+++ b/Tools/GardeningServer/scripts/ui_unittests.js
@@ -76,54 +76,25 @@ test("ui.onebar", 3, function() {
 test("results.ResultsGrid", 1, function() {
     var grid = new ui.results.ResultsGrid()
     grid.addResults([
-        'http://example.com/layout-test-results/foo-bar-diff.txt',
-        'http://example.com/layout-test-results/foo-bar-expected.png',
-        'http://example.com/layout-test-results/foo-bar-actual.png',
-        'http://example.com/layout-test-results/foo-bar-diff.png',
+        'http://example.com/foo-bar-diff.txt',
+        'http://example.com/foo-bar-expected.png',
+        'http://example.com/foo-bar-actual.png',
+        'http://example.com/foo-bar-diff.png',
     ]);
     equal(grid.innerHTML,
-        '<div class="comparison">' +
-            '<div>' +
-                '<h2>Expected</h2>' +
-                '<div class="results-container expected">' +
-                    '<img class="image-result" src="http://example.com/layout-test-results/foo-bar-expected.png">' +
-                '</div>' +
-            '</div>' +
-            '<div>' +
-                '<h2>Actual</h2>' +
-                '<div class="results-container actual">' +
-                    '<img class="image-result" src="http://example.com/layout-test-results/foo-bar-actual.png">' +
-                '</div>' +
-            '</div>' +
-            '<div>' +
-                '<h2>Diff</h2>' +
-                '<div class="results-container diff">' +
-                    '<img class="image-result" src="http://example.com/layout-test-results/foo-bar-diff.png">' +
-                '</div>' +
-            '</div>' +
-        '</div>' +
-        '<div class="comparison">' +
-            '<div>' +
-                '<h2>Expected</h2>' +
-                '<div class="results-container expected"></div>' +
-            '</div>' +
-            '<div>' +
-                '<h2>Actual</h2>' +
-                '<div class="results-container actual"></div>' +
-            '</div>' +
-            '<div>' +
-                '<h2>Diff</h2>' +
-                '<div class="results-container diff">' +
-                    '<iframe class="text-result" src="http://example.com/layout-test-results/foo-bar-diff.txt"></iframe>' +
-                '</div>' +
-            '</div>' +
-        '</div>');
+        '<ct-results-comparison type="text" ' +
+            'diffurl="http://example.com/foo-bar-diff.txt"></ct-results-comparison>' +
+        '<ct-results-comparison type="image" ' +
+            'actualurl="http://example.com/foo-bar-actual.png" ' +
+            'expectedurl="http://example.com/foo-bar-expected.png" ' +
+            'diffurl="http://example.com/foo-bar-diff.png"></ct-results-comparison>');
 });
 
 test("results.ResultsGrid (crashlog)", 1, function() {
     var grid = new ui.results.ResultsGrid()
     grid.addResults(['http://example.com/layout-test-results/foo-bar-crash-log.txt']);
-    equal(grid.innerHTML, '<iframe class="text-result" src="http://example.com/layout-test-results/foo-bar-crash-log.txt"></iframe>');
+    equal(grid.innerHTML, '<iframe src="http://example.com/layout-test-results/foo-bar-crash-log.txt" '+
+        'style="border: 0px; width: 100%; height: 400px;"></iframe>');
 });
 
 test("results.ResultsGrid (empty)", 1, function() {