Skip to content

Commit

Permalink
HTML Reporter: QUnit 3.0 theme structure and layout
Browse files Browse the repository at this point in the history
Notable design changes:

* Edge to edge design.
  Remove body margin (browser default), remove rounded corners.

* Progress bar.
  The qunit-banner was previously blank until it turns green/red.
  Test execution is now animated with a blue progress bar.

* Adopt system-ui fonts, remove any text shadows.

* Sticky header reduced to toolbar.
  Re-implemented using `position: sticky`, to create a normal
  page-level scrollbar instead of a scrollable area. The rest of the
  page naturally flows under it. This fixes various layout quirks,
  with custom elements no longer squished or pushed outside the viewport.
  This is similar to how things rendered prior to QUnit 2.14.

  The sticky part now excludes the page title and user agent,
  making more optimal use of vertical space.

* Move "Abort" button to the left.

  This previously floated in a somewhat-random position on the right.
  The toolbar now occupies the same height during the "running" and
  "completed" state, avoiding a visible layout shift.

* Remove 2px offset hack from checkboxes to make them vertically aligned.

Other changes:

* `#qunit-userAgent` is now DIV rather than H2,
  placed above #qunit-testrunner-toolbar instead of below it.
* `#qunit-toolbar` now parents `#qunit-banner`, `#qunit-testresult`,
  and `#qunit-filteredTest`.
* `#qunit-header` now parents `H1` and `#qunit-userAgent`.
* The `#qunit-modulefilter-actions` buttons are now ordered in a more
  natural way in the DOM. Previously, the order was reversed, with
  the default theme using float: right to reverse them.
  To achieve right-aligned buttons like before, one could set
  `text-align: right` on `.qunit-modulefilter-actions`.
* The `.qunit-skipped-label` and `.qunit-todo-label` elements, which
  are palced before TODO/SKIP test titles, now include a space between
  the label and the test title. This means the word "skipped" and the
  first word of the test title no longer get presented semantically
  as one word with intra-word styling (e.g. to a screen reader, or
  when copying selected text). This also removes the need for
  margin-right hack in the theme.

Fixed bug:
* Assertion counts the parentheses of `#qunit-test` items were
  double-bolded, and on failing tests the numbers were tripple-bolded.
  In browsers/fonts that support "bolder" (e.g. Firefox) this resulted
  in an ever-wider font. Changed `<b>` to `<span>` given they are
  already inside a `<strong>`.

Closes #1774.
  • Loading branch information
Krinkle committed Jul 10, 2024
1 parent abd4220 commit d689d28
Show file tree
Hide file tree
Showing 4 changed files with 327 additions and 408 deletions.
14 changes: 9 additions & 5 deletions docs/browser.md
Original file line number Diff line number Diff line change
Expand Up @@ -202,11 +202,15 @@ QUnit 1.x, 2.x:

```html
<div id="qunit">
<h1 id="qunit-header">…</h1>
<div id="qunit-banner"></div>
<div id="qunit-testrunner-toolbar">…</div>
<h2 id="qunit-userAgent">…</h2>
<div id="qunit-testresult">…</div>
<div id="qunit-header">
<h1>…</h1>
<div id="qunit-userAgent">…</div>
</div>
<div id="qunit-toolbar">
<div id="qunit-banner"></div>
<div id="qunit-testrunner-toolbar"></div>
<div id="qunit-testresult"></div>
</div>
<ol id="qunit-tests"></ol>
</div>
```
Expand Down
Loading

0 comments on commit d689d28

Please sign in to comment.