Jifty

 view release on metacpan or  search on metacpan

t/TestApp-JiftyJS/share/web/static/js-test/02.cssquery.html  view on Meta::CPAN

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>/my/cssQuery/test.html - modified!</title>
    <style type="text/css">
      p.test a {background-color: red;}
      
      #test1-1 p a {background-color: yellow;}
      #test1-2 :link {background-color: yellow;}
      #test2-1 p.test.link a {background-color: yellow;}
      #test2-2 p > a {background-color: yellow;}
      #test2-3 span + a {background-color: yellow;}
      #test2-4 p:first-child a {background-color: yellow;}
      #test2-5 a:lang(en) {background-color: yellow;}
      #test2-6 a[href] {background-color: yellow;}
      #test2-7 a[title="This is a link"] {background-color: yellow;}
      #test2-8 a[title~="is"] {background-color: yellow;}
      div[id|=test2-9] a {background-color: yellow;}
      #test3-1 span ~ a {background-color: yellow;}
      #test3-2 p:last-child a {background-color: yellow;}
      #test3-3 a:contains("test") {background-color: yellow;}
      #test3-4 p :not(span) {background-color: yellow;}
      #test3-5 p:only-child a {background-color: yellow;}
      #test3-6 p *:nth-child(0) {background-color: yellow;}
      #test3-7 p *:nth-last-child(2n+1) {background-color: yellow;}
      html:root #test3-8 a {background-color: yellow;}
      #test3-9 a[title^="This"] {background-color: yellow;}
      #test3-10 a[title*="is a"] {background-color: yellow;}
      #test3-11 a[title$="link"] {background-color: yellow;}
    </style>
    <script type="text/javascript" src="/static/js/jquery-1.4.1.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/static/js/jquery_noconflict.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/static/js/cssQuery-jquery.js" charset="UTF-8"></script>

    <script type="text/javascript">
      onload = function() {
      // retrieve the style rules stored in the <pre> tags
	var styles = document.getElementsByTagName("pre");
	for (var i = 0; i < styles.length; i++) test(styles[i]);

	                    function test(style) {
                            try {
		            // get the CSS rule from the <pre> tag
		            var rule = style.firstChild.nodeValue;
		            // extract the selector part
		            var selector = rule.slice(0, rule.indexOf("{"));

		            // execute cssQuery to find the matching elements
		            var elements = cssQuery(selector);

		            // the tests have been constructed to match only one element
		            elements[0].style.backgroundColor = "lime";
                            } catch(e) {}
	                    };
                            };
                            </script>
      </head>

      <body lang="en">
        <div class="document">
          <div class="header">



( run in 2.180 seconds using v1.01-cache-2.11-cpan-98e64b0badf )