HTML Reporter: Use a fixed header with scrollable tests

The QUnit header and status summary are now fixed at the top using flexbox,
with the tests scrollable within their own area.

If the browser doesn't support flexbox, or if the window is relatively short,
then we render it the same as before with the header scrolling off the screen.

This only applies to the `#qunit` element. The fixture and body element remain
outside and unaffected.

Closes #1513.

src/qunit.css

@@ -38,6 +38,33 @@
 }
 
 
+/** Fixed headers with scrollable tests */
+
+@supports (display: flex) or (display: -webkit-box) {
+	@media (min-height: 500px) {
+		#qunit {
+			position: fixed;
+			left: 0px;
+			right: 0px;
+			top: 0px;
+			bottom: 0px;
+			padding: 8px;
+			display: -webkit-box;
+			display: flex;
+			flex-direction: column;
+		}
+
+		#qunit-tests {
+			overflow: scroll;
+		}
+
+		#qunit-banner {
+			flex: 5px 0 0;
+		}
+	}
+}
+
+
 /** Header (excluding toolbar) */
 
 #qunit-header {