Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
HTML Reporter: QUnit 3.0 theme structure and layout
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