macbre/compare.js

## 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);
});


## 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

## 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>

## phantomjs.png

      
    Raw
  

              phantomjs.png
            
          
## phantomjs2.png

      
    Raw
  

              phantomjs2.png
            
          
## phantomjs25.png

      
    Raw
  

              phantomjs25.png
            
          
## results.md

      
    Raw
  

              results.md
            
          
    phantomjs


Version: 1.9.8

User agent:                 Mozilla/5.0 (Unknown; Linux x86_64) AppleWebKit/534.34 (KHTML, like Gecko) PhantomJS/1.9.8 Safari/534.34

Mutation Observer API:      no
Performance Timing API:     no
Performance Navigation API: no
Resource Timing API:        no
requestAnimationFrame:      no
Video API:                  no
WebP:                       no

phantomjs2


Version: 2.0.1

User agent:                 Mozilla/5.0 (Unknown; Linux x86_64) AppleWebKit/538.1 (KHTML, like Gecko) PhantomJS/2.0.1 Safari/538.1

Mutation Observer API:      yes
Performance Timing API:     yes
Performance Navigation API: yes
Resource Timing API:        no
requestAnimationFrame:      yes
Video API:                  no
WebP:                       no

phantomjs2.5


Version: 2.5.0-development

User agent:                 Mozilla/5.0 (Unknown; Linux x86_64) AppleWebKit/602.1 (KHTML, like Gecko) PhantomJS/2.5.0-development Version/9.0 Safari/602.1

Mutation Observer API:      yes
Performance Timing API:     yes
Performance Navigation API: yes
Resource Timing API:        no
requestAnimationFrame:      yes
Video API:                  no
WebP:                       yes

slimerjs


Version: Innophi SlimerJS 0.9.6, Copyright 2012-2015 Laurent Jouanneau & Innophi

User agent:                 Mozilla/5.0 (X11; Linux x86_64; rv:38.0) Gecko/20100101 SlimerJS/0.9.6

Mutation Observer API:      yes
Performance Timing API:     yes
Performance Navigation API: yes
Resource Timing API:        yes
requestAnimationFrame:      yes
Video API:                  yes
WebP:                       no

HeadlessChrome via puppeteer

User agent:                 phantomas/2.0.0-beta (HeadlessChrome/72.0.3626.81)
Mutation Observer API:      yes
Performance Timing API:     yes
Performance Navigation API: yes
Resource Timing API:        yes
requestAnimationFrame:      yes
Video API:                  yes
WebP:                       yes


## slimerjs.png

      
    Raw
  

              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>