Put every test group on the same column grid

The subsystems are separate tables, so each sized its own columns from
its own content and no two lined up. Reading down the page meant reading
down six different layouts, which is what made it look busy. They now
share one colgroup and a fixed table layout: Kind, Status, Last result
and the Start button are the same width in every group, and the Test
column takes the remainder.

Two things had to come out of the columns first, because both are long
enough to stretch a cell and drag one group's grid out of step with the
rest. The details block moves to a full-width row of its own, where the
prose and the operator steps have room and opening one no longer widens
the Test column. The requires note moves from under the Start button to
under Status, which is sized for it: the catalog's longest names three
prerequisites in 73 characters, and beneath a button it wrapped into a
ragged stack. It reads better there anyway, next to the reason the test
is required rather than beneath the control it disables.

Also gives a test's description its own block in the details. Without
operator steps to separate them it ran straight into the Requires line.

forgetest/tests/test_responsiveness.py

@@ -18,6 +18,7 @@ holds the shape of that rule.
 """
 import json
 import os
+import re
 import shutil
 import tempfile
 import unittest
@@ -191,6 +192,40 @@ class PageTests(unittest.TestCase):
             self.assertNotIn("id='" + bid + "-", html)
         self.assertIn("function renderQueue()", html)
 
+    def test_every_group_is_built_on_the_same_grid(self):
+        """The subsystems are separate tables. Left to size themselves
+        from their own content no two line up, which is what made the
+        page look busy, so they share one colgroup and a fixed layout."""
+        html = page.render("0" * 32)
+        self.assertIn("#groups table{table-layout:fixed", html)
+        # one colgroup definition, emitted into every group's table
+        self.assertEqual(html.count('var COLS="<colgroup>'), 1)
+        self.assertEqual(html.count('<table>"+COLS+"'), 1,
+                         "a group table built without the shared colgroup")
+        colgroup = re.search(r'var COLS="(.*?)";', html).group(1)
+        heads = ["Test", "Kind", "Status", "Last result"]
+        for h in heads:
+            self.assertIn("<th>%s</th>" % h, html)
+        self.assertEqual(len(re.findall(r"<col(?:>| )", colgroup)), len(heads) + 1,
+                         "a column per header, the action column included")
+        # every fixed column carries a width, or the grid is only a wish
+        for cls in re.findall(r"<col class='(\w)'", colgroup):
+            self.assertRegex(html, r"#groups col\.%s\{width:\d+px\}" % cls)
+
+    def test_details_and_the_requires_note_stay_out_of_the_columns(self):
+        """Both are long enough to stretch a cell. In a column they would
+        pull one group's grid out of step with the rest: the details get a
+        full-width row, and the note sits under Status, which is sized for
+        it."""
+        html = page.render("0" * 32)
+        self.assertIn("<tr class='detrow'><td colspan='5'>", html)
+        # the status cell carries the status, the unmet note and the row
+        # message; the action cell carries the button and nothing else
+        self.assertIn("<td><div id='st-\"+d+\"'></div><div id='unmet-\"+d+"
+                      "\"'></div><div id='note-\"+d+\"'></div></td>", html)
+        self.assertIn("<td><button class='pri' id='btn-\"+d+\"' "
+                      "onclick='startTest(\\\"\"+d+\"\\\")'>Start</button></td>", html)
+
     def test_page_is_self_contained_ascii(self):
         html = page.render("0" * 32)
         self.assertNotIn("__TOKEN__", html)