[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