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

   1 <head>
   2 <style>
   3 #a:nth-child(1n+0) { color: green; }
   4 #b:nth-child(n+0)  { color: green; }
   5 #c:nth-child(n)    { color: green; }
   6 #d:nth-child(-n+0) { color: green; }
   7 #e:nth-child(-n)   { color: green; }
   8
   9 #f:nth-child(1N+0) { color: green; }
  10 #g:nth-child(N+0)  { color: green; }
  11 #h:nth-child(N)    { color: green; }
  12 #i:nth-child(-N+0) { color: green; }
  13 #j:nth-child(-N)   { color: green; }
  14
  15 #k:nth-child(+ 1n) { color: green; }
  16 #l:nth-child(-1N
  17   -
  18   123  ) { color: green; }
  19 #m:nth-child(  N- 123) { color: green; }
  20 #n:nth-child(  n +12 3) { color: green; }
  21 #o:nth-child( 23n
  22
  23  +
  24
  25 123  ) { color: green; }
  26 #p:nth-child(  12 n ) { color: green; }
  27 #q:nth-child(+12n-0+1) { color: green; }
  28 #r:nth-child(+12N -- 1) { color: green; }
  29 #s:nth-child(+12 N ) { color: green; }
  30 #t:nth-child(+n+3) { color: green; }
  31 #u:nth-child( +n + 7 ) { color: green; }
  32 #v:nth-child(+ n + 7) { color: green; }
  33 </style>
  34
  35 <script>
  36
  37 /** Changes the result text font size. */
  38 function runTest()
  39 {
  40     if (window.testRunner)
  41         testRunner.dumpAsText();
  42
  43     var rules = document.styleSheets[0].cssRules;
  44     var text = "";
  45     for (var i = 0; i < rules.length; i++) {
  46         text += rules.item(i).cssText;
  47         text += "\n";
  48     }
  49
  50     document.getElementById("result").appendChild(document.createTextNode(text));
  51
  52     if (document.getElementById("result").firstChild.data === document.getElementById("expected").firstChild.data)
  53         document.getElementById("message").firstChild.data = "SUCCESS";
  54     else
  55         document.getElementById("message").firstChild.data = "FAILURE";
  56 }
  57
  58 </script>
  59
  60 </head>
  61
  62 <body onload="runTest()">
  63
  64 <p>Test parsing of CSS nth-child tokens.</p>
  65
  66 <p id="message">TEST DID NOT COMPLETE</p>
  67
  68 <p>Rules from the stylesheet:</p>
  69
  70 <pre id="result"></pre>
  71
  72 <p>Expected result:</p>
  73
  74 <pre id="expected">#a:nth-child(1n) { color: green; }
  75 #b:nth-child(1n) { color: green; }
  76 #c:nth-child(1n) { color: green; }
  77 #d:nth-child(-1n) { color: green; }
  78 #e:nth-child(-1n) { color: green; }
  79 #f:nth-child(1n) { color: green; }
  80 #g:nth-child(1n) { color: green; }
  81 #h:nth-child(1n) { color: green; }
  82 #i:nth-child(-1n) { color: green; }
  83 #j:nth-child(-1n) { color: green; }
  84 #l:nth-child(-1n-123) { color: green; }
  85 #m:nth-child(1n-123) { color: green; }
  86 #o:nth-child(23n+123) { color: green; }
  87 #t:nth-child(1n+3) { color: green; }
  88 #u:nth-child(1n+7) { color: green; }
  89 </pre>
  90
  91 <script>
  92
  93 </script>
  94 </body>