test/tests/css2.html

   1 <html id="html">
   2 <head>
   3         <script type="text/javascript" src="../lib/Test/Builder.js"></script>
   4         <script type="text/javascript" src="../lib/Test/More.js"></script>
   5         <script type="text/javascript" src="../lib/test.js"></script>
   6         <script type="text/javascript" src="../../jquery/jquery-svn.js"></script>
   7 </head>
   8 <body id="body">
   9         <h1>CSS 2 Selectors</h1>
  10
  11         <!-- Test HTML -->
  12         <div id="main" style="display: none;">
  13                 <p id="firstp">See <a id="simon1" href="http://simon.incutio.com/archive/2003/03/25/#getElementsBySelector" rel="bookmark">this blog entry</a>
  14                 for more information.</p>
  15                 <p id="ap">Here are some links in a normal paragraph:
  16                 <a id="google" href="http://www.google.com/" title="Google!">Google</a>,
  17                 <a id="groups" href="http://groups.google.com/">Google Groups</a>.
  18                 This link has <code><a href="#" id="anchor1">class="blog"</a></code>:
  19                 <a href="http://diveintomark.org/" class="blog" hreflang="en" id="mark">diveintomark</a></p>
  20                 <div id="foo"><p id="sndp">Everything inside the red border is inside a div with
  21                 <code>id="foo"</code>.</p><p lang="en" id="en">This is a normal link:
  22                 <a id="yahoo" href="http://www.yahoo.com/" class="blogTest">Yahoo</a></p>
  23                 <p id="sap">This link has <code><a href="#2" id="anchor2">class="blog"</a></code>:
  24                 <a href="http://simon.incutio.com/" class="blog link" id="simon" rel="bookmark link">Simon Willison's Weblog</a></p></div>
  25                 <p id="first">Try them out: </p>
  26                 <ul id="first"></ul>
  27         </div>
  28         <pre id="test"><script>
  29                 plan({tests: 20});
  30
  31                 t( "Child", "p > a",
  32                         ["simon1","google","groups","mark","yahoo","simon"] );
  33                 t( "Child", "p> a",
  34                         ["simon1","google","groups","mark","yahoo","simon"] );
  35                 t( "Child", "p >a",
  36                         ["simon1","google","groups","mark","yahoo","simon"] );
  37                 t( "Child", "p>a",
  38                         ["simon1","google","groups","mark","yahoo","simon"] );
  39                 t( "Child w/ Class", "p > a.blog",
  40                         ["mark","simon"] );
  41                 t( "All Children", "code > *",
  42                         ["anchor1","anchor2"] );
  43                 t( "All Grandchildren", "p > * > *",
  44                         ["anchor1","anchor2"] );
  45
  46                 t( "Adjacent", "a + a", ["groups"] );
  47                 t( "Adjacent", "a +a", ["groups"] );
  48                 t( "Adjacent", "a+ a", ["groups"] );
  49                 t( "Adjacent", "a+a", ["groups"] );
  50                 t( "Adjacent", "p + p", ["ap","en","sap"] );
  51
  52                 t( "Comma, Child, and Adjacent", "a + a, code > a",
  53                         ["anchor1","anchor2","groups"] );
  54
  55                 t( "First Child", "p:first-child", ["firstp","sndp"] );
  56
  57                 diag( "Note: @ is used for XPath compatability" );
  58                 t( "Attribute Exists", "a[@title]", ["google"] );
  59                 t( "Attribute Exists", "*[@title]", ["google"] );
  60                 t( "Attribute Exists", "[@title]", ["google"] );
  61                 t( "Attribute Equals", "a[@rel='bookmark']", ["simon1"] );
  62                 t( "Attribute Equals", 'a[@rel="bookmark"]', ["simon1"] );
  63                 t( "Attribute Equals", "a[@rel=bookmark]", ["simon1"] );
  64         </script></pre>
  65 </body>
  66 </html>