Theme: Improve .qunit-test.fail
and expected/actual diff colors
#1803
+45
−46
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.
Based on https://qunitjs.com/resources/example-fail.html
Follows-up #1774, to finish up remaining issues with poor color contrast.
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 cover the assertion "message", "diff", and "source" lines as well.
Easy way to identify color usage: