| <!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> |
