Green the garden-o-matic unittests.

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 72b84bbbb5bb2ebddcb27f87ad9cba949c1c13d4..3e785d2c8fcb286541eb8a04ff75bc348f3bed3b 100644
--- a/Tools/GardeningServer/scripts/ui_unittests.js
+++ b/Tools/GardeningServer/scripts/ui_unittests.js
@@ -72,6 +72,7 @@ test("ui.onebar", 3, function() {
     $(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([
@@ -81,38 +82,42 @@ test("results.ResultsGrid", 1, function() {
         '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() {
@@ -134,12 +139,15 @@ test("StatusArea", 3, function() {
     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();
@@ -148,15 +156,18 @@ test("StatusArea", 3, function() {
 
     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');
@@ -164,17 +175,20 @@ test("StatusArea", 3, function() {
 
     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();