Add css to have dl/dt/dd show as numbered list for testcases

Bug #1039158 reported by Pasi Lallinaho
8
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Ubuntu QA Website
Fix Released
Wishlist
Unassigned

Bug Description

Currently, the normal testcase format [1] suggests users should use nested ordered lists. There is a few problems with the current format though:
1) The markup is not clean; it's quite laborious to read the markup, even if you do that much
2) The markup is invalid; there can never be anything else inside an <ol> than <li>

Even with 2 fixed, 1 stays, even more so. The valid markup would be:
<ol>
<li title="action">Perform X action
<ol><li title="expected_result">Expect Y result</li></ol>
</li><!-- ends "action" li! -->
<li title="action">Perform A action
<ol><li title="expected_result">Expect B and C result</li></ol>
</li><!-- ends "action" li! -->
</ol>

My proposed solution is to use definition lists. While some might argue it's semantically a little less correct, it's correct whatsoever. The valid markup with definition lists would be:
<dl>
<dt>Perform X action</dt>
<dd>Expect Y result</dd>
<dt>Perform A action</dt>
<dd>Expect B and C result</dd>
<dl>

Notice the difference in readability! Also, if we'd use definition lists, we could simply point to dt and dd instead of the classes "action" and "expected_result" too, both simplifying the CSS code as well as definitely cleaning up the markup.

If one wants, they can split expected results to multiple elements too. Simply:
<dl>
<dt>Perform A action</dt>
<dd>Expect B result</dd>
<dd>Expect C result</dd>
</dl>

What about numbering then? We can simply use the internal counters CSS offers us, see article [2], and a simple example found in the article [3] - even nested counters [4] are doable. This does rely on the pseudo-selector :before to be working, but it should do in all modern browsers. Even if it doesn't the list is still readable though.

Naturally, this change needs some CSS code added, but it would greatly improve the current situation. Especially managing the testcases would be easier, since the code would be much more readable.

[1] https://wiki.ubuntu.com/Testing/TestCaseFormat
[2] http://www.css-zibaldone.com/articles/counters/csscounters.html
[3] http://www.css-zibaldone.com/articles/counters/examples/listing3.html
[4] http://www.css-zibaldone.com/articles/counters/examples/listing7.html

Revision history for this message
Nicholas Skaggs (nskaggs) wrote :

I am in support of this idea, if possible. Stephane if we went this route, I would like to convert the current testcases over to this format.. It shouldn't be too difficult provided we can regex find/replace the testcase text via some sql magic :-) For the moment, I am leaving everything alone so as to not make the conversion anymore difficult. This includes the improper syntax (which otherwise is rendered properly by modern browsers) which is the template default.

Revision history for this message
Stéphane Graber (stgraber) wrote :

Marking bug as invalid as these tags are already allowed by Drupal, if you want to use them, just use them :)

Changed in ubuntu-qa-website:
status: New → Invalid
Revision history for this message
Stéphane Graber (stgraber) wrote :

If the theme doesn't support them, then it's a bit of a bigger problem as we're using a stock theme. I can override the css in the module but doing that is usually bad as it may not work with all themes.

Revision history for this message
Pasi Lallinaho (knome) wrote :

The tags are allowed, and we are able to use the proposed markup. However, we'd need some new CSS code to enable numbering (if that is definitely needed anyway).

Revision history for this message
Pasi Lallinaho (knome) wrote :

Numbering for definition lists, that is.

I'm certain this isn't enabled anywhere by default, since it's not expected that definition lists always have numbering. A module-specific fix should work for this, especially if you target the fix to some wrapping div (like div#testcase_description, or whatever exists). I'm relatively certain not a lot of themes or other modules touch dt/dd:before.

Changed in ubuntu-qa-website:
status: Invalid → Triaged
importance: Undecided → Wishlist
summary: - Enhance testcase formats
+ Add css to have dl/dt/dd show as numbered list for testcases
Revision history for this message
Pasi Lallinaho (knome) wrote :

In addition to the CSS change, can we have some automation to batch-process the current testcases to the new, desired format?

Revision history for this message
Pasi Lallinaho (knome) wrote :

Proposed CSS additions attached.

Revision history for this message
Stéphane Graber (stgraber) wrote :

Pushed to the branch.

Changed in ubuntu-qa-website:
status: Triaged → Fix Committed
Pasi Lallinaho (knome)
Changed in ubuntu-qa-website:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.