<!
DOCTYPE html >
<
link rel=
"author" title =
"Morten Stenshorne" href=
"mailto:mstensho@chromium.org" >
<
link rel=
"help" href=
"https://www.w3.org/TR/css-break-3/#breaking-rules " >
<
link rel=
"help" href=
"https://www.w3.org/TR/css-ruby-1/ " >
<
link rel=
"match" href=
"../reference/ref-filled-green-100px-square.xht" >
<
style >
ruby .under {
ruby-position: under;
}
ruby div {
display: inline-block;
vertical-align: top;
width: 25px;
background: green;
}
.main {
height: 50px;
}
.annotation {
height: 25px;
}
.filler {
position: absolute;
width: 25px;
height: 25px;
background: green;
}
</
style >
<p>Test passes if there is a filled green square and <
strong >no red</
strong >.</p>
<
div style =
"position:relative; width:100px; height:100px; background:red;" >
<
div style =
"columns:2; column-fill:auto; column-gap:0; height:175px; orphans:1; widows:1;" >
<
ruby >
<
div class=
"main" ></
div ><
rt ><
div class=
"annotation" ></
div ></
rt ></
ruby
><
ruby class=
"under" ><
div class=
"main" ></
div ><
rt ><
div class=
"annotation" ></
div ></
rt >
</
ruby >
<
br >
<
ruby >
<
div class=
"main" ></
div ><
rt ><
div class=
"annotation" ></
div ></
rt ></
ruby
><
ruby class=
"under" ><
div class=
"main" ></
div ><
rt ><
div class=
"annotation" ></
div ></
rt >
</
ruby >
<
br >
</
div >
<
div class=
"filler" style =
"left:0; top:75px;" ></
div >
<
div class=
"filler" style =
"left:25px; top:0;" ></
div >
<
div class=
"filler" style =
"left:50px; top:75px;" ></
div >
<
div class=
"filler" style =
"left:75px; top:0;" ></
div >
</
div >
Messung V0.5 C=92 H=95 G=93
¤ Dauer der Verarbeitung: 0.0 Sekunden
(vorverarbeitet)
¤
*© Formatika GbR, Deutschland