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..e5a108da45c6ba0a16a8ba23048596e3c68fc7a3 100644
--- a/Tools/GardeningServer/scripts/ui_unittests.js
+++ b/Tools/GardeningServer/scripts/ui_unittests.js
@@ -73,7 +73,7 @@ test("ui.onebar", 3, function() {
 });
 
 // FIXME: These three results.* tests should be moved ot ui/results_unittests.js.
-test("results.ResultsGrid", 1, function() {
+test("results.ResultsGrid", 5, function() {
     var grid = new ui.results.ResultsGrid()
     grid.addResults([
         'http://example.com/layout-test-results/foo-bar-diff.txt',
@@ -81,49 +81,28 @@ test("results.ResultsGrid", 1, function() {
         'http://example.com/layout-test-results/foo-bar-actual.png',
         'http://example.com/layout-test-results/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>');
+
+    var comparisons = grid.querySelectorAll('results-comparison');
+    equal(comparisons.length, 2);
+
+    equal(comparisons[0].type, 'text');
+    deepEqual(comparisons[0].urlsByKind, {
+        "diff": "http://example.com/layout-test-results/foo-bar-diff.txt"
+    });
+
+    equal(comparisons[1].type, 'image');
+    deepEqual(comparisons[1].urlsByKind, {
+        "expected": "http://example.com/layout-test-results/foo-bar-expected.png",
+        "actual": "http://example.com/layout-test-results/foo-bar-actual.png",
+        "diff": "http://example.com/layout-test-results/foo-bar-diff.png"
+    });
 });
 
 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() {