HTML Reporter: headers fixed, tests scrollable

[BryanCrotaz]

CSS change to keep test headers fixed at the top and make test results scrollable. Much improved dev experience.

Fixes #1512

[bertdeblock]

Nice! This has been bugging me as well. Though it seems that QUnit follows jQuery's browser support policy, which still includes IE9+ among others. I'm not 100% sure, but I'm guessing CSS features like calc, vw, vh and flex related styles might cause issues for older browsers?

[BryanCrotaz]

How many developers use qunit in IE9? I could understand if it was going out to the public but this is for devs.

[bertdeblock]

Maybe there are still teams out there that run their tests in older browsers as part of their CI/CD flow? It seems there have been CSS adjustments in the past to fix issues, so it doesn't seem that far-fetched to me that adding new styles should take into account the browser support policy. I could be wrong of course and if so, I apologise in advance. I'm sure someone of the QUnit team can confirm. Thanks for the fix anyways, will really improve the DX 👍.

[BryanCrotaz]

removed flexbox, vh and calc. Not responsive to header height any more. Suggest that flexbox is reinstated once the requirement to support IE9 is removed.

[BryanCrotaz]

I have signed the licence but it says I haven't...

[BryanCrotaz]

run their tests in older browsers as part of their CI/CD flow

Ah yes of course

[smcclure15]

I can't stress enough how UX-friendly of a fix this is - I can certainly commiserate. Thanks for contributing!

The hardcoded pixel values are going to be hard to remain robust and flexible. I gave it bash with different window widths, and some get pretty due to the different line-wrapping:

[BryanCrotaz]

The hardcoded pixel values are going to be hard to remain robust and flexible

Absolutely - that's why I'd like to use flexbox. Frankly if someone is using this in CI in IE9 they don't care about the UX, only the results. Can we use flexbox and have a fallback to the old behaviour?

[Krinkle]

I like this a lot!

Would it be possible to achieve this in a way that we only add styles to our own qunit- elements? In particular, styling the body element tends to cause test failures for integration tests that may temporarily render a UI component in a fixture or at the end of the body.

[BryanCrotaz]

Would it be possible to achieve this

Yes. See new commit.

[BryanCrotaz]

The hardcoded pixel values are going to be hard to remain robust and flexible

I think that the best solution is flexbox - it will fall back to the current layout in IE9 - that's not broken, it's just not better.

[BryanCrotaz]

Here's the final version - does nothing if flexbox isn't supported, so has no effect on old browsers using @supports.

[Krinkle]

Noticed two issues when trying this out in the qunitjs.com demo.

Before	After

1. The pass/fail banner gets reduced to 1px due to it having no content and thus the default flex shrinking behaviour reduces its height. Technically scrollable, but not useful.
2. At short viewports, the scrollable area can be below the fold and thus unreachable (<360px), but even if it's somewhere between 360 and 500, it is still relatively difficult to read and scroll.

Perhaps we could wrap these rules in a media query for min-height: 500px. The banner issue could be addressed by something like #qunit-banner { flex: 5px 0 0; }

[BryanCrotaz]

@Krinkle good spot, fixed

[BryanCrotaz]

Test failure seems unrelated to the changes

[Krinkle]

• Used tabs for consistency with the rest of the file.
• Restored relation between Font Family and Sizes comment and its related code.

[Krinkle]

@BryanCrotaz This is good to go, but for the CLA signature pending.

[BryanCrotaz]

@BryanCrotaz This is good to go, but for the CLA signature pending.

I've signed it but it still says it's pending. When I click on the pending notice it takes me to the form and says I've already signed it. Where do I go from here?

[Krinkle]

Looks good now. Not sure what it was... Thank you!