subpixel antialiasing stress test

dabblet.css

/* subpixel antialiasing stress test */

* { margin:0; padding:0 }

li {
	display: block;
  	font: 100 2.6em/1.4 Helvetica Neue;
  	background-color: #fff;
}
li:nth-child(2) {
  	background-color: transparent;
}
li:nth-child(3) {
  	background-color: transparent;
  	-webkit-transform: translateZ(0);
}
li:nth-child(4) {
  	background-color: #fff;	 
  	-webkit-transform: translateZ(0);
}

dabblet.html

<li>opaque background
<li>transparent background
<li>transparent background with hardware acceleration
<li>opaque background with hardware acceleration

<!--
NOTE:
--------------------
This is broken in dabblet. Run this in a file and you'll
see the text on transparent background with hardware
acceleration loses its subpixel rendering.

Though weirdly only in safari?
-->

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}