third_party/WebKit/LayoutTests/svg/custom/inline-svg-in-xhtml.xml

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2 <head>
   3   <title>XTech SVG Demo</title>
   4   <style>
   5     stop.begin { stop-color:yellow; }
   6     stop.end { stop-color:green; }
   7     body.invalid stop.end { stop-color:red; }
   8     #err { display:none; }
   9     body.invalid #err { display:inline; }
  10   </style>
  11   <script>
  12     function signalError() {
  13       document.getElementById('body').
  14         setAttribute("class", "invalid");
  15     }
  16   </script>
  17 </head>
  18 <body id="body"
  19    style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;">
  20   <form>
  21      <fieldset>
  22        <legend>HTML Form</legend>
  23        <p><label>Enter something:</label>
  24           <input type="text"/>
  25           <span id="err">Incorrect value!</span></p>
  26        <p><button onclick="signalError();">Activate!</button></p>
  27      </fieldset>
  28   </form>
  29   <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
  30     viewBox="0 0 100 100"
  31     preserveAspectRatio="xMidYMid slice"
  32     style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
  33     <linearGradient id="gradient">
  34       <stop class="begin" offset="0%"/>
  35       <stop class="end" offset="100%"/>
  36     </linearGradient>
  37     <rect x="0" y="0" width="100" height="100"
  38      style="fill:url(#gradient)" />
  39     <circle cx="50" cy="50" r="30"
  40      style="fill:url(#gradient)" />
  41   </svg>
  42 </body>
  43 </html>