188 lines
4.3 KiB
CSS
188 lines
4.3 KiB
CSS
|
||
/*
|
||
* This is a test file only - it doesn't represent a usable style sheet,
|
||
* it is meant only to test the lexer and parser.
|
||
*/
|
||
|
||
@import url(foo.css);
|
||
@import "bar.css";
|
||
@import url("fineprint.css") print;
|
||
@import url("bluish.css") projection, tv;
|
||
|
||
@import url(http://www.steadystate.com/primary.css) screen, tv;
|
||
@import "sounds_good.css" aural;
|
||
|
||
E[class~="hipster"][thing~="bob"]#myid { att1: hi; foo: bar; }
|
||
E:lang(c)#unique
|
||
E.hipster#myid { att1: hi; foo: bar; }
|
||
|
||
@media tv, radio {
|
||
@page { foo: bar; }
|
||
H1 { fillcolor: blue }
|
||
}
|
||
|
||
/* @import url(bad_import.css); */
|
||
|
||
H1, H2 {color:green;background-color:blue}
|
||
|
||
H1, H2 {color: green;background-color: blue}
|
||
|
||
H3, H4 & H5 {
|
||
color: red;
|
||
a: red;
|
||
b: red;
|
||
c: red;
|
||
d: red;
|
||
e: red;
|
||
f: red;
|
||
g: red;
|
||
h: red;
|
||
i: red;
|
||
j: red;
|
||
k: red;
|
||
l: red;
|
||
m: red;
|
||
n: red;
|
||
o: red;
|
||
}
|
||
|
||
H6 { color: black }
|
||
|
||
H7 & H8 {
|
||
color: red;
|
||
@page { foo: bar }
|
||
}
|
||
|
||
P[example="public class foo\
|
||
{\
|
||
private int x;\
|
||
\
|
||
foo(int x) {\
|
||
this.x = x;\
|
||
}\
|
||
\
|
||
}"] { color: red }
|
||
|
||
H1 { color: red; font-style: 12pt } /* Invalid value: 12pt */
|
||
|
||
P { color: blue; font-vendor: any; /* Invalid prop.: font-vendor */
|
||
font-variant: small-caps }
|
||
|
||
EM EM { font-style: normal }
|
||
|
||
H1 { color: red; rotation: 70minutes }
|
||
|
||
IMG { float: left } /* correct CSS2 */
|
||
|
||
IMG { float: left here } /* "here" is not a value of 'float' */
|
||
|
||
IMG { background: "red" } /* keywords cannot be quoted in CSS2 */
|
||
|
||
IMG { border-width: 3 } /* a unit must be specified for length values */
|
||
|
||
@three-dee {
|
||
@background-lighting {
|
||
azimuth: 30deg;
|
||
elevation: 190deg;
|
||
}
|
||
H1 { color: red }
|
||
}
|
||
|
||
H1 { color: blue !important }
|
||
|
||
P {counter-increment: par-num ! important }
|
||
H1 {counter-reset: par-num}
|
||
P:before {content: counter(par-num, upper-roman) ". "}
|
||
|
||
EM { color: #f00 } /* #rgb */
|
||
EM { color: #ff0000 } /* #rrggbb */
|
||
EM { color: rgb(255,0,0) } /* integer range 0 - 255 */
|
||
EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */
|
||
|
||
FOO { content: "Argos\t\n" }
|
||
|
||
R1 { a: U+aaaaa-ffffff }
|
||
R2 { a: U+?????? }
|
||
R3 { a: U+f????? }
|
||
R4 { a: U+fffff? }
|
||
R5 { a: U+ffffff }
|
||
|
||
* {} /* a=0 b=0 c=0 -> specificity = 0 */
|
||
LI {} /* a=0 b=0 c=1 -> specificity = 1 */
|
||
UL LI {} /* a=0 b=0 c=2 -> specificity = 2 */
|
||
UL OL+LI {} /* a=0 b=0 c=3 -> specificity = 3 */
|
||
H1 + *[REL=up]{} /* a=0 b=1 c=1 -> specificity = 11 */
|
||
UL OL LI.red {} /* a=0 b=1 c=3 -> specificity = 13 */
|
||
LI.red.level {} /* a=0 b=2 c=1 -> specificity = 21 */
|
||
#x34y {} /* a=1 b=0 c=0 -> specificity = 100 */
|
||
|
||
DIV > P:first-child { text-indent: 0 }
|
||
|
||
HTML:lang(fr) { quotes: '<27> ' ' <20>' }
|
||
HTML:lang(de) { quotes: '<27>' '<27>' '\2039' '\203A' }
|
||
:lang(fr) > Q { quotes: '<27> ' ' <20>' }
|
||
:lang(de) > Q { quotes: '<27>' '<27>' '\2039' '\203A' }
|
||
|
||
H1 { bogus: alpha & beta }
|
||
|
||
H2 { foo: inherit; ;; }
|
||
|
||
/*
|
||
* Counters and stuff
|
||
*/
|
||
P {counter-increment: par-num}
|
||
H1 {counter-reset: par-num}
|
||
P:before {content: counter(par-num, upper-roman) ". "}
|
||
H1:before {
|
||
content: "Chapter " counter(chapter) ". ";
|
||
counter-increment: chapter; /* Add 1 to chapter */
|
||
counter-reset: section; /* Set section to 0 */
|
||
}
|
||
H2:before {
|
||
content: counter(chapter) "." counter(section) " ";
|
||
counter-increment: section;
|
||
}
|
||
OL { counter-reset: item }
|
||
LI { display: block }
|
||
LI:before { content: counters(item, "."); counter-increment: item }
|
||
H1:before { content: counter(chno, upper-latin) ". " }
|
||
H2:before { content: counter(section, upper-roman) " - " }
|
||
BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
|
||
DIV.note:before { content: counter(notecntr, disc) " " }
|
||
P:before { content: counter(p, none) }
|
||
|
||
/*
|
||
* Content stuff (w/attr function)
|
||
*/
|
||
@media aural {
|
||
BLOCKQUOTE:after { content: url("beautiful-music.wav") }
|
||
}
|
||
|
||
IMG:before { content: attr(alt) }
|
||
|
||
H1:before {
|
||
display: block;
|
||
text-align: center;
|
||
content: "chapter\A hoofdstuk\A chapitre"
|
||
}
|
||
|
||
/*
|
||
* Clip (w/rect function)
|
||
*/
|
||
P { clip: rect(5px, 10px, 10px, 5px); }
|
||
P { clip: rect(5px, -5px, 10px, 5px); }
|
||
|
||
|
||
P { font-size: 12pt; line-height: 12pt }
|
||
P:first-letter {
|
||
font-size: 200%;
|
||
font-style: italic;
|
||
font-weight: bold;
|
||
float: left;
|
||
bogus: foo(p1, p2, "hello", url(primary.css))
|
||
}
|
||
SPAN { text-transform: uppercase }
|
||
|
||
P { color: red; font-size: 12pt }
|
||
P:first-letter { color: green; font-size: 200% }
|
||
P:first-line { color: blue }
|