4 <title>CSS3 - :nth-child()</title>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <style type="text/css">
9 border: 1px solid black;
15 border: 1px solid black;
20 #test > *:nth-child(3n+1) {
21 color: rgb(255, 0, 0);
24 #test div:nth-of-type(5n+2) {
25 background-color: rgb(153, 153, 255);
33 <script type="text/javascript">
37 wr = document.getElementById('test');
42 var els = ['div','p'];
46 var logDiv = document.getElementById('log');
47 logDiv.innerHTML += m + '<br>';
50 function addElement() {
52 var li = document.createElement(els[index*1]);
53 wr.insertBefore(li, wr.firstChild);
57 function colorSiblings(testColors) {
58 var testEls = wr.childNodes;
60 for (var i = 0; i < testEls.length; i += 1) {
61 var type = testEls[i].nodeName;
63 var expectedColor = 'rgb(0, 0, 0)';
64 if ((i + 1) === (n * 3 + 1)) {
66 expectedColor = 'rgb(255, 0, 0)';
70 var computedColor = window.getComputedStyle(testEls[i]).color;
72 if (computedColor != expectedColor)
73 message = 'FAIL: found color ' + computedColor + ', expected ' + expectedColor;
75 message = 'PASS: found color ' + computedColor;
76 log('child ' + i + ': ' + message);
78 testEls[i].innerHTML = type + ' ' + color;
81 var blues = wr.getElementsByTagName('div');
83 for (var i = 0; i < blues.length; i += 1) {
84 var expectedColor = 'rgb(0, 0, 0)';
85 if ((i + 1) === (n * 5 + 2)) {
86 blues[i].innerHTML += ' blue bg';
89 var expectedColor = 'rgb(153, 153, 255)';
92 var computedColor = window.getComputedStyle(blues[i]).backgroundColor;
94 if (computedColor != expectedColor)
95 message = 'FAIL: found color ' + computedColor + ', expected ' + expectedColor;
97 message = 'PASS: found color ' + computedColor;
98 log('div ' + i + ': ' + message);
111 <body onload="init()">
113 <p>Test :nth-child() when dynamically adding siblings.</p>
114 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=26362">https://bugs.webkit.org/show_bug.cgi?id=26362</a></p>
115 <div id="test"><div></div><p></p><div></div><p></p><div></div><p></p><div></div><p></p><div></div><p></p></div>