peacock-crest 0.1.0

A CSS library for parsing and applying styles to in-memory DOM structures
Documentation

/* section numbers refer to CSS2.1 */

/* page setup */
html {}
body {}

/* introduction message */
.intro {}
.intro * {}
.intro h1 {}
.intro :link {}
.intro :visited {}

/* picture setup */
#top {} /* "Hello World!" text */
.picture {} /* containing block for face */
.picture {} /* overriden by preferred stylesheet below */

/* top line of face (scalp): fixed positioning and min/max height/width */
.picture p {}

/* bits that shouldn't be part of the top line (and shouldn't be visible at all): HTML parsing, "+" combinator, stacking order */
.picture p.bad {}
.picture p + p {} /* shouldn't match anything */
.picture p + table + p {}

/* second line of face: attribute selectors, float positioning */
[class~=one].first.one {}
[class~=one][class~=first] [class=second\ two][class="second two"] {} /* only content of abs pos block */

/* third line of face: width and overflow */
.forehead {}
.forehead * {}

/* class selectors headache */
.two.error.two {} /* shouldn't match */
.forehead.error.forehead {} /* shouldn't match */
/* [class=second two] {} */ /* this should be ignored (invalid selector -- grammar says it only accepts IDENTs or STRINGs) */

/* fourth and fifth lines of face, with eyes: paint order test (see appendix E) and fixed backgrounds */
/* the two images are identical: 2-by-2 squares with the top left
    and bottom right pixels set to yellow and the other two set to
    transparent. Since they are offset by one pixel from each other,
    the second one paints exactly over the transparent parts of the
    first one, thus creating a solid yellow block. */
.eyes {}
#eyes-a {} /* contents should paint top-most because they're inline */
#eyes-a object {}
#eyes-a object[type] {} /* should have no effect since that object should fallback to being inline (height/width don't apply to inlines) */
#eyes-a object object object {}
#eyes-b {} /* should paint in the middle layer because it is a float */
#eyes-c {} /* should paint bottom most because it is a block */

/* lines six to nine, with nose: auto margins */
.nose {}
.nose > div {}
.nose div div {}
.nose :hover div {}
.nose div:hover :before {}
.nose div:hover :after {}
.nose div div:before {}
.nose div    :after {}

/* between lines nine and ten: margin collapsing with 'float' and 'clear' */
.empty {}
.empty div {}
.smile {}

/* line ten and eleven: containing block for abs pos */
.smile div {}
.smile div div {}

/* smile (over lines ten and eleven): backgrounds behind borders, inheritance of 'float', nested floats, negative heights */
.smile div div span {}
.smile div div span em {} /* zero-height block; width comes from (zero-height) child. */
.smile div div span em strong {}

/* line twelve: line-height */
.chin {}
.chin div {}

/* line thirteen: cascade and selector tests */
.parser-container div {} /* setup */
div.parser-container * {} /* setup */
* div.parser {} /* setup */

/* line thirteen continued: parser tests */
/* .parser {} */
/* .parser {}; background: yellow; } setup with parsing test */
* html .parser {}
\.parser {}
/* .parser {}; */
.parser {}
.parser {}
/* .parser {} */
.parser {}

/* line fourteen (last line of face): table */
ul {}
ul li {}
ul li.first-part {}
ul li.second-part {} /* anonymous table cell wraps around this */
ul li.third-part {}
ul li.fourth-part {} /* anonymous table cell wraps around this */

/* bits that shouldn't appear: inline alignment in cells */
.image-height-test {} /* only the area between the top of the line box and the top of the image should be visible */
table {}
td {}