<?
xml version=
"1.0"?>
<svg
xmlns:
html=
"http://www.w3.org/1999/xhtml"
xmlns=
"http://www.w3.org/2000/svg">
<foreignObject transform=
"scale(2)" width=
"100%" height=
"100%">
<!-- test the two-span case, subimage covers two tiles -->
<
html:div style=
"width:2px; height:64px; background-position:-31px 0;
background-image:
url(square-left-right-32x32.png);
margin-bottom:5px;
">
</
html:div>
<
html:div style=
"width:64px; height:2px; background-position:0 -31px;
background-image:
url(square-top-bottom-32x32.png);
margin-bottom:5px;
">
</
html:div>
<!-- test the one-span case, subimage covers one tile at the end of the tile -->
<
html:div style=
"width:1px; height:64px; background-position:-31px 0;
background-image:
url(square-left-right-32x32.png);
margin-bottom:5px;
">
</
html:div>
<
html:div style=
"width:64px; height:1px; background-position:0 -31px;
background-image:
url(square-top-bottom-32x32.png);
margin-bottom:5px;
">
</
html:div>
<!-- test the one-span case, subimage covers one tile at the start of the tile -->
<
html:div style=
"width:1px; height:64px; background-position:0 0;
background-image:
url(square-left-right-32x32.png);
margin-bottom:5px;
">
</
html:div>
<
html:div style=
"width:64px; height:1px; background-position:0 0;
background-image:
url(square-top-bottom-32x32.png);
margin-bottom:5px;
">
</
html:div>
</foreignObject>
</svg>