121 lines
2.9 KiB
HTML
121 lines
2.9 KiB
HTML
<!DOCTYPE>
|
|
<html>
|
|
<head>
|
|
<title>CSS3 - :nth-child()</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
<style type="text/css">
|
|
#test {
|
|
border: 1px solid black;
|
|
margin: 10px;
|
|
padding: 5px;
|
|
}
|
|
|
|
#log {
|
|
border: 1px solid black;
|
|
margin: 10px;
|
|
padding: 5px;
|
|
}
|
|
|
|
#test > *:nth-child(3n+1) {
|
|
color: rgb(255, 0, 0);
|
|
}
|
|
|
|
#test div:nth-of-type(5n+2) {
|
|
background-color: rgb(153, 153, 255);
|
|
}
|
|
|
|
#test p {
|
|
margin: 0;
|
|
margin-left: 5px;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
|
|
var wr;
|
|
function init() {
|
|
wr = document.getElementById('test');
|
|
colorSiblings(false);
|
|
test();
|
|
}
|
|
|
|
var els = ['div','p'];
|
|
var index = false;
|
|
|
|
function log(m) {
|
|
var logDiv = document.getElementById('log');
|
|
logDiv.innerHTML += m + '<br>';
|
|
}
|
|
|
|
function addElement() {
|
|
index = !index;
|
|
var li = document.createElement(els[index*1]);
|
|
wr.insertBefore(li, wr.firstChild);
|
|
colorSiblings(true);
|
|
}
|
|
|
|
function colorSiblings(testColors) {
|
|
var testEls = wr.childNodes;
|
|
var n = 0;
|
|
for (var i = 0; i < testEls.length; i += 1) {
|
|
var type = testEls[i].nodeName;
|
|
var color = '';
|
|
var expectedColor = 'rgb(0, 0, 0)';
|
|
if ((i + 1) === (n * 3 + 1)) {
|
|
color = ' red text ';
|
|
expectedColor = 'rgb(255, 0, 0)';
|
|
n += 1;
|
|
}
|
|
if (testColors) {
|
|
var computedColor = window.getComputedStyle(testEls[i]).color;
|
|
var message;
|
|
if (computedColor != expectedColor)
|
|
message = 'FAIL: found color ' + computedColor + ', expected ' + expectedColor;
|
|
else
|
|
message = 'PASS: found color ' + computedColor;
|
|
log('child ' + i + ': ' + message);
|
|
}
|
|
testEls[i].innerHTML = type + ' ' + color;
|
|
}
|
|
|
|
var blues = wr.getElementsByTagName('div');
|
|
n = 0;
|
|
for (var i = 0; i < blues.length; i += 1) {
|
|
var expectedColor = 'rgb(0, 0, 0)';
|
|
if ((i + 1) === (n * 5 + 2)) {
|
|
blues[i].innerHTML += ' blue bg';
|
|
n += 1;
|
|
|
|
var expectedColor = 'rgb(153, 153, 255)';
|
|
|
|
if (testColors) {
|
|
var computedColor = window.getComputedStyle(blues[i]).backgroundColor;
|
|
var message;
|
|
if (computedColor != expectedColor)
|
|
message = 'FAIL: found color ' + computedColor + ', expected ' + expectedColor;
|
|
else
|
|
message = 'PASS: found color ' + computedColor;
|
|
log('div ' + i + ': ' + message);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function test() {
|
|
addElement();
|
|
}
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body onload="init()">
|
|
|
|
<p>Test :nth-child() when dynamically adding siblings.</p>
|
|
<p><a href="https://bugs.webkit.org/show_bug.cgi?id=26362">https://bugs.webkit.org/show_bug.cgi?id=26362</a></p>
|
|
<div id="test"><div></div><p></p><div></div><p></p><div></div><p></p><div></div><p></p><div></div><p></p></div>
|
|
|
|
<div id="log"></div>
|
|
|
|
</body>
|
|
</html>
|