third_party/WebKit/LayoutTests/svg/transforms/text-with-pattern-inside-transformed-html.xhtml

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2 <head>
   3   <title>SVG inside transformed div</title>
   4   <style>
   5     body {
   6       background-color: white;
   7     }
   8     .box {
   9       height: 400px;
  10       width: 400px;
  11       margin: 50px;
  12       border: 1px solid black;
  13       -o-transform: translate(30px, 30px) rotate(20deg);
  14       transform: translate(30px, 30px) rotate(20deg);
  15     }
  16   </style>
  17 </head>
  18 <body>
  19   <p>CSS Transformed HTML div with SVG inside it.  objectBoundingBox patterns on text.</p>
  20   <div class="box">
  21       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 480 360">
  22           <pattern id="pat1" width=".04" height=".4" viewBox="5 5 20 20">
  23             <rect x="5" y="5" width="10" height="10" fill="red" />
  24             <rect x="10" y="10" width="10" height="10" fill="green" />
  25           </pattern>
  26           <rect x="25" y="10" width="430" height="60" stroke="black" fill="url(#pat1)" />
  27           <text font-family="Arial" font-size="12"  x="25" y="85">Pattern created using red and green rectangles applied to fill of rectangle</text>
  28           <pattern id="pat2" width=".04" height=".4" viewBox="0 0 20 20">
  29             <rect x="0" y="0" width="10" height="10" fill="red" />
  30             <rect x="10" y="0" width="10" height="10" fill="green" />
  31             <rect x="0" y="10" width="10" height="10" fill="blue" />
  32             <rect x="10" y="10" width="10" height="10" fill="yellow" />
  33           </pattern>
  34           <rect x="35" y="110" width="410" height="40" fill="none" stroke="url(#pat2)" stroke-width="20" />
  35           <text font-family="Arial" font-size="12"  x="25" y="175">Pattern of 4 rectangles applied to a stroke of a rectangle.</text>
  36           <pattern id="pat3" width=".03" height=".3" viewBox="0 0 10 20">
  37             <rect x="0" y="0" width="10" height="10" fill="red" />
  38             <rect x="0" y="10" width="10" height="10" fill="green" />
  39           </pattern>
  40           <text font-family="Arial" font-size="50" fill="url(#pat3)"  x="25" y="220">Pattern on fill</text>
  41           <text font-family="Arial" font-size="12"  x="25" y="235">Pattern consists of red and green rows</text>
  42           <pattern id="pat4" width=".06" height=".2" viewBox="0 0 20 10">
  43             <rect x="0" y="0" width="10" height="10" fill="red" />
  44             <rect x="10" y="0" width="10" height="10" fill="blue" />
  45           </pattern>
  46           <text font-family="Arial" font-size="40" fill="none" stroke="url(#pat4)" stroke-width="2"  x="25" y="275">Pattern on stroke</text>
  47           <text font-family="Arial" font-size="12"  x="25" y="290">Pattern consists of red and blue columns</text>
  48         <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.6 $</text>
  49         <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
  50       </svg>
  51   </div>
  52 </body>
  53 </html>