third_party/WebKit/LayoutTests/fast/css/nth-child-dynamic.html

   1 <!DOCTYPE>
   2 <html>
   3 <head>
   4   <title>CSS3 - :nth-child()</title>
   5   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6
   7   <style type="text/css">
   8     #test {
   9       border: 1px solid black;
  10       margin: 10px;
  11       padding: 5px;
  12     }
  13
  14     #log {
  15       border: 1px solid black;
  16       margin: 10px;
  17       padding: 5px;
  18     }
  19
  20     #test > *:nth-child(3n+1) {
  21       color: rgb(255, 0, 0);
  22     }
  23
  24     #test div:nth-of-type(5n+2) {
  25       background-color: rgb(153, 153, 255);
  26     }
  27
  28     #test p {
  29       margin: 0;
  30       margin-left: 5px;
  31     }
  32   </style>
  33   <script type="text/javascript">
  34
  35   var wr;
  36   function init() {
  37     wr = document.getElementById('test');
  38     colorSiblings(false);
  39     test();
  40   }
  41
  42   var els = ['div','p'];
  43   var index = false;
  44
  45   function log(m) {
  46     var logDiv = document.getElementById('log');
  47     logDiv.innerHTML += m + '<br>';
  48   }
  49
  50   function addElement() {
  51     index = !index;
  52     var li = document.createElement(els[index*1]);
  53     wr.insertBefore(li, wr.firstChild);
  54     colorSiblings(true);
  55   }
  56
  57   function colorSiblings(testColors) {
  58     var testEls = wr.childNodes;
  59     var n = 0;
  60     for (var i = 0; i < testEls.length; i += 1) {
  61       var type = testEls[i].nodeName;
  62       var color = '';
  63       var expectedColor = 'rgb(0, 0, 0)';
  64       if ((i + 1) === (n * 3 + 1)) {
  65         color = ' red text ';
  66         expectedColor = 'rgb(255, 0, 0)';
  67         n += 1;
  68       }
  69       if (testColors) {
  70         var computedColor = window.getComputedStyle(testEls[i]).color;
  71         var message;
  72         if (computedColor != expectedColor)
  73           message = 'FAIL: found color ' + computedColor + ', expected ' + expectedColor;
  74         else
  75           message = 'PASS: found color ' + computedColor;
  76         log('child ' + i + ': ' + message);
  77       }
  78       testEls[i].innerHTML = type + ' ' + color;
  79     }
  80
  81     var blues = wr.getElementsByTagName('div');
  82     n = 0;
  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';
  87         n += 1;
  88
  89         var expectedColor = 'rgb(153, 153, 255)';
  90
  91         if (testColors) {
  92           var computedColor = window.getComputedStyle(blues[i]).backgroundColor;
  93           var message;
  94           if (computedColor != expectedColor)
  95             message = 'FAIL: found color ' + computedColor + ', expected ' + expectedColor;
  96           else
  97             message = 'PASS: found color ' + computedColor;
  98           log('div ' + i + ': ' + message);
  99         }
 100       }
 101     }
 102   }
 103
 104   function test() {
 105     addElement();
 106   }
 107   </script>
 108
 109 </head>
 110
 111 <body onload="init()">
 112
 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>
 116
 117 <div id="log"></div>
 118
 119 </body>
 120 </html>