GH-38: Fixed sorting by the results bar.

Better rendering of narrow components of the status bar.
randomizedtesting · Jan 2, 2012 · 078e46a · 078e46a
1 parent be9b312
commit 078e46a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/report/css/style.css b/report/css/style.css
@@ -253,10 +253,9 @@ h1 {
 
 .statusbar {
   list-style: none;
-  overflow: hidden;
-  margin: 0;
+  margin: 10px 0 0;
   padding: 0;
-  margin-top: 10px;
+  position: relative;
 }
 #summary > .statusbar {
   width: 30%;
@@ -268,8 +267,9 @@ td > .statusbar {
 }
 
 .statusbar > li {
-  float: left;
+  position: absolute;
   height: 10px;
+  min-width: 1px;
 }
 .statusbar > li:first-child {
   border-top-left-radius: 2px;
@@ -320,6 +320,13 @@ th.count {
 th.result {
   width: 7em;
 }
+td.result {
+  padding-top: 0 !important;
+}
+th.result > span {
+  font-size: 13px;
+  color: #000;
+}
 th.status {
   width: 5em;
 }
@@ -338,10 +345,6 @@ th.pass, th.ignored, th.error, th.failed {
 td.numeric {
   text-align: right;
 }
-th.result > span {
-  font-size: 13px;
-  color: #000;
-}
 
 
 #results > table > tbody > tr:nth-child(odd) > td {

diff --git a/report/js/script.js b/report/js/script.js
@@ -27,7 +27,7 @@
         sortable: true,
         sorting: function(a, b) {
           for (var i = 0; i < statusOrder.length; i++) {
-            var s = statusOrder[i];
+            var s = statusOrder[statusOrder.length - i];
             if ((a.statuses[s] || 0) != (b.statuses[s] || 0)) {
               return (b.statuses[s] || 0) - (a.statuses[s] || 0);
             }
@@ -368,16 +368,20 @@
   function statusbar(counts, total) {
     var html = [];
     html.push("<ul class='statusbar'>");
+    var left = 0;
     for (var i = 0; i < statusOrder.length; i++) {
       var status = statusOrder[i];
       var count = counts[status];
       if (count > 0) {
-        html.push(tmpl("<li class='#{status}' style='width: #{pct}%' title='#{count} #{label}'></li>", {
+        var width = (100 * count) / total;
+        html.push(tmpl("<li class='#{status}' style='width: #{pct}%; left: #{left}%' title='#{count} #{label}'></li>", {
           status: status,
           label: statusLabels[status],
-          pct: (100 * count) / total,
-          count: count
+          pct: width,
+          count: count,
+          left: left
         }));
+        left += width;
       }
     }
     html.push("</ul>");