Green the garden-o-matic unittests.

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 54 matching lines @@
         '<div id="results" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>');
 
     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() {
     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,
-        '<table class="comparison">' +
-            '<thead>' +
-                '<tr>' +
-                    '<th>Expected</th>' +
-                    '<th>Actual</th>' +
-                    '<th>Diff</th>' +
-                '</tr>' +
-            '</thead>' +
-            '<tbody>' +
-                '<tr>' +
-                    '<td class="expected result-container"><img class="image-result" src="http://example.com/layout-test-results/foo-bar-expected.png"></td>' +
-                    '<td class="actual result-container"><img class="image-result" src="http://example.com/layout-test-results/foo-bar-actual.png"></td>' +
-                    '<td class="diff result-container"><img class="image-result" src="http://example.com/layout-test-results/foo-bar-diff.png"></td>' +
-                '</tr>' +
-            '</tbody>' +
-        '</table>' +
-        '<table class="comparison">' +
-            '<thead>' +
-                '<tr>' +
-                    '<th>Expected</th>' +
-                    '<th>Actual</th>' +
-                    '<th>Diff</th>' +
-                '</tr>' +
-            '</thead>' +
-            '<tbody>' +
-                '<tr>' +
-                    '<td class="expected result-container"></td>' +
-                    '<td class="actual result-container"></td>' +
-                    '<td class="diff result-container"><iframe class="text-result" src="http://example.com/layout-test-results/foo-bar-diff.txt"></iframe></td>' +
-                '</tr>' +
-            '</tbody>' +
-        '</table>');
+        '<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>');
 });
 
 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>');
 });
 
 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();
     var id = statusArea.newId();
     statusArea.addMessage(id, 'First Message');
     statusArea.addMessage(id, 'Second Message');
     equal(statusArea.outerHTML,
         '<div class="status processing" style="visibility: visible;">' +
+            '<div class="dragger"></div>' +
+            '<div class="contents">' +
+                '<div id="status-content-1" class="status-content">' +
+                    '<div class="message">First Message</div>' +
+                    '<div class="message">Second Message</div>' +
+                '</div>' +
+            '</div>' +
             '<ul class="actions"><li><button class="action">Close</button></li></ul>' +
             '<progress class="process-text">Processing...</progress>' +
-            '<div id="status-content-1" class="status-content">' +
-                '<div class="message">First Message</div>' +
-                '<div class="message">Second Message</div>' +
-            '</div>' +
         '</div>');
 
     var secondStatusArea = new ui.StatusArea();
     var secondId = secondStatusArea.newId();
     secondStatusArea.addMessage(secondId, 'First Message second id');
 
     equal(statusArea.outerHTML,
         '<div class="status processing" style="visibility: visible;">' +
+            '<div class="dragger"></div>' +
+            '<div class="contents">' +
+                '<div id="status-content-1" class="status-content">' +
+                    '<div class="message">First Message</div>' +
+                    '<div class="message">Second Message</div>' +
+                '</div>' +
+                '<div id="status-content-2" class="status-content">' +
+                    '<div class="message">First Message second id</div>' +
+                '</div>' +
+            '</div>' +
             '<ul class="actions"><li><button class="action">Close</button></li></ul>' +
             '<progress class="process-text">Processing...</progress>' +
-            '<div id="status-content-1" class="status-content">' +
-                '<div class="message">First Message</div>' +
-                '<div class="message">Second Message</div>' +
-            '</div>' +
-            '<div id="status-content-2" class="status-content">' +
-                '<div class="message">First Message second id</div>' +
-            '</div>' +
         '</div>');
 
     statusArea.addFinalMessage(id, 'Final Message 1');
     statusArea.addFinalMessage(secondId, 'Final Message 2');
 
     equal(statusArea.outerHTML,
         '<div class="status" style="visibility: visible;">' +
+            '<div class="dragger"></div>' +
+            '<div class="contents">' +
+                '<div id="status-content-1" class="status-content">' +
+                    '<div class="message">First Message</div>' +
+                    '<div class="message">Second Message</div>' +
+                    '<div class="message">Final Message 1</div>' +
+                '</div>' +
+                '<div id="status-content-2" class="status-content">' +
+                    '<div class="message">First Message second id</div>' +
+                    '<div class="message">Final Message 2</div>' +
+                '</div>' +
+            '</div>' +
             '<ul class="actions"><li><button class="action">Close</button></li></ul>' +
             '<progress class="process-text">Processing...</progress>' +
-            '<div id="status-content-1" class="status-content">' +
-                '<div class="message">First Message</div>' +
-                '<div class="message">Second Message</div>' +
-                '<div class="message">Final Message 1</div>' +
-            '</div>' +
-            '<div id="status-content-2" class="status-content">' +
-                '<div class="message">First Message second id</div>' +
-                '<div class="message">Final Message 2</div>' +
-            '</div>' +
         '</div>');
 
     statusArea.close();
 });
 
 var openTreeJson = {
     "username": "erg@chromium.org",
     "date": "2013-10-14 20:22:00.887390",
     "message": "Tree is open",
     "can_commit_freely": true,
@@ skipping 191 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();
     });
 });
 
 })();