Port first garden-o-matic component over to polymer

Tools/GardeningServer/scripts/ui_unittests.js

 /*
  * Copyright (C) 2011 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
  *    notice, this list of conditions and the following disclaimer in the
@@ skipping 55 matching lines @@
 
     onebar.select('expected');
     equal(window.location.hash, '#expected');
     onebar.select('unexpected');
     equal(window.location.hash, '#unexpected');
 
     $(onebar).detach();
 });
 
 // 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',
         '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',
     ]);
-    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() {
     var grid = new ui.results.ResultsGrid()
     grid.addResults([]);
     equal(grid.innerHTML, 'No results to display.');
 });
 
 test("StatusArea", 3, function() {
     var statusArea = new ui.StatusArea();
@@ skipping 256 matching lines @@
                     '</table>' +
                 '</details>' +
                 ', trunk is at <a href="http://src.chromium.org/viewvc/blink?view=rev&amp;revision=555">555</a>' +
                 '<br>' +
                 'Last roll is to <a href="http://src.chromium.org/viewvc/blink?view=rev&amp;revision=440">440</a><span class="critical">(115 revisions behind)</span>, current autoroll <a href="https://codereview.chromium.org/1000">440:550</a>');
         start();
     });
 });
 
 })();