<!DOCTYPE html>
<html>
	<head>
		<title>list.addCssRule tests</title>
		<style>
.box {
	padding: 8px;
	margin: 2px;
	float: left;
}
		</style>
	</head>
	<body>
		<p>Click a box to remove its unique style.</p>
		<div id="container"></div>
		<script src="../../dojo/dojo.js" data-dojo-config="async:1"></script>
		<script>
require(["dgrid/List", "put-selector/put", "dojo/on", "dojo/query"], function(List, put, on){
	var
		addRule = List.prototype.addCssRule,
		container = byId("container"),
		rules = {}, sheet, i;
	
	function byId(id){ return document.getElementById(id); }
	
	for(i = 1; i <= 20; i++){
		put(container, "div#box" + i + ".box");
		rules["box" + i] = addRule("#box" + i, "background-color: rgb(" +
			Math.floor(Math.random() * 256) + "," +
			Math.floor(Math.random() * 256) + "," +
			Math.floor(Math.random() * 256) +	");");
	}
	
	on(container, ".box:click", function(evt){
		rules[evt.target.id].remove();
	});
})
		</script>
	</body>
</html>
Add test for List's addCssRule method.
Add test for List's addCssRule method.

This test demonstrates an issue with the remove method hung off of
the return values of addCssRule - the remove method references
the rule's index at the time it is added to the stylesheet.  Thus,
if an earlier rule is removed before remove is called for this rule,
the wrong rule will be removed, since the CSSRuleList was since spliced.

It also demonstrates that we missed an IE < 9 compat issue -
stylesheets have no deleteRule method in IE < 9, but they have removeRule.
