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 )