nth-child-dynamic.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/fast/css/nth-child-dynamic.html
