mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-11-22 23:50:19 +00:00
453 lines
21 KiB
HTML
453 lines
21 KiB
HTML
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||
|
|
<html title=":root selector" lang="en">
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<!-- (c) Disruptive Innovations 2008-2022 -->
|
||
|
|
|
||
|
|
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
|
||
|
|
<title>selectorTest</title>
|
||
|
|
<style type="text/css">
|
||
|
|
|
||
|
|
/* TEST 0 : BASIC TESTS */
|
||
|
|
/* element type selector */
|
||
|
|
body { background-color: red; margin: 10px; padding: 10px; color: lime; font-family: sans-serif }
|
||
|
|
div { background-color: red; }
|
||
|
|
div.header { background-color: #e0e0e0; color: black; padding: 10px; margin-bottom: 10px;}
|
||
|
|
/* class selector */
|
||
|
|
.unitTest { width: 10px; background-color: red; margin: 0px; margin-right: 2px; float: left; }
|
||
|
|
.test { margin-bottom: 2px; background-color: green;}
|
||
|
|
/* group of selectors */
|
||
|
|
.unitTest, .test { height: 10px; }
|
||
|
|
|
||
|
|
/* :target selector */
|
||
|
|
.target :target { background-color: lime; }
|
||
|
|
|
||
|
|
/* test 1 : childhood selector */
|
||
|
|
html > body { background-color: green; }
|
||
|
|
.test > .blox1 { background-color: lime; }
|
||
|
|
|
||
|
|
/* test 2 : attribute existence selector */
|
||
|
|
/* attribute with a value */
|
||
|
|
.blox2[align] { background-color: lime; }
|
||
|
|
/* attribute with empty value */
|
||
|
|
.blox3[align] { background-color: lime; }
|
||
|
|
/* attribute with almost similar name */
|
||
|
|
.blox4, .blox5 { background-color: lime }
|
||
|
|
.blox4[align], .blox5[align] { background-color: red; }
|
||
|
|
|
||
|
|
/* test3 : attribute value selector */
|
||
|
|
.blox6[align="center"] { background-color: lime; }
|
||
|
|
.blox6[align="c"] { background-color: red; }
|
||
|
|
.blox6[align="centera"] { background-color: red; }
|
||
|
|
.blox6[foo="\e9"] { background-color: lime; }
|
||
|
|
.blox6[\_foo="\e9"] { background-color: lime; }
|
||
|
|
|
||
|
|
/* test 4 : [~=] */
|
||
|
|
.blox7[class~="foo"] { background-color: lime; }
|
||
|
|
.blox8, .blox9, .blox10 { background-color: lime; }
|
||
|
|
.blox8[class~=""] { background-color: red; }
|
||
|
|
.blox9[foo~=""] { background-color: red; }
|
||
|
|
.blox10[foo~="foo"] { background-color: red; }
|
||
|
|
|
||
|
|
/* test5 [^=] */
|
||
|
|
.attrStart > .t3 { background-color: lime; }
|
||
|
|
.attrStart > .t1[class^="unit"] { background-color: lime; }
|
||
|
|
.attrStart > .t2 { background-color: lime; }
|
||
|
|
.attrStart > .t2[class^="nit"] { background-color: red; }
|
||
|
|
.attrStart > .t3[align^=""] { background-color: red; }
|
||
|
|
.attrStart > .t4[foo^="\e9"] { background-color: lime; }
|
||
|
|
|
||
|
|
/* test6 [$=] */
|
||
|
|
.attrEnd > .t3 { background-color: lime; }
|
||
|
|
.attrEnd > .t1[class$="t1"] { background-color: lime; }
|
||
|
|
.attrEnd > .t2 { background-color: lime; }
|
||
|
|
.attrEnd > .t2[class$="unit"] { background-color: red; }
|
||
|
|
.attrEnd > .t3[align$=""] { background-color: red; }
|
||
|
|
.attrEnd > .t4[foo$="\e9"] { background-color: lime; }
|
||
|
|
|
||
|
|
/* test7 [*=] */
|
||
|
|
.attrMiddle > .t3 { background-color: lime; }
|
||
|
|
.attrMiddle > .t1[class*="t t"] { background-color: lime; }
|
||
|
|
.attrMiddle > .t2 { background-color: lime; }
|
||
|
|
.attrMiddle > .t2[class*="a"] { background-color: red; }
|
||
|
|
.attrMiddle > .t3[align*=""] { background-color: red; }
|
||
|
|
.attrMiddle > .t4[foo*="\e9"] { background-color: lime; }
|
||
|
|
|
||
|
|
/* :first-child tests */
|
||
|
|
.firstChild .unitTest:first-child { background-color: lime; }
|
||
|
|
.blox12:first-child { background-color: red; }
|
||
|
|
.blox13:first-child { background-color: red; }
|
||
|
|
.blox12, .blox13 { background-color: lime }
|
||
|
|
|
||
|
|
/* :root tests */
|
||
|
|
html { background-color: red; }
|
||
|
|
:root { background-color: green; }
|
||
|
|
|
||
|
|
/* :nth-child(n) tests */
|
||
|
|
.nthchild1 > :nth-last-child(odd) { background-color: lime; }
|
||
|
|
.nthchild1 > :nth-child(odd) { background-color: lime; }
|
||
|
|
|
||
|
|
.nthchild2 > :nth-last-child(even) { background-color: lime; }
|
||
|
|
.nthchild2 > :nth-child(even) { background-color: lime; }
|
||
|
|
|
||
|
|
.nthchild3 > :nth-child(3n+2) { background-color: lime; }
|
||
|
|
.nthchild3 > :nth-last-child(3n+1) { background-color: lime; }
|
||
|
|
.nthchild3 > :nth-last-child(3n+3) { background-color: lime; }
|
||
|
|
|
||
|
|
.nthoftype1 > div:nth-of-type(odd) { background-color: lime; }
|
||
|
|
.nthoftype1 > div:nth-last-of-type(odd) { background-color: lime; }
|
||
|
|
.nthoftype1 > p { background-color: green; }
|
||
|
|
|
||
|
|
.nthoftype2 > div:nth-of-type(even) { background-color: lime; }
|
||
|
|
.nthoftype2 > div:nth-last-of-type(even) { background-color: lime; }
|
||
|
|
.nthoftype2 > p { background-color: green; }
|
||
|
|
|
||
|
|
.nthoftype3 > div:nth-of-type(3n+1) { background-color: lime; }
|
||
|
|
.nthoftype3 > div:nth-last-of-type(3n+1) { background-color: lime; }
|
||
|
|
.nthoftype3 > div:nth-last-of-type(3n+2) { background-color: lime; }
|
||
|
|
.nthoftype3 > p { background-color: green; }
|
||
|
|
|
||
|
|
/* :not() tests */
|
||
|
|
.blox14:not(span) { background-color: lime; }
|
||
|
|
.blox15:not([foo="blox14"]) { background-color: lime; }
|
||
|
|
.blox16 { background-color: red; }
|
||
|
|
.blox16:not(.blox15) { background-color: lime; }
|
||
|
|
.blox16:not(.blox15[foo="blox14"]) { background-color: lime; }
|
||
|
|
|
||
|
|
/* :only-of-type tests */
|
||
|
|
.blox17 { background-color: red; }
|
||
|
|
.blox17:only-of-type { background-color: lime; }
|
||
|
|
.blox18:only-of-type { background-color: red; }
|
||
|
|
.blox18:not(:only-of-type) { background-color: lime; }
|
||
|
|
|
||
|
|
/* :last-child tests */
|
||
|
|
.lastChild > p { background-color: red; }
|
||
|
|
.lastChild > :last-child { background-color: lime }
|
||
|
|
.lastChild > :not(:last-child) { background-color: lime }
|
||
|
|
|
||
|
|
/* :first-of-type tests */
|
||
|
|
.firstOfType > p { background-color: red }
|
||
|
|
.firstOfType > *:first-of-type { background-color: lime; }
|
||
|
|
*.firstOfType > :not(:first-of-type) { background-color: lime; }
|
||
|
|
|
||
|
|
/* :last-of-type tests */
|
||
|
|
.lastOfType > p { background-color: red }
|
||
|
|
.lastOfType > *:last-of-type { background-color: lime; }
|
||
|
|
*.lastOfType > :not(:last-of-type) { background-color: lime; }
|
||
|
|
|
||
|
|
/* :only-child tests */
|
||
|
|
.onlyChild > *:not(:only-child) { background-color: lime; }
|
||
|
|
.onlyChild > .unitTest > *:only-child { background-color: lime; }
|
||
|
|
|
||
|
|
/* :only-of-type tests */
|
||
|
|
.onlyOfType *:only-of-type { background-color: lime; }
|
||
|
|
.onlyOfType *:not(:only-of-type) { background-color: lime; }
|
||
|
|
|
||
|
|
/* :empty tests */
|
||
|
|
.empty > .isEmpty { color: red; }
|
||
|
|
.empty > *.isEmpty:empty { background-color: lime; color: lime; }
|
||
|
|
.empty > .isNotEmpty { background-color: blue; color: blue; }
|
||
|
|
.empty > .isNotEmpty:empty { background-color: red; color: red; }
|
||
|
|
.empty > .isNotEmpty:not(:empty) { background-color: lime; color: lime; }
|
||
|
|
|
||
|
|
/* :lang() tests */
|
||
|
|
.lang :lang(en) { background-color: lime; }
|
||
|
|
.lang :lang(fr) { background-color: lime; }
|
||
|
|
.lang .t1 { background-color: blue; }
|
||
|
|
.lang .t1:lang(es) { background-color: lime; }
|
||
|
|
.lang :lang(es-AR) { background-color: red; }
|
||
|
|
|
||
|
|
/* [|=] tests */
|
||
|
|
.attrLang .t1 { background-color: lime; }
|
||
|
|
.attrLang .t1[lang|="en"] { background-color: red; }
|
||
|
|
.attrLang [lang|="fr"] { background-color: lime; }
|
||
|
|
.attrLang .t2[lang|="en"] { background-color: lime; }
|
||
|
|
.attrLang .t3 { background-color: blue; }
|
||
|
|
.attrLang .t3[lang|="es"] { background-color: lime; }
|
||
|
|
.attrLang [lang|="es-AR"] { background-color: red; }
|
||
|
|
|
||
|
|
/* UI tests */
|
||
|
|
.UI > * { float: left }
|
||
|
|
.UI { clear: both; height: auto; padding-top: 6px;}
|
||
|
|
.UI .t1:enabled > .unitTest { background-color: lime; }
|
||
|
|
.UI .t2:disabled > .unitTest { background-color: lime; }
|
||
|
|
.UI .t3:checked + div { background-color: lime; }
|
||
|
|
.UI .t4:not(:checked) + div { background-color: lime; }
|
||
|
|
|
||
|
|
/* ~ combinator tests */
|
||
|
|
.tilda { clear: both; height: auto; padding-top: 6px;}
|
||
|
|
.tilda .t1 { background-color: white; }
|
||
|
|
.tilda .t1 ~ .unitTest { background-color: lime; }
|
||
|
|
.tilda .t1:hover ~ .unitTest { background-color: red; }
|
||
|
|
|
||
|
|
/* ~ combinator tests */
|
||
|
|
.plus { clear: both; height: auto; padding-top: 6px;}
|
||
|
|
.plus .t1, .plus .t2 { background-color: white; }
|
||
|
|
.plus .t1 + .unitTest + .unitTest { background-color: lime; }
|
||
|
|
.plus .t1:hover + .unitTest + .unitTest { background-color: red; }
|
||
|
|
|
||
|
|
.attrCaseInsensitive { margin-top: 1em; }
|
||
|
|
.blox23s1[foo="blox" i],
|
||
|
|
.blox23s2[foo="blox" i],
|
||
|
|
.blox23s3[foo="blox" i],
|
||
|
|
.blox23s4[foo="blox" i],
|
||
|
|
.blox23s5[foo="blox" i],
|
||
|
|
.blox23s6[foo="blox" i] { background-color: lime; }
|
||
|
|
.blox23s1[foo="blox" erroneous],
|
||
|
|
.blox23s2[foo="blox" erroneous],
|
||
|
|
.blox23s3[foo="blox" erroneous],
|
||
|
|
.blox23s4[foo="blox" erroneous],
|
||
|
|
.blox23s5[foo="blox" erroneous],
|
||
|
|
.blox23s6[foo="blox" erroneous],
|
||
|
|
{ background-color: red; }
|
||
|
|
.blox19[class="BLOX19 UNITTEST" i] { background-color: lime;}
|
||
|
|
.blox20[class="BLOX20 UNITTEST" i] { background-color: red;}
|
||
|
|
.blox20[class="blox20 unitTest" s] { background-color: lime;}
|
||
|
|
.blox21[class*="21 UN" i] { background-color: lime;}
|
||
|
|
.blox22[class*="22 unitt" s] { background-color: red;}
|
||
|
|
.blox22[class*="22 unitT" s] { background-color: lime;}
|
||
|
|
.blox24[class^="BLOX" i] { background-color: lime;}
|
||
|
|
.blox25[class^="BLOX"] { background-color: red;}
|
||
|
|
.blox25[class^="blox" s] { background-color: lime;}
|
||
|
|
.blox26[class$="tEST" i] { background-color: lime;}
|
||
|
|
.blox27[class$="TEst" s] { background-color: red;}
|
||
|
|
.blox27[class$="Test" s] { background-color: lime;}
|
||
|
|
.blox28[class~="unitTEST" i] { background-color: lime;}
|
||
|
|
.blox29[class~="UNITTEST" s] { background-color: red;}
|
||
|
|
.blox29[class~="unitTest" s] { background-color: lime;}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body title="childhood and element type selectors">
|
||
|
|
|
||
|
|
<div class="header">
|
||
|
|
<h3>CSS Selectors tests</h3>
|
||
|
|
<p>Author: Daniel Glazman</p>
|
||
|
|
Last update: 2022-03-28</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test target">
|
||
|
|
<div class="unitTest" id="target" title=":target selector"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test">
|
||
|
|
<div class="blox1 unitTest" title="childhood selector"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test attributeExistence">
|
||
|
|
<div class="blox2 unitTest" align="center" title="attribute existence selector"></div>
|
||
|
|
<div class="blox3 unitTest" align="" title="attribute existence selector with empty string value"></div>
|
||
|
|
<div class="blox4 unitTest" valign="center" title="attribute existence selector with almost identical attribute"></div>
|
||
|
|
<div class="blox5 unitTest" alignv="center" title="attribute existence selector with almost identical attribute"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test attributeValue">
|
||
|
|
<div class="blox6 unitTest" align="center" title="attribute value selector"></div>
|
||
|
|
<div class="blox6 unitTest" foo="é" title="attribute value selector with an entity in the attribute and an escaped value in the selector"></div>
|
||
|
|
<div class="blox6 unitTest" _foo="é" title="attribute value selector with an entity in the attribute, an escaped value in the selector, and a leading underscore in the attribute name"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test attributeSpaceSeparatedValues">
|
||
|
|
<div class="blox7 foo unitTest" title="[~=] attribute selector"></div>
|
||
|
|
<div class="blox8 unitTest" title="[~=] attribute selector looking for empty string"></div>
|
||
|
|
<div class="blox9 unitTest" foo="" title="[~=] attribute selector looking for empty string in empty attribute"></div>
|
||
|
|
<div class="blox10 unitTest" foo="foobar" title="[~=] attribute selector looking for 'foo' in 'foobar'"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test attrStart">
|
||
|
|
<div class="unitTest t1" title="[^=] attribute selector"></div>
|
||
|
|
<div class="unitTest t2" title="[^=] attribute selector"></div>
|
||
|
|
<div class="unitTest t3" align="center" title="[^=] attribute selector looking for empty string"></div>
|
||
|
|
<div class="unitTest t4" foo="étagada" title="[^=] attribute selector looking for é"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test attrEnd">
|
||
|
|
<div class="unitTest t1" title="[$=] attribute selector"></div>
|
||
|
|
<div class="unitTest t2" title="[$=] attribute selector"></div>
|
||
|
|
<div class="unitTest t3" align="center" title="[$=] attribute selector looking for empty string"></div>
|
||
|
|
<div class="unitTest t4" foo="tagadaé" title="[$=] attribute selector looking for é"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test attrMiddle">
|
||
|
|
<div class="unitTest t1" title="[*=] attribute selector"></div>
|
||
|
|
<div class="unitTest t2" title="[*=] attribute selector"></div>
|
||
|
|
<div class="unitTest t3" align="center" title="[*=] attribute selector looking for empty string"></div>
|
||
|
|
<div class="unitTest t4" foo="tagadaéfoo" title="[*=] attribute selector looking for é"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test firstChild">
|
||
|
|
<div class="unitTest" title=":first-child selector"></div>
|
||
|
|
<div class="blox12 unitTest" title=":first-child selector should not match non first child"></div>
|
||
|
|
<div class="blox13 unitTest" title=":first-child selector should not match non first child"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test not">
|
||
|
|
<div class="blox14 unitTest" title="negation pseudo-class with argument being an element type selector"></div>
|
||
|
|
<div class="blox15 unitTest" foo="blox15" title="negation pseudo-class with argument being an attribute selector"></div>
|
||
|
|
<div class="blox16 unitTest" foo="blox15" title="negation pseudo-class accepts both simple and compound selectors as argument"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test onlyOfType">
|
||
|
|
<div class="blox17 unitTest" title=":only-of-type selector"></div>
|
||
|
|
<p class="blox18 unitTest" title="negated :only-of-type selector"></p>
|
||
|
|
<p class="blox18 unitTest" title="negated :only-of-type selector"></p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test nthchild1">
|
||
|
|
<div class="unitTest" title=":nth-child(odd) selector"></div>
|
||
|
|
<div class="unitTest" title=":nth-last-child(odd) selector"></div>
|
||
|
|
<div class="unitTest" title=":nth-child(odd) selector"></div>
|
||
|
|
<div class="unitTest" title=":nth-last-child(odd) selector"></div>
|
||
|
|
<div class="unitTest" title=":nth-child(odd) selector"></div>
|
||
|
|
<div class="unitTest" title=":nth-last-child(odd) selector"></div>
|
||
|
|
</div>
|
||
|
|
<div class="test nthchild2">
|
||
|
|
<div class="unitTest" title=":nth-last-child(even) selector"></div>
|
||
|
|
<div class="unitTest" title=":nth-child(even) selector"></div>
|
||
|
|
<div class="unitTest" title=":nth-last-child(even) selector"></div>
|
||
|
|
<div class="unitTest" title=":nth-child(even) selector"></div>
|
||
|
|
<div class="unitTest" title=":nth-last-child(even) selector"></div>
|
||
|
|
<div class="unitTest" title=":nth-child(even) selector"></div>
|
||
|
|
</div>
|
||
|
|
<div class="test nthchild3">
|
||
|
|
<div class="unitTest no" title=":nth-last-child(3n+3) selector"></div>
|
||
|
|
<div class="unitTest" title=":nth-child(3n+2) selector"></div>
|
||
|
|
<div class="unitTest no" title=":nth-last-child(3n+1) selector"></div>
|
||
|
|
<div class="unitTest no" title=":nth-last-child(3n+3) selector"></div>
|
||
|
|
<div class="unitTest" title=":nth-child(3n+2) selector"></div>
|
||
|
|
<div class="unitTest no" title=":nth-last-child(3n+1) selector"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test nthoftype1">
|
||
|
|
<div class="unitTest" title=":nth-of-type(odd) selector"></div>
|
||
|
|
<p class="unitTest"></p>
|
||
|
|
<p class="unitTest"></p>
|
||
|
|
<div class="unitTest" title=":nth-last-of-type(odd) selector"></div>
|
||
|
|
<p class="unitTest"></p>
|
||
|
|
<div class="unitTest" title=":nth-of-type(odd) selector"></div>
|
||
|
|
<div class="unitTest" title=":nth-last-of-type(odd) selector"></div>
|
||
|
|
</div>
|
||
|
|
<div class="test nthoftype2">
|
||
|
|
<div class="unitTest" title=":nth-last-of-type(even) selector"></div>
|
||
|
|
<p class="unitTest"></p>
|
||
|
|
<p class="unitTest"></p>
|
||
|
|
<div class="unitTest" title=":nth-of-type(even) selector"></div>
|
||
|
|
<p class="unitTest"></p>
|
||
|
|
<div class="unitTest" title=":nth-last-of-type(even) selector"></div>
|
||
|
|
<div class="unitTest" title=":nth-of-type(even) selector"></div>
|
||
|
|
</div>
|
||
|
|
<div class="test nthoftype3">
|
||
|
|
<div class="unitTest" title=":nth-of-type(3n+1) selector"></div>
|
||
|
|
<p class="unitTest"></p>
|
||
|
|
<p class="unitTest"></p>
|
||
|
|
<div class="unitTest" title=":nth-last-of-type(3n+2) selector"></div>
|
||
|
|
<p class="unitTest"></p>
|
||
|
|
<div class="unitTest" title=":nth-last-of-type(3n+1) selector"></div>
|
||
|
|
<div class="unitTest" title=":nth-of-type(3n+1) selector"></div>
|
||
|
|
<p class="unitTest"></p>
|
||
|
|
<div class="unitTest" title=":nth-last-of-type(3n+2) selector"></div>
|
||
|
|
<div class="unitTest" title=":nth-last-of-type(3n+1) selector"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test lastChild">
|
||
|
|
<p class="unitTest" title=":not(:last-child) selector"></p>
|
||
|
|
<div class="unitTest" title=":last-child selector"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test firstOfType">
|
||
|
|
<p class="unitTest" title=":first-of-type selector"></p>
|
||
|
|
<div class="unitTest" title=":first-of-type selector"></div>
|
||
|
|
<p class="unitTest" title=":not(:first-of-type)"></p>
|
||
|
|
<div class="unitTest" title=":not(:first-of-type)"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test lastOfType">
|
||
|
|
<p class="unitTest" title=":not(:last-of-type)"></p>
|
||
|
|
<div class="unitTest" title=":not(:last-of-type)"></div>
|
||
|
|
<p class="unitTest" title=":last-of-type selector"></p>
|
||
|
|
<div class="unitTest" title=":last-of-type selector"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test onlyChild">
|
||
|
|
<div class="unitTest" title=":only-child where the element is NOT the only child"></div>
|
||
|
|
<div class="unitTest">
|
||
|
|
<div class="unitTest" title=":only-child where the element is the only child"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test onlyOfType">
|
||
|
|
<p class="unitTest" title=":only-of-type"></p>
|
||
|
|
<div class="unitTest">
|
||
|
|
<div class="unitTest" title=":only-of-type"></div>
|
||
|
|
</div>
|
||
|
|
<div class="unitTest" title=":not(only-of-type)"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test empty">
|
||
|
|
<div class="unitTest isEmpty" title=":empty with empty element"></div>
|
||
|
|
<div class="unitTest isNotEmpty" title=":empty but element contains a whitespace"> </div>
|
||
|
|
<div class="unitTest isEmpty" title=":empty and element contains an SGML comment"><!-- foo --></div>
|
||
|
|
<div class="unitTest isNotEmpty" title=":empty but element contains a SPAN element"><span></span></div>
|
||
|
|
<div class="unitTest isNotEmpty" title=":empty but element contains an entity reference"> </div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test lang">
|
||
|
|
<div class="unitTest" title=":lang() where language comes from the document"></div>
|
||
|
|
<div class="unitTest" lang="fr" title=":lang() where language comes from the element"></div>
|
||
|
|
<div class="unitTest" lang="en-US" title=":lang() where language comes from the element but is a dialect of the language queried"></div>
|
||
|
|
<div class="unitTest t1" lang="es" title=":lang() where language comes from the element but the language queried is a dialect of the element's one so it should not match"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test attrLang">
|
||
|
|
<div class="unitTest t1" title="[|=] where language comes from the document"></div>
|
||
|
|
<div class="unitTest" lang="fr" title="[|=] where language comes from the element"></div>
|
||
|
|
<div class="unitTest t2" lang="en-US" title="[|=] where language comes from the element but is a dialect of the language queried"></div>
|
||
|
|
<div class="unitTest t3" lang="es" title="[|=] where language comes from the element but the language queried is a dialect of the element's one so it should not match"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test attrCaseInsensitive">
|
||
|
|
<div class="blox23s1 unitTest" foo="blox" title="Attribute value selector, case sensitivity identifier, syntax"></div>
|
||
|
|
<div class="blox23s2 unitTest" foo="blox" title="[*=], case sensitivity identifier, syntax"></div>
|
||
|
|
<div class="blox23s3 unitTest" foo="blox" title="[^=], case sensitivity identifier, syntax"></div>
|
||
|
|
<div class="blox23s4 unitTest" foo="blox" title="[$=], case sensitivity identifier, syntax"></div>
|
||
|
|
<div class="blox23s5 unitTest" foo="blox" title="[~=], case sensitivity identifier, syntax"></div>
|
||
|
|
<div class="blox23s6 unitTest" foo="blox" title="[|=], case sensitivity identifier, syntax"></div>
|
||
|
|
<div class="blox19 unitTest" title="Attribute value selector, case insensitive"></div>
|
||
|
|
<div class="blox20 unitTest" title="Attribute value selector, case sensitive"></div>
|
||
|
|
<div class="blox21 unitTest" title="[*=], case insensitive"></div>
|
||
|
|
<div class="blox22 unitTest" title="[*=], case sensitive"></div>
|
||
|
|
<div class="blox24 unitTest" title="[^=], case insensitive"></div>
|
||
|
|
<div class="blox25 unitTest" title="[^=], case sensitive"></div>
|
||
|
|
<div class="blox26 unitTest" title="[$=], case insensitive"></div>
|
||
|
|
<div class="blox27 unitTest" title="[$=], case insensitive"></div>
|
||
|
|
<div class="blox28 unitTest foobar" title="[~=], case insensitive"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test UI">
|
||
|
|
<button name="submit" type="submit" value="submit" class="t1" title=":enabled pseudo-class"><div class="unitTest"></div></button>
|
||
|
|
<button name="submit" type="submit" value="submit" class="t2" disabled="true" title=":enabled pseudo-class"><div class="unitTest"></div></button>
|
||
|
|
</div>
|
||
|
|
<div class="test UI">
|
||
|
|
<input class="t3" type="checkbox" checked="true"><div class="unitTest" title=":checked"></div>
|
||
|
|
the previous square should be green when the checkbox is checked and become red when you uncheck it
|
||
|
|
</div>
|
||
|
|
<div class="test UI">
|
||
|
|
<input class="t4" type="checkbox"><div class="unitTest" title=":not(:checked)"></div>
|
||
|
|
the previous square should be green when the checkbox is NOT checked and become red when you check it
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test tilda">
|
||
|
|
<div class="unitTest t1" title="~ combinator"></div>
|
||
|
|
<div class="unitTest" title="~ combinator"></div>
|
||
|
|
<div class="unitTest" title="~ combinator"></div>
|
||
|
|
<div class="unitTest" title="~ combinator"></div>
|
||
|
|
<span style="float:left">the three last squares should be green and become red when the pointer hovers over the white square</span>
|
||
|
|
</div>
|
||
|
|
<div class="test plus">
|
||
|
|
<div class="unitTest t1" title="+ combinator"></div>
|
||
|
|
<div class="unitTest t2" title="+ combinator"></div>
|
||
|
|
<div class="unitTest" title="+ combinator"></div>
|
||
|
|
<span style="float:left">the last square should be green and become red when the pointer hovers over the FIRST white square</span>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|