Nested XBL-defined widgets

[Klaus Nowikow]

I am trying to implement a 2D-plot widget in XBL (and SVG).

For that, I want to nest one element in another, like so:

<window xmlns=...>
<plot id="experiment" flex="1">
<axis/>
</plot>
</window>

See below for the code I have so far (simplified a little).
In the above example, I'd expect to see an unfilled ellipse centered
in the window (this works), and a blue circle, also centered in the
window (this doesn't). The blue circle shows up in the top left corner
of the window, so I suspect there is something wrong with the
parent/child relation between the <svg:svg> node from the 'plot' binding
and the <svg:circle> node from the 'axis' binding.

In other words, the 'expanded' DOM tree should look like this:

<svg:svg height="100%" width="100%">
<svg:ellipse cx="50%" cy="50%" rx="40%" ry="40%" stroke="black" fill="none"/>
<svg:circle cx="50%" cy="50%" r="10mm" fill="blue"/>
</svg:svg>

Is there something I can do to make this work?

Thank you,
Klaus

P.S.: Here is the code:

The CSS file:
plot {
-moz-binding: url(plot.xbl#plot);
display: block;
background-color: white;
}

plot axis {
-moz-binding: url(plot.xbl#axis);
display: block;
}

plot.xbl:
<binding id="plot">
<content>
<svg:svg height="100%" width="100%">
<svg:ellipse cx="50%" cy="50%" rx="40%" ry="40%" stroke="black" fill="none"/>
<children/>
</svg:svg>
</content>
</binding>

<binding id="axis" extends="svg:generic">
<content>
<svg:circle cx="50%" cy="50%" r="10mm" fill="blue"/>
</content>
</binding>