michael@0: michael@0: michael@0: michael@0: michael@0: selectorTest michael@0: michael@0: michael@0: body { background-color: green; } michael@0: .test > .blox1 { background-color: lime; } michael@0: michael@0: /* test 2 : attribute existence selector */ michael@0: /* attribute with a value */ michael@0: .blox2[align] { background-color: lime; } michael@0: /* attribute with empty value */ michael@0: .blox3[align] { background-color: lime; } michael@0: /* attribute with almost similar name */ michael@0: .blox4, .blox5 { background-color: lime } michael@0: .blox4[align], .blox5[align] { background-color: red; } michael@0: michael@0: /* test3 : attribute value selector */ michael@0: .blox6[align="center"] { background-color: lime; } michael@0: .blox6[align="c"] { background-color: red; } michael@0: .blox6[align="centera"] { background-color: red; } michael@0: .blox6[foo="\e9"] { background-color: lime; } michael@0: .blox6[\_foo="\e9"] { background-color: lime; } michael@0: michael@0: /* test 4 : [~=] */ michael@0: .blox7[class~="foo"] { background-color: lime; } michael@0: .blox8, .blox9, .blox10 { background-color: lime; } michael@0: .blox8[class~=""] { background-color: red; } michael@0: .blox9[foo~=""] { background-color: red; } michael@0: .blox10[foo~="foo"] { background-color: red; } michael@0: michael@0: /* test5 [^=] */ michael@0: .attrStart > .t3 { background-color: lime; } michael@0: .attrStart > .t1[class^="unit"] { background-color: lime; } michael@0: .attrStart > .t2 { background-color: lime; } michael@0: .attrStart > .t2[class^="nit"] { background-color: red; } michael@0: .attrStart > .t3[align^=""] { background-color: red; } michael@0: .attrStart > .t4[foo^="\e9"] { background-color: lime; } michael@0: michael@0: /* test6 [$=] */ michael@0: .attrEnd > .t3 { background-color: lime; } michael@0: .attrEnd > .t1[class$="t1"] { background-color: lime; } michael@0: .attrEnd > .t2 { background-color: lime; } michael@0: .attrEnd > .t2[class$="unit"] { background-color: red; } michael@0: .attrEnd > .t3[align$=""] { background-color: red; } michael@0: .attrEnd > .t4[foo$="\e9"] { background-color: lime; } michael@0: michael@0: /* test7 [*=] */ michael@0: .attrMiddle > .t3 { background-color: lime; } michael@0: .attrMiddle > .t1[class*="t t"] { background-color: lime; } michael@0: .attrMiddle > .t2 { background-color: lime; } michael@0: .attrMiddle > .t2[class*="a"] { background-color: red; } michael@0: .attrMiddle > .t3[align*=""] { background-color: red; } michael@0: .attrMiddle > .t4[foo*="\e9"] { background-color: lime; } michael@0: michael@0: /* :first-child tests */ michael@0: .firstChild .unitTest:first-child { background-color: lime; } michael@0: .blox12:first-child { background-color: red; } michael@0: .blox13:first-child { background-color: red; } michael@0: .blox12, .blox13 { background-color: lime } michael@0: michael@0: /* :root tests */ michael@0: :root { background-color: green; } michael@0: michael@0: /* :scope tests */ michael@0: :scope { background-color: green; } michael@0: michael@0: /* :nth-child(n) tests */ michael@0: .nthchild1 > :nth-last-child(odd) { background-color: lime; } michael@0: .nthchild1 > :nth-child(odd) { background-color: lime; } michael@0: michael@0: .nthchild2 > :nth-last-child(even) { background-color: lime; } michael@0: .nthchild2 > :nth-child(even) { background-color: lime; } michael@0: michael@0: .nthchild3 > :nth-child(3n+2) { background-color: lime; } michael@0: .nthchild3 > :nth-last-child(3n+1) { background-color: lime; } michael@0: .nthchild3 > :nth-last-child(3n+3) { background-color: lime; } michael@0: michael@0: .nthoftype1 > div:nth-of-type(odd) { background-color: lime; } michael@0: .nthoftype1 > div:nth-last-of-type(odd) { background-color: lime; } michael@0: .nthoftype1 > p { background-color: green; } michael@0: michael@0: .nthoftype2 > div:nth-of-type(even) { background-color: lime; } michael@0: .nthoftype2 > div:nth-last-of-type(even) { background-color: lime; } michael@0: .nthoftype2 > p { background-color: green; } michael@0: michael@0: .nthoftype3 > div:nth-of-type(3n+1) { background-color: lime; } michael@0: .nthoftype3 > div:nth-last-of-type(3n+1) { background-color: lime; } michael@0: .nthoftype3 > div:nth-last-of-type(3n+2) { background-color: lime; } michael@0: .nthoftype3 > p { background-color: green; } michael@0: michael@0: /* :not() tests */ michael@0: .blox14:not(span) { background-color: lime; } michael@0: .blox15:not([foo="blox14"]) { background-color: lime; } michael@0: .blox16:not(.blox15) { background-color: lime; } michael@0: michael@0: /* :only-of-type tests */ michael@0: .blox17:only-of-type { background-color: lime; } michael@0: .blox18:only-of-type { background-color: red; } michael@0: .blox18:not(:only-of-type) { background-color: lime; } michael@0: michael@0: /* :last-child tests */ michael@0: .lastChild > :last-child { background-color: lime } michael@0: .lastChild > :not(:last-child) { background-color: lime } michael@0: michael@0: /* :first-of-type tests */ michael@0: .firstOfType > *:first-of-type { background-color: lime; } michael@0: *.firstOfType > :not(:first-of-type) { background-color: lime; } michael@0: michael@0: /* :last-of-type tests */ michael@0: .lastOfType > *:last-of-type { background-color: lime; } michael@0: *.lastOfType > :not(:last-of-type) { background-color: lime; } michael@0: michael@0: /* :only-child tests */ michael@0: .onlyChild > *:not(:only-child) { background-color: lime; } michael@0: .onlyChild > .unitTest > *:only-child { background-color: lime; } michael@0: michael@0: /* :only-of-type tests */ michael@0: .onlyOfType *:only-of-type { background-color: lime; } michael@0: .onlyOfType *:not(:only-of-type) { background-color: lime; } michael@0: michael@0: /* :empty tests */ michael@0: .empty > *.isEmpty:empty { background-color: lime; color: lime; } michael@0: .empty > .isNotEmpty { background-color: blue; color: blue; } michael@0: .empty > .isNotEmpty:empty { background-color: red; color: red; } michael@0: .empty > .isNotEmpty:not(:empty) { background-color: lime; color: lime; } michael@0: michael@0: /* :lang() tests */ michael@0: .lang :lang(en) { background-color: lime; } michael@0: .lang :lang(fr) { background-color: lime; } michael@0: .lang .t1 { background-color: blue; } michael@0: .lang .t1:lang(es) { background-color: lime; } michael@0: .lang :lang(es-AR) { background-color: red; } michael@0: michael@0: /* [|=] tests */ michael@0: .attrLang .t1 { background-color: lime; } michael@0: .attrLang .t1[lang|="en"] { background-color: red; } michael@0: .attrLang [lang|="fr"] { background-color: lime; } michael@0: .attrLang .t2[lang|="en"] { background-color: lime; } michael@0: .attrLang .t3 { background-color: blue; } michael@0: .attrLang .t3[lang|="es"] { background-color: lime; } michael@0: .attrLang [lang|="es-AR"] { background-color: red; } michael@0: michael@0: /* UI tests */ michael@0: .UI .t1:enabled > .unitTest { background-color: lime; } michael@0: .UI .t2:disabled > .unitTest { background-color: lime; } michael@0: .UI .t3:checked + div { background-color: lime; } michael@0: .UI .t4:not(:checked) + div { background-color: lime; } michael@0: michael@0: /* ~ combinator tests */ michael@0: .tilda .t1 { background-color: white; } michael@0: .tilda .t1 ~ .unitTest { background-color: lime; } michael@0: .tilda .t1:hover ~ .unitTest { background-color: red; } michael@0: michael@0: /* ~ combinator tests */ michael@0: .plus .t1, .plus .t2 { background-color: white; } michael@0: .plus .t1 + .unitTest + .unitTest { background-color: lime; } michael@0: .plus .t1:hover + .unitTest + .unitTest { background-color: red; } michael@0: ]]> michael@0: michael@0: .blox16:not(.blox15[foo="blox14"]) { background-color: red; } michael@0: michael@0: /* Tests from http://www.w3.org/Style/CSS/Test/CSS3/Selectors/20060307/html/index.html */ michael@0: div:not(:not(div)) { background-color : red } michael@0: michael@0: div, { background: red; } michael@0: .5cm { background: red; } michael@0: foo & address, p { background: red; } michael@0: [*=test] { background: red; } michael@0: [*|*=test] { background: red; } michael@0: michael@0: div:subject { background: red; } michael@0: :canvas { background: red; } michael@0: :viewport { background: red; } michael@0: :window { background: red; } michael@0: :menu { background: red; } michael@0: :table { background: red; } michael@0: :select { background: red; } michael@0: ::canvas { background: red; } michael@0: ::viewport { background: red; } michael@0: ::window { background: red; } michael@0: ::menu { background: red; } michael@0: ::table { background: red; } michael@0: ::select { background: red; } michael@0: michael@0: ..test { background: red; color: yellow; } michael@0: .foo..quux { background: red; color: yellow; } michael@0: .bar. { background: red; color: yellow; } michael@0: michael@0: michael@0: michael@0: michael@0:

