third_party/WebKit/LayoutTests/css3/parsing-css3-nthchild.html

   1 <head>
   2 <style type="text/css">
   3 #a:nth-child(n-1) { color: green; }
   4 #b:nth-child(n- 10) { color: green; }
   5 #c:nth-child(n- 1 2) { color: green; }
   6 #d:nth-child(n-b1) { color: green; }
   7 #e:nth-child(n-+1) { color: green; }
   8 #f:nth-child(n-1n) { color: green; }
   9 #g:nth-child(-n-1) { color: green; }
  10 #h:nth-child(-n- 10) { color: green; }
  11 #i:nth-child(-n -b1) { color: green; }
  12 #j:nth-child(-1n- b1) { color: green; }
  13 #k:nth-child(-n-13b1) { color: green; }
  14 #l:nth-child(-n-+1) { color: green; }
  15 #m:nth-child(-n+n) { color: green; }
  16 #n:nth-child(-n
  17     - 1) { color: green; }
  18 #o:nth-child(-n
  19     +13) { color: green; }
  20 </style>
  21 <script>
  22
  23 /** Changes the result text font size. */
  24 function runTest()
  25 {
  26     if (window.testRunner)
  27         testRunner.dumpAsText();
  28
  29     var rules = document.styleSheets[0].cssRules;
  30     var text = "";
  31     for (var i = 0; i < rules.length; i++) {
  32         text += rules.item(i).cssText;
  33         text += "\n";
  34     }
  35
  36     document.getElementById("result").appendChild(document.createTextNode(text));
  37
  38     if (document.getElementById("result").firstChild.data === document.getElementById("expected").firstChild.data)
  39         document.getElementById("message").firstChild.data = "SUCCESS";
  40     else
  41         document.getElementById("message").firstChild.data = "FAILURE";
  42 }
  43
  44 </script>
  45 </head>
  46 <body onload="runTest()">
  47 <p id="message">TEST DID NOT COMPLETE</p>
  48
  49 <p>Rules from the stylesheet:</p>
  50
  51 <pre id="result"></pre>
  52
  53 <p>Expected result:</p>
  54
  55 <pre id="expected">#a:nth-child(1n-1) { color: green; }
  56 #b:nth-child(1n-10) { color: green; }
  57 #g:nth-child(-1n-1) { color: green; }
  58 #h:nth-child(-1n-10) { color: green; }
  59 #n:nth-child(-1n-1) { color: green; }
  60 #o:nth-child(-1n+13) { color: green; }
  61 </pre>
  62 </body>