<!
DOCTYPE HTML>
<
html>
<
head>
<
title>CSS 2.1 Test Suite: generated content</
title>
<
link rel=
"author" title=
"Robert O'Callahan" href=
"mailto:robert@ocallahan.org" />
<
link rel=
"author" title=
"Mozilla Corporation" href=
"http://mozilla.com/" />
<
link rel=
"help" href=
"http://www.w3.org/TR/CSS21/generate.html#before-after-content"/>
<
meta name=
"flags" content=
"" />
<
style>
table,
div.gen { counter-reset:ctr; quotes:
"\0022" "\0022" "\0022" "\0022"; }
.gen::before {
content:counter(ctr) url(square-outline-32x32.png) open-quote
"Before " attr(class);
counter-increment:ctr;
}
.gen::after {
content:counter(ctr) url(square-outline-32x32.png)
"After " attr(class) close-quote;
counter-increment:ctr;
}
table { border:1px solid blue; }
td { border:1px solid cyan; }
td { border-spacing:0; padding:0; }
tr.gen::before,
tr.gen::after { display:table-cell; }
tbody.gen::before,
tbody.gen::after { display:table-row; }
table.gen::before,
table.gen::after { display:table-row-group; }
table.
col::before,
table.gen.
col::after { display:table-column-group; }
/* note reordering here! */
table.headfoot::after { display:table-header-group; }
table.headfoot::before { display:table-footer-group; }
.cell { display:table-cell; }
.row { display:table-row; }
.rowgroup { display:table-row-group; }
.
table { display:
table; }
div.gencell::before,
div.gencell::after { display:table-cell; }
div.genrow::before,
div.genrow::after { display:table-row; }
div.genblock::before,
div.genblock::after { display:block; }
div.geninline::before,
div.geninline::after { display:inline; }
div { border:1px solid green; margin:5px; }
.varyheight::before { height:100px; background:yellow; }
.varyheight >
div { height:80px; background:orange; }
.varyheight::after { height:60px; background:brown; }
.varywidth::before { background:yellow; }
.varywidth >
div { background:orange; }
.varywidth::after { background:brown; }
</
style>
</
head>
<
body>
<
table style=
"border:none" width=
"100%"><
tr><
td style=
"border:none" valign=
"top">
<
div><
table><
tbody><
tr class=
"gen"><
td>Inner</
td></
tr></
tbody></
table></
div>
<
div><
table><
tbody class=
"gen"><
tr><
td>Inner</
td></
tr></
tbody></
table></
div>
<
div><
table class=
"gen"><
tfoot><
tr><
td>Inner</
td></
tr></
tfoot></
table></
div>
<
div><
table class=
"gen col"><
tbody><
tr><
td>Inner</
td></
tr></
tbody></
table></
div>
<
div><
table class=
"gen headfoot"><
tbody><
tr><
td>Inner</
td></
tr></
tbody></
table></
div>
<
div><
div class=
"gen table gencell varyheight"><
div class=
"cell">Inner</
div></
div></
div>
<
div><
div class=
"gen gencell varyheight"><
div class=
"cell">Inner</
div></
div></
div>
<
div><
div class=
"gen genrow varywidth"><
div class=
"row">Inner</
div></
div></
div>
</
td><
td style=
"border:none" valign=
"top">
<
div><
div class=
"gen row gencell"><
div class=
"cell">Inner</
div></
div></
div>
<
div><
div class=
"gen row genblock"><
div class=
"cell">Inner</
div></
div></
div>
<
div><
div class=
"gen row geninline"><
div class=
"cell">Inner</
div></
div></
div>
<
div><
div class=
"gen rowgroup genrow"><
div class=
"row"><
div class=
"cell">Inner</
div></
div></
div></
div>
<
div><
div class=
"gen rowgroup gencell"><
div class=
"row"><
div class=
"cell">Inner</
div></
div></
div><
/div>
<div><div class="gen rowgroup genblock"><div class="row"><div class="cell">Inner</div></div></div></div>
<div><div class="gen rowgroup geninline"><div class="row"><div class="cell">Inner</div></div></div></div>
</tr></td></table>
</body>
</html>