Selectors API Test Suite

michael@0:

Testrunner by John Resig, tests by John Resig, Disruptive Innovations, W3C CSS Working Group, jQuery JavaScript Library.

michael@0:

michael@0: michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0: michael@0: michael@0:

michael@0:

michael@0: the previous square should be green when the checkbox is checked and become red when you uncheck it michael@0:

michael@0:

michael@0: the previous square should be green when the checkbox is NOT checked and become red when you check it michael@0:

michael@0: michael@0:

michael@0:

michael@0: the three last squares should be green and become red when the pointer hovers over the white square michael@0:

michael@0:

michael@0: the last square should be green and become red when the pointer hovers over the FIRST white square michael@0:

michael@0:

michael@0: michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0:

michael@0: michael@0:

michael@0: michael@0: michael@0:

michael@0:

michael@0: the previous square should be green when the checkbox is checked and become red when you uncheck it michael@0:

michael@0:

michael@0: the previous square should be green when the checkbox is NOT checked and become red when you check it michael@0:

michael@0: michael@0:

michael@0:

michael@0: the three last squares should be green and become red when the pointer hovers over the white square michael@0:

michael@0:

michael@0: the last square should be green and become red when the pointer hovers over the FIRST white square michael@0:

michael@0:

michael@0: michael@0:

Selectors API Test Suite

CSS 3 Selectors tests

CSS 3 Selectors tests

jQuery Test Suite