HTML Reporter: QUnit 3.0 theme structure and layout #1774
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This may be a breaking change for themes that rely on the default HTML as created by a
<div id="qunit">
element. The changes are fairly small but they could break certain theme layouts. If you prefer the old structure, replace<div id="qunit">
with the following instead:Notable changes:
(Design) Test execution is now animated with a progress bar in the qunit-banner.
(Design) Edge to edge design. Remove body margin (browser default), remove rounded corners.
(Design) Adopt
system-ui
fonts, remove any text shadows(Design) Sticky element is now reduced to just the toolbar. Now implemented with
position: sticky;
. This means we now have 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 extra elements no longer squished or pushed outside the viewport. This is similar to how things rendered prior to QUnit 2.14, and fixes HTML Reporter since 2.14.0 doesn't add "flowing" elements to the page #1603 (ping @smcclure15).The sticky header excludes the page title and user agent, making more optimal use of vertical space.
(Design) Move "Abort" button to the left. And make sure the toolbar display occupies the same height during the "running" and "completed" state, to avoid a visible layout shift.
(Design) Remove 2px offset hack from checkboxes to make them vertically aligned.
#qunit-userAgent
is now DIV rather than H2, and placed above#qunit-testrunner-toolbar
instead of below it.#qunit-banner
,#qunit-testresult
,#qunit-filteredTest
are now inside#qunit-toolbar
.The
#qunit-modulefilter-actions
element is now ordered in a more natural way. Previously, the order was reversed in HTML, with the default theme usingfloat: right
to re-order 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 are inserted before a TODO/SKIP test title. These now include a space in the HTML 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.
Fixes #1603.
At small screens / tiny embedded demo on the homepage, difference between 2.21.0 and
this PR3.0.0-alpha.2: