Skip to content

Commit ef73ecb

Browse files
KrinkleKrinkle
authored
Theme: Improve .qunit-test.fail and expected/actual diff colors
* 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.
1 parent 27655d7 commit ef73ecb

3 files changed

Lines changed: 92 additions & 47 deletions

File tree

‎demos/qunit-fail.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>QUnit</title>
6+
<link rel="stylesheet" href="../src/core/qunit.css">
7+
</head>
8+
<body>
9+
<div id="qunit"></div>
10+
<script src="../qunit/qunit.js"></script>
11+
<script>
12+
QUnit.config.collapse = false;
13+
QUnit.test('apple', function (assert) {
14+
assert.true(true, 'stem');
15+
assert.true(true, 'skin');
16+
});
17+
QUnit.test('banana', function (assert) {
18+
assert.true(true, 'foo');
19+
var sentence = 'This is actual.';
20+
assert.equal(sentence, 'This is expected.', 'example sentence');
21+
assert.true(true, 'bar');
22+
assert.true(true, 'baz');
23+
});
24+
QUnit.test('sauerkraut', function (assert) {
25+
assert.true(true, 'acid rock');
26+
assert.true(true, 'kraut rock');
27+
});
28+
QUnit.test.todo('Käsesuppe', function (assert) {
29+
assert.true(true, 'foo');
30+
var sentence = 'This is actual.';
31+
assert.equal(sentence, 'This is expected.', 'example sentence');
32+
assert.true(true, 'bar');
33+
assert.true(true, 'baz');
34+
});
35+
QUnit.test('dampfnudel', function (assert) {
36+
assert.true(true, 'stream');
37+
assert.true(true, 'bun');
38+
});
39+
QUnit.test.skip('Kassler');
40+
QUnit.test('pumpernickel', function (assert) {
41+
assert.true(true, 'stream');
42+
assert.true(true, 'bun');
43+
});
44+
</script>
45+
</body>
46+
</html>

‎src/core/qunit.css‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ body {
4949
padding: 13px;
5050

5151
color: #C2CCD1;
52-
background-color: #0D3349;
52+
background-color: #1C1E24;
5353

5454
display: flex;
5555
flex-flow: row wrap;
@@ -91,11 +91,11 @@ body {
9191
}
9292
#qunit-banner.qunit-pass {
9393
background-image: none;
94-
background-color: #C6E746;
94+
background-color: #64CF06;
9595
}
9696
#qunit-banner.qunit-fail {
9797
background-image: none;
98-
background-color: #EE5757;
98+
background-color: #EC4242;
9999
}
100100

101101
#qunit-toolbar {
@@ -227,7 +227,7 @@ body {
227227
border: 1px solid #AAA;
228228
border-top-color: transparent;
229229
border-radius: 0 0 .25em .25em;
230-
color: #0D3349;
230+
color: #333;
231231
background-color: #F5F5F5;
232232
z-index: 99;
233233
max-height: min(80vh, 700px);
@@ -264,11 +264,9 @@ body {
264264
#qunit-modulefilter-dropdown-list .clickable.checked {
265265
font-weight: bold;
266266
background-color: #E2F0F7;
267-
color: #0D3349;
268267
}
269268
#qunit-modulefilter-dropdown .clickable:hover {
270269
background-color: #FFF;
271-
color: #444;
272270
}
273271

274272
/** Test Result */
@@ -309,7 +307,11 @@ body {
309307
display: none;
310308
}
311309

312-
.qunit-test:not(.skipped) .qunit-test-name {
310+
/**
311+
* Clicking test name toggles `.qunit-assert-list` and `.qunit-source`.
312+
* Note that skipped tests only have `.qunit-source`.
313+
*/
314+
.qunit-test .qunit-test-name {
313315
cursor: pointer;
314316
}
315317

@@ -323,7 +325,7 @@ body {
323325
}
324326
.qunit-test a:hover,
325327
.qunit-test a:focus {
326-
color: #0D3349;
328+
color: #333;
327329
}
328330

329331
.qunit-test .runtime {
@@ -334,9 +336,9 @@ body {
334336

335337
.qunit-assert-list {
336338
margin-top: 0.5em;
337-
padding: 0.5em;
338339

339340
background-color: #FFF;
341+
color: #333;
340342
}
341343

342344
.qunit-collapsed {
@@ -348,52 +350,48 @@ body {
348350
}
349351

350352
.qunit-assert-list li {
351-
padding: 5px;
352-
background-color: #FFF;
353+
padding: 0.5em 5px;
353354
border-bottom: none;
354355
list-style-position: inside;
355356
}
356357

357358
.qunit-assert-list table {
358-
border-collapse: collapse;
359-
margin-top: 0.2em;
359+
border-spacing: 0.5em;
360360
}
361361

362362
.qunit-assert-list th {
363363
text-align: right;
364364
vertical-align: top;
365-
padding: 0 0.5em 0 0;
366365
}
367366

368367
.qunit-assert-listt td {
369368
vertical-align: top;
370369
}
371370

372371
.qunit-assert-list pre {
373-
margin: 0;
374372
white-space: pre-wrap;
375373
word-wrap: break-word;
376374
}
377375

378376
.qunit-assert-list del {
379-
color: #374E0C;
380-
background-color: #E0F2BE;
377+
color: #00740E;
378+
background-color: #D9F9E3;
381379
text-decoration: none;
382380
}
383381

384382
.qunit-assert-list ins {
385-
color: #500;
386-
background-color: #FFCACA;
383+
color: #710909;
384+
background-color: #FFD8E1;
387385
text-decoration: none;
388386
}
389387

390388
/** Test output: Counts */
391389

392390
.qunit-test .counts {
393-
color: #0D3349;
391+
color: #333;
394392
}
395393
.qunit-test .passed {
396-
color: #5E740B;
394+
color: #00740E;
397395
}
398396
.qunit-test .failed {
399397
color: #710909;
@@ -411,33 +409,34 @@ body {
411409
}
412410

413411
.qunit-assert-list .pass {
414-
color: #3C510C;
415-
background-color: #FFF;
416-
border-left: 10px solid #C6E746;
412+
border-left: 10px solid #64CF06;
417413
}
418414

419-
.qunit-test.pass .test-actual,
420-
.qunit-test.pass .test-expected { color: #999; }
421-
415+
.qunit-test.pass .qunit-assert-list .fail,
416+
.qunit-test.pass .qunit-assert-list .fail .test-actual,
417+
.qunit-test.pass .qunit-assert-list .fail .test-expected,
418+
.qunit-test.pass .qunit-assert-list .fail .test-diff,
419+
.qunit-test.pass .qunit-assert-list .fail .test-source {
420+
color: #366097;
421+
}
422422

423423
/** Test output: Failing */
424424

425425
.qunit-test.fail {
426426
color: #000;
427-
background-color: #EE5757;
427+
background-color: #FFD8E1;
428428
}
429429

430430
.qunit-assert-list .fail {
431431
color: #710909;
432-
background-color: #FFF;
433-
border-left: 10px solid #EE5757;
432+
border-left: 10px solid #EC4242;
434433
white-space: pre;
435434
}
436435
.qunit-assert-list .fail .test-actual {
437-
color: #EE5757;
436+
color: #EC4242;
438437
}
439438
.qunit-assert-list .fail .test-expected {
440-
color: #008000;
439+
color: #00740E;
441440
}
442441

443442
/** Test output: Aborted */
@@ -450,22 +449,23 @@ body {
450449
/** Test output: Skipped */
451450

452451
.qunit-test.skipped {
453-
background-color: #EBECE9;
452+
background-color: #EEE;
454453
}
455454

456455
.qunit-test .qunit-todo-label,
457456
.qunit-test .qunit-skipped-label {
458457
background-color: #F4FF77;
459458
display: inline-block;
460459
font-style: normal;
461-
color: #366097;
462-
line-height: 1.8em;
463-
padding: 0 0.5em;
464-
margin: -0.4em 0 -0.4em 0;
460+
color: #333;
461+
/* Match and consume the 0.4em padding-top/bottom from `.qunit-test` */
462+
padding: 0.4em 0.5em;
463+
margin: -0.4em 0;
465464
}
466465

467466
.qunit-test .qunit-todo-label {
468-
background-color: #EEE;
467+
background-color: #2F68DA;
468+
color: #FFF;
469469
}
470470

471471
/** Fixture */

‎src/core/reporters/HtmlReporter.js‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -980,11 +980,6 @@ export default class HtmlReporter {
980980
}
981981
}
982982
}
983-
if (status !== 'skipped') {
984-
DOM.on(testTitle, 'click', function () {
985-
DOM.toggleClass(assertList, 'qunit-collapsed');
986-
});
987-
}
988983

989984
let good = details.passed;
990985
let bad = details.failed;
@@ -999,14 +994,18 @@ export default class HtmlReporter {
999994
if (status === 'skipped') {
1000995
DOM.addClass(testItem, 'skipped');
1001996

1002-
let skipped = document.createElement('em');
1003-
skipped.className = 'qunit-skipped-label';
1004-
skipped.textContent = 'skipped';
1005-
testItem.insertBefore(skipped, testTitle);
997+
const skippedLabel = document.createElement('em');
998+
skippedLabel.className = 'qunit-skipped-label';
999+
skippedLabel.textContent = 'skipped';
1000+
testItem.insertBefore(skippedLabel, testTitle);
10061001
testItem.insertBefore(document.createTextNode(' '), testTitle);
10071002
} else {
10081003
DOM.addClass(testItem, testPassed ? 'pass' : 'fail');
10091004

1005+
DOM.on(testTitle, 'click', function () {
1006+
DOM.toggleClass(assertList, 'qunit-collapsed');
1007+
});
1008+
10101009
if (details.todo) {
10111010
// Add label both for status=todo (passing) and for status=failed on a todo test.
10121011
DOM.addClass(testItem, 'todo');

0 commit comments

Comments
 (0)