Added filter for specifications

LeaVerou · Jan 2, 2022 · 165df5b · 165df5b
1 parent 7786f3c
commit 165df5b
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 64 deletions.
diff --git a/csstest.js b/csstest.js
@@ -7,6 +7,9 @@ var ele = function (name) {
 	return document.getElementById(name);
 }
 
+// Send to Browserscope
+const testKey = 'agt1YS1wcm9maWxlcnINCxIEVGVzdBidzawNDA';
+
 Score.prototype = {
 	update: function (data) {
 		if (!data.total) { return; }
@@ -401,6 +404,87 @@ function passclass(info) {
 	return classes[index];
 }
 
+function resetOutput() {
+	mainScore = new Score();
+	_bTestResults = {};
+
+	// 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;
+	let duration = 0;
+
+	let removedWords = / *(?:\([^)]*\)|:.*|\b(?:CSS|Module)\b)( *)/g;
+
+	for (let spec in Specs) {
+		// Filter list of specifications
+		if (filter === 'stable' && Specs[spec]?.status?.stability !== 'stable') {
+			continue;
+		} else if (Number(filter) > 0) {
+			if (Specs[spec]?.status?.['first-snapshot'] === undefined) {
+				continue;
+			}
+
+			const snapshot = Number(filter);
+			if (
+				Specs[spec].status['first-snapshot'] > snapshot ||
+				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);
+	});
+
+	specs.forEach(spec => {
+		// Run tests
+		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;
+	});
+
+	// Display time taken
+	ele('timeTaken').textContent = +new Date - timeBefore + 'ms';
+
+	_bTestResults['Overall'] = mainScore.percent();
+
+	$.create({
+		tag: 'script',
+		src: '//www.browserscope.org/user/beacon/' + testKey,
+		inside: $('head')
+	});
+}
+
 Array.prototype.and = function (arr2, separator) {
 	separator = separator || ' ';
 
@@ -447,68 +531,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';
-
-			// Send to Browserscope
-			var testKey = 'agt1YS1wcm9maWxlcnINCxIEVGVzdBidzawNDA';
-
-			_bTestResults['Overall'] = mainScore.percent();
-
-			$.create({
-				tag: 'script',
-				src: '//www.browserscope.org/user/beacon/' + testKey,
-				inside: $('head')
-			});
-		}
-	})();
-
-
-
-
+	ele('filter').value = localStorage.getItem('filter') || '';
+	runTests(localStorage.getItem('filter') || '');
 }
diff --git a/filter.js b/filter.js
@@ -0,0 +1,7 @@
+(function() {
+    ele('filter').addEventListener('change', evt => {
+        localStorage.setItem('filter', evt.target.value);
+        resetOutput();
+        runTests(evt.target.value);
+    });
+})();
diff --git a/index.html b/index.html
@@ -35,6 +35,25 @@ <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>
+				<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 +81,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>