[Jifty-commit] r4698 -
jifty/branches/cssquery-refactor/t/TestApp-JiftyJS/share/web/static/js-test
jifty-commit at lists.jifty.org
jifty-commit at lists.jifty.org
Sat Dec 15 03:17:06 EST 2007
Author: gugod
Date: Sat Dec 15 03:17:05 2007
New Revision: 4698
Added:
jifty/branches/cssquery-refactor/t/TestApp-JiftyJS/share/web/static/js-test/02.cssquery.html (contents, props changed)
Log:
Add this cssquery test page, modified from Dean Edwards' cssQuery
test page. This test file isn't put into harness test page since
some of them are failling. We can see that jquery and cssquery
aren't exactly compatible anyway.
Added: jifty/branches/cssquery-refactor/t/TestApp-JiftyJS/share/web/static/js-test/02.cssquery.html
==============================================================================
--- (empty file)
+++ jifty/branches/cssquery-refactor/t/TestApp-JiftyJS/share/web/static/js-test/02.cssquery.html Sat Dec 15 03:17:05 2007
@@ -0,0 +1,146 @@
+<!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.2.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">
+
+ <p>This page is modified from Dean Edwards' <a href="http://dean.edwards.name/my/cssQuery/test.html">cssQuery test page.</a> It's here for telling how are jQuery and cssQuery compatible with or different from each other. The background color of all "test" links should turn lime. If no, that means the rule above is failed to applied.</p>
+
+ <hr />
+ </div>
+
+ <div class="content">
+ <h2>cssQuery Test Page</h2>
+
+ <h3><abbr>CSS</abbr> Level 1</h3>
+
+ <pre>#test1-1 p a {background-color: lime;}</pre>
+ <div id="test1-1"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
+
+ <pre>#test1-2 :link {background-color: lime;}</pre>
+ <div id="test1-2"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
+
+ <h3><abbr>CSS</abbr> Level 2</h3>
+
+ <pre>#test2-1 p.test.link a {background-color: lime;}</pre>
+ <div id="test2-1"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
+
+ <pre>#test2-2 p > a {background-color: lime;}</pre>
+ <div id="test2-2"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
+
+ <pre>#test2-3 span + a {background-color: lime;}</pre>
+ <div id="test2-3"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
+
+ <pre>#test2-4 p:first-child a {background-color: lime;}</pre>
+ <div id="test2-4"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
+
+ <pre>#test2-5 a:lang(en) {background-color: lime;}</pre>
+ <div id="test2-5"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
+
+ <pre>#test2-6 a[href] {background-color: lime;}</pre>
+ <div id="test2-6"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
+
+ <pre>#test2-7 a[title="This is a link"] {background-color: lime;}</pre>
+ <div id="test2-7"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
+
+ <pre>#test2-8 a[title~="is"] {background-color: lime;}</pre>
+ <div id="test2-8"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
+
+ <pre>div[id|=test2-9] a {background-color: lime;}</pre>
+ <div id="test2-9"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
+
+ <h3><abbr>CSS</abbr> Level 3</h3>
+
+ <pre>#test3-1 span ~ a {background-color: lime;}</pre>
+ <div id="test3-1"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
+
+ <pre>#test3-2 p:last-child a {background-color: lime;}</pre>
+ <div id="test3-2"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
+
+ <pre>#test3-3 a:contains("test") {background-color: lime;}</pre>
+ <div id="test3-3"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
+
+ <pre>#test3-4 p :not(span) {background-color: lime;}</pre>
+ <div id="test3-4"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
+
+ <pre>#test3-5 p:only-child a {background-color: lime;}</pre>
+ <div id="test3-5"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
+
+ <pre>#test3-6 p *:nth-child(even) {background-color: lime;}</pre>
+ <div id="test3-6"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
+
+ <pre>#test3-7 p *:nth-last-child(2n+1) {background-color: lime;}</pre>
+ <div id="test3-7"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
+
+ <pre>html:root #test3-8 a {background-color: lime;}</pre>
+ <div id="test3-8"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
+
+ <pre>#test3-9 a[title^="This"] {background-color: lime;}</pre>
+ <div id="test3-9"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
+
+ <pre>#test3-10 a[title*="is a"] {background-color: lime;}</pre>
+ <div id="test3-10"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
+
+ <pre>#test3-11 a[title$="link"] {background-color: lime;}</pre>
+ <div id="test3-11"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
+ </div>
+
+ </div>
+ </body>
+</html>
More information about the Jifty-commit
mailing list