macbre · February 2, 2019 10:53
diff --git a/compare.js b/compare.js
 var webpage = require('webpage'),
 	page = webpage.create(),
 	fs = require('fs'),
 	args = require('system').args;

 var engine = args[1];

 // @see http://phantomjs.org/api/webpage/handler/on-console-message.html
 page.onConsoleMessage = function(msg) {
 	console.log(msg);
 };

 page.open('file://' + fs.absolute('page.html'), function (status) {
 	if (status !== 'success') {
 		console.log('Error!');
 		return;
 	}

 	setTimeout(function() {
 		page.render(engine + '.png');
 		phantom.exit();
 	}, 500);
 });

diff --git a/compare.sh b/compare.sh
 #!/bin/bash
 for browser in phantomjs phantomjs2 slimerjs
 do
 	echo "## $browser"
 	echo "> Version: `$browser --version`"

 	echo -e "\n\`\`\`"
 	$browser compare.js $browser
 	echo -e "\`\`\`\n"
 done
diff --git a/page.html b/page.html
 <head>
 	<style>
 		@import url(http://fonts.googleapis.com/css?family=Noticia+Text&subset=latin,latin-ext);

 		body {
 			background: #fff;
 			font-family: 'Noticia Text',serif;
 		}

 		h1 {
 			font-size: 3em;
 			font-weight: normal;
 			letter-spacing: -3px;
 		}
 	</style>
 </head>

 <body>
 	<h1>Web font test</h1>

 	<p>foo bar</p>

 	<script>
 		console.log('User agent:                 ' + navigator.userAgent + "\n");

 		console.log('Mutation Observer API:      ' + ('MutationObserver' in window ? 'yes' : 'no'));

 		// @see http://www.w3.org/TR/navigation-timing/#sec-navigation-timing-interface
 		console.log('Performance Timing API:     ' + (window.performance && window.performance.timing instanceof PerformanceTiming ? 'yes' : 'no'));
 		// @see http://www.w3.org/TR/navigation-timing/#sec-navigation-info-interface
 		console.log('Performance Navigation API: ' + (window.performance && window.performance.navigation instanceof PerformanceNavigation ? 'yes' : 'no'));
 		// @see http://www.w3.org/TR/resource-timing/#resource-timing
 		console.log('Resource Timing API:        ' + (window.performance && typeof window.performance.getEntriesByName === 'function' ? 'yes' : 'no'));
 		console.log('requestAnimationFrame:      ' + (typeof window.requestAnimationFrame === 'function' ? 'yes' : 'no'));
 		console.log('Video API:                  ' + (typeof window.HTMLVideoElement !== 'undefined' ? 'yes' : 'no'));

 		// @see http://stackoverflow.com/a/5573422
 		var webP = new Image();
 		webP.src = 'data:image/webp;' +
 			'base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
 	
 		webP.onload = webP.onerror = function () {
 			var browserSupportsWebP = webP.height === 2;
 			console.log('WebP:                       ' + (browserSupportsWebP ? 'yes' : 'no'));	
 		};
 	</script>
 </body>
diff --git a/phantomjs.png b/phantomjs.png
diff --git a/phantomjs2.png b/phantomjs2.png
diff --git a/phantomjs25.png b/phantomjs25.png
diff --git a/results.md b/results.md
diff --git a/slimerjs.png b/slimerjs.png
	var webpage = require('webpage'),
	page = webpage.create(),
	fs = require('fs'),
	args = require('system').args;

	var engine = args[1];

	// @see http://phantomjs.org/api/webpage/handler/on-console-message.html
	page.onConsoleMessage = function(msg) {
	console.log(msg);
	};

	page.open('file://' + fs.absolute('page.html'), function (status) {
	if (status !== 'success') {
	console.log('Error!');
	return;
	}

	setTimeout(function() {
	page.render(engine + '.png');
	phantom.exit();
	}, 500);
	});
	#!/bin/bash
	for browser in phantomjs phantomjs2 slimerjs
	do
	echo "## $browser"
	echo "> Version: `$browser --version`"

	echo -e "\n\`\`\`"
	$browser compare.js $browser
	echo -e "\`\`\`\n"
	done
	<head>
	<style>
	@import url(http://fonts.googleapis.com/css?family=Noticia+Text&subset=latin,latin-ext);

	body {
	background: #fff;
	font-family: 'Noticia Text',serif;
	}

	h1 {
	font-size: 3em;
	font-weight: normal;
	letter-spacing: -3px;
	}
	</style>
	</head>

	<body>
	<h1>Web font test</h1>

	<p>foo bar</p>

	<script>
	console.log('User agent: ' + navigator.userAgent + "\n");

	console.log('Mutation Observer API: ' + ('MutationObserver' in window ? 'yes' : 'no'));

	// @see http://www.w3.org/TR/navigation-timing/#sec-navigation-timing-interface
	console.log('Performance Timing API: ' + (window.performance && window.performance.timing instanceof PerformanceTiming ? 'yes' : 'no'));
	// @see http://www.w3.org/TR/navigation-timing/#sec-navigation-info-interface
	console.log('Performance Navigation API: ' + (window.performance && window.performance.navigation instanceof PerformanceNavigation ? 'yes' : 'no'));
	// @see http://www.w3.org/TR/resource-timing/#resource-timing
	console.log('Resource Timing API: ' + (window.performance && typeof window.performance.getEntriesByName === 'function' ? 'yes' : 'no'));
	console.log('requestAnimationFrame: ' + (typeof window.requestAnimationFrame === 'function' ? 'yes' : 'no'));
	console.log('Video API: ' + (typeof window.HTMLVideoElement !== 'undefined' ? 'yes' : 'no'));

	// @see http://stackoverflow.com/a/5573422
	var webP = new Image();
	webP.src = 'data:image/webp;' +
	'base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';

	webP.onload = webP.onerror = function () {
	var browserSupportsWebP = webP.height === 2;
	console.log('WebP: ' + (browserSupportsWebP ? 'yes' : 'no'));
	};
	</script>
	</body>