HTML Reporter: QUnit 3.0 theme structure and layout #1774
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@IgnaceMaes I'd value your feedback on this, as author of qunit-theme-ember! For this PR, I'm focussing on the structure and layout. After this, I'm also interested in giving QUnit a new paint job for the QUnit 3.0 release. Possibly similar to qunit-theme-ember, or perhaps based on the colors of https://qunitjs.com. Thoughts, questions, concerns, and ideas are most welcome! |
Krinkle
changed the title
Should the UA string be in the same darkened style? 
|
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 qunitjs#1774.
Krinkle
added a commit
to Krinkle/qunit
that referenced
this pull request
Dec 8, 2024
* Fix huge color contrast issue with the dark red background behind similarly dark colors, especially in `.counts`. * Remove white padding between test item edge and assert list assertion green/red shading. Instead, add some border-spacing to the assert item table. * Adjust various colors slightly to comply with WCAG guidelines. https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast Ref qunitjs#1774.
Krinkle
added a commit
to Krinkle/qunit
that referenced
this pull request
Dec 8, 2024
* Fix huge color contrast issue with the dark red background behind similarly dark colors, especially in `.counts`. * Remove white padding between test item edge and assert list assertion green/red shading. Instead, add some border-spacing to the assert item table. * Adjust various colors slightly to comply with WCAG guidelines. https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast * Fix broken `.qunit-test.pass .test-expected { color: qunitjs#999; }` override which was only applicable to passing "todo" tests as no other passing tests have failing assertions under them. This was meant to mute the colors of these failures to avoid distraction. However the CSS cascade has changed over time such that these styles no longer applied. This is likely masked by the fact that passing tests (including passing todos) are collapsed by default, so there's very little attention to these anyway. Restore these overrides, and extend them to the "diff" and "source" lines as well. Easy way to identify color usage: ``` $ git grep '#[0-9A-F][0-9A-F]*' src/core/qunit.css | sed 's/^.*\(#[0-9A-F]*\).*/\1/' | sort | uniq -c ``` Ref qunitjs#1774.
Krinkle
added a commit
to Krinkle/qunit
that referenced
this pull request
Dec 18, 2024
* Fix huge color contrast issue with the dark red background behind similarly dark colors, especially in `.counts`. * Remove white padding between test item edge and assert list assertion green/red shading. Instead, add some border-spacing to the assert item table. * Adjust various colors slightly to comply with WCAG guidelines. https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast * Fix broken `.qunit-test.pass .test-expected { color: qunitjs#999; }` override which was only applicable to passing "todo" tests as no other passing tests have failing assertions under them. This was meant to mute the colors of these failures to avoid distraction. However the CSS cascade has changed over time such that these styles no longer applied. This is likely masked by the fact that passing tests (including passing todos) are collapsed by default, so there's very little attention to these anyway. Restore these overrides, and extend them to the "diff" and "source" lines as well. Easy way to identify color usage: ``` $ git grep '#[0-9A-F][0-9A-F]*' src/core/qunit.css | sed 's/^.*\(#[0-9A-F]*\).*/\1/' | sort | uniq -c ``` Ref qunitjs#1774.
Krinkle
added a commit
that referenced
this pull request
Dec 21, 2024
* Fix huge color contrast issue with the dark red background behind similarly dark colors, especially in `.counts`. * Remove white padding between test item edge and assert list assertion green/red shading. Instead, add some border-spacing to the assert item table. * Adjust various colors slightly to comply with WCAG guidelines. https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast * Fix broken `.qunit-test.pass .test-expected { color: #999; }` override which was only applicable to passing "todo" tests as no other passing tests have failing assertions under them. This was meant to mute the colors of these failures to avoid distraction. However the CSS cascade has changed over time such that these styles no longer applied. This is likely masked by the fact that passing tests (including passing todos) are collapsed by default, so there's very little attention to these anyway. Restore these overrides, and extend them to the "diff" and "source" lines as well. Easy way to identify color usage: ``` $ git grep '#[0-9A-F][0-9A-F]*' src/core/qunit.css | sed 's/^.*\(#[0-9A-F]*\).*/\1/' | sort | uniq -c ``` Ref #1774. Closes #1803.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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-uifonts, 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-userAgentis now DIV rather than H2, and placed above#qunit-testrunner-toolbarinstead of below it.#qunit-banner,#qunit-testresult,#qunit-filteredTestare now inside#qunit-toolbar.The
#qunit-modulefilter-actionselement is now ordered in a more natural way. Previously, the order was reversed in HTML, with the default theme usingfloat: rightto re-order them.To achieve right-aligned buttons like before, one could set
text-align: righton.qunit-modulefilter-actions.The
.qunit-skipped-labeland.qunit-todo-labelelements 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: