blob: 512c3abe57a4a266764bc20851601e373cf4195e [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: rgb(255, 255, 255);
color: #444;
font-size: 40px;
}
#title {
font-size: 60px;
}
.white {
color: #fff;
}
markup {
color: #444;
font-size: 40px;
}
</style>
<script type="text/javascript">
SELECTORS = [
'div',
'div',
'div+div',
'.foo',
'div.foo',
'.foo, #another-id',
'div+div.foo',
'.foo.foo',
'.foo.bar',
'#title',
'div#title',
'div.foo#title, div'
];
COLORS = [
"#0048ab",
"#5E00af",
"#f10026",
"#ff9F00",
"#fff400",
"#3bdb00",
];
function addRule(selector, color) {
var rule = selector + ' { color: ' + color + ' }';
var styleSheet = document.styleSheets.item(0);
styleSheet.insertRule(rule, styleSheet.cssRules.length);
var p = document.createElement('p');
p.appendChild(document.createTextNode(selector + ' { color: '));
var span = document.createElement('span');
span.textContent = color;
span.style.color = color;
p.appendChild(span);
p.appendChild(document.createTextNode(' }'));
document.body.appendChild(p);
}
function keyDownArrow() {
if (currentSelector + 1 < SELECTORS.length) {
currentSelector++;
addRule(SELECTORS[currentSelector],
COLORS[currentSelector % COLORS.length]);
}
}
var currentSelector = 0;
document.addEventListener('load', function() {
currentSelector = -1;
});
document.addEventListener('keydown', function(event) {
if (event.keyCode == 40) { // Down arrow
keyDownArrow();
}
});
</script>
</head>
<body>
<div>
<markup>&lt;div&gt;</markup><markup>&lt;/div&gt;</markup>
</div>
<div id="title" class="foo bar">
<markup>&lt;div id="title" class="foo bar"&gt;</markup>
Hello, Cobalt!
<markup>&lt;/div&gt;</markup>
</div>
<p class="white">|</p>
<p>__________________________________________________________</p>
<p class="white">|</p>
</body>
</html>