Added option to filter tests

csstest.js

@@ -394,6 +394,73 @@ function passclass(info) {
 	return classes[index];
 }
 
+function resetOutput() {
+	mainScore = new Score();
+
+	// Output current score
+	ele('score').textContent = '';
+	ele('passedTests').textContent = '';
+	ele('totalTests').textContent = '';
+	ele('total').textContent = '';
+	ele('specsTested').textContent = '';
+	ele('all').textContent = '';
+
+	// Display time taken
+	ele('timeTaken').textContent = '';
+}
+
+function runTests(filter = '') {
+	let specs = [];
+	let timeBefore = +new Date;
+
+	var removedWords = / *(?:\([^)]*\)|:.*|\b(?:CSS|Module)\b)( *)/g;
+
+	for (var spec in Specs) {
+		// Filter list of specifications
+		if (filter === 'stable' && Specs[spec].status && Specs[spec].status.stability !== 'stable') {
+			continue;
+		} else if (filter === 'experimental' && Specs[spec].status && Specs[spec].status.stability === 'stable') {
+			continue;
+		} else if (Number(filter) > 0) {
+			if (!Specs[spec].status || Specs[spec].status['first-snapshot'] === undefined) {
+				continue;
+			}
+
+			const snapshot = Number(filter);
+			if (
+				Specs[spec].status['first-snapshot'] > snapshot ||
+				(Specs[spec].status && Specs[spec].status['last-snapshot'] < snapshot)
+			) {
+				continue;
+			}
+		}
+
+		specs.push({
+			id: spec,
+			// Shorten the title by removing parentheticals,
+			// subheadings, CSS and Module words
+			title: Specs[spec].title.replace(removedWords, "$1").trim(),
+			tests: Specs[spec]
+		});
+	}
+
+	specs.sort(function (a, b) {
+		return a.title.localeCompare(b.title);
+	});
+
+	// Run tests
+	specs.forEach(spec => new Test(spec));
+
+	// Output score
+	ele('score').textContent = mainScore + '';
+	ele('passedTests').textContent = ~~mainScore.passedTests;
+	ele('totalTests').textContent = mainScore.totalTests;
+	ele('total').textContent = mainScore.total;
+
+	// Display time taken
+	ele('timeTaken').textContent = +new Date - timeBefore + 'ms';
+}
+
 Array.prototype.and = function (arr2, separator) {
 	separator = separator || ' ';
 
@@ -440,57 +507,6 @@ Array.prototype.times = function (min, max, separator) {
 };
 
 onload = function () {
-	var timeBefore = +new Date,
-		duration = 0,
-		specs = [];
-
-	var removedWords = / *(?:\([^)]*\)|:.*|\b(?:CSS|Module)\b)( *)/g;
-
-	for (var spec in Specs) {
-		specs.push({
-			id: spec,
-			// Shorten the title by removing parentheticals,
-			// subheadings, CSS and Module words
-			title: Specs[spec].title.replace(removedWords, "$1").trim(),
-			tests: Specs[spec]
-		});
-	}
-
-	specs.sort(function (a, b) {
-		return a.title.localeCompare(b.title);
-	});
-
-
-	(function () {
-		if (specs.length) {
-			// Get spec id
-			var spec = specs.shift();
-
-			// Run tests
-			var test = new Test(spec);
-
-			// Count test duration
-			duration += +new Date - timeBefore;
-			timeBefore = +new Date;
-
-			// Output current score
-			ele('score').textContent = mainScore + '';
-			ele('passedTests').textContent = ~~mainScore.passedTests;
-			ele('totalTests').textContent = mainScore.totalTests;
-			ele('total').textContent = mainScore.total;
-
-			// Schedule next test
-			setTimeout(arguments.callee, 50)
-		}
-		else {
-			// Done!
-
-			// Display time taken
-			ele('timeTaken').textContent = +new Date - timeBefore + 'ms';
-		}
-	})();
-
-
-
-
+	ele('filter').value = localStorage.getItem('filter') || '';
+	runTests(localStorage.getItem('filter') || '');
 }

filter.js

@@ -0,0 +1,7 @@
+(function() {
+    ele('filter').addEventListener('change', evt => {
+        localStorage.setItem('filter', evt.target.value);
+        resetOutput();
+        runTests(evt.target.value);
+    });
+})();

index.html

@@ -35,6 +35,26 @@ <h2>Determined by passing <strong id="passedTests"></strong> tests out of <stron
 		<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=css3testcom" id="_carbonads_js"></script>
 	</section>
 
+	<section>
+		<h1>Filter:</h1>
+		<form>
+			<select id="filter">
+				<option value="" title="All specifications including experimental ones">All</option>
+				<option value="stable" title="All specifications listed in the latest CSS snapshot, their predecessors and others that won't change much anymore">Stable</option>
+				<option value="experimental" title="All specifications not listed in the latest CSS snapshot">Experimental</option>
+				<optgroup label="CSS snapshots">
+					<option value="2007" title="All specifications marked as official part of the CSS 2007 snapshot">CSS 2007</option>
+					<option value="2010" title="All specifications marked as official part of the CSS 2010 snapshot">CSS 2010</option>
+					<option value="2015" title="All specifications marked as official part of the CSS 2015 snapshot">CSS 2015</option>
+					<option value="2017" title="All specifications marked as official part of the CSS 2017 snapshot">CSS 2017</option>
+					<option value="2018" title="All specifications marked as official part of the CSS 2018 snapshot">CSS 2018</option>
+					<option value="2020" title="All specifications marked as official part of the CSS 2020 snapshot">CSS 2020</option>
+					<option value="2021" title="All specifications marked as official part of the CSS 2021 snapshot">CSS 2021</option>
+				</optgroup>
+			</select>
+		</form>
+	</section>
+
 	<section>
 		<h1>Specs tested:</h1>
 		<ul id="specsTested"></ul>
@@ -62,6 +82,7 @@ <h1>Cheaters</h1>
 <script src="supports.js"></script>
 <script src="csstest.js"></script>
 <script src="tests.js"></script>
+<script src="filter.js"></script>
 
 </body>
 </html>