<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>foreignObject can be styled</title>
  <style type="text/css">
   p { color: navy; }
   div { text-align: center; }
  </style>
 </head>
 <body>
  <p>There should be a blue circle with the word "TEST" in it below.</p>
  <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
   <rect x="0" y="0" width="400" height="400" fill="blue"/>
   <circle cx="200" cy="200" r="200" fill="navy"/>
   <foreignObject x="0" y="175" width="400" height="50" color="white" font-size="50">
    <div xmlns="http://www.w3.org/1999/xhtml"> TEST </div>
   </foreignObject>
  </svg>
 </body>
</html>