test/tests/css1.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 1 Selectors</h1>
  10
  11         <!-- Test HTML -->
  12         <div id="main" style="display: none;">
  13                 <p id="first">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><p>Here are some links in a normal paragraph:
  15                 <a id="google" href="http://www.google.com/" title="Google!">Google</a>,
  16                 <a id="groups" href="http://groups.google.com/">Google Groups</a>.
  17                 This link has <code><a href="#" id="anchor1">class="blog"</a></code>:
  18                 <a href="http://diveintomark.org/" class="blog" hreflang="en" id="mark">diveintomark</a></p>
  19                 <div id="foo"><p>Everything inside the red border is inside a div with
  20                 <code>id="foo"</code>.</p><p lang="en">This is a normal link:
  21                 <a id="yahoo"href="http://www.yahoo.com/">Yahoo</a></p>
  22                 <p>This link has <code><a href="#2" id="anchor2">class="blog"</a></code>:
  23                 <a href="http://simon.incutio.com/" class="blog link" id="simon">Simon Willison's Weblog</a></p></div>
  24                 <p>Try them out: </p>
  25                 <ul id="first"></ul>
  26         </div>
  27
  28         <pre id="test"><script>
  29                 plan({tests: 16});
  30
  31                 t( "Element Selector", "div", ["main","foo"] );
  32                 t( "Element Selector", "body", ["body"] );
  33                 t( "Element Selector", "html", ["html"] );
  34                 cmpOK( $("*").size(), ">=", 30, "Element Selector" );
  35                 t( "Parent Element", "div div", ["foo"] );
  36
  37                 t( "ID Selector", "#body", ["body"] );
  38                 t( "ID Selector w/ Element", "body#body", ["body"] );
  39                 cmpOK($("ul#first").get(0), "==", document.getElementsByTagName("ul")[0],
  40                         "ID Selector w/ Element");
  41
  42                 t( "Class Selector", ".blog", ["simon","mark"] );
  43                 t( "Class Selector", ".blog.link", ["simon"] );
  44                 t( "Class Selector w/ Element", "a.blog", ["simon","mark"] );
  45                 t( "Parent Class Selector", "p .blog", ["simon","mark"] );
  46
  47                 t( "Comma Support", "a.blog, div",
  48                         ["main","foo","simon","mark"] );
  49                 t( "Comma Support", "a.blog , div",
  50                         ["main","foo","simon","mark"] );
  51                 t( "Comma Support", "a.blog ,div",
  52                         ["main","foo","simon","mark"] );
  53                 t( "Comma Support", "a.blog,div",
  54                         ["main","foo","simon","mark"] );
  55         </script></pre>
  56 </body>
  57 </html>