third_party/WebKit/LayoutTests/svg/overflow/overflow-on-inner-svg-element.svg

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
   3 <!--
   4  Verify overflow handling for inner <svg> elements.
   5  You should see 16 equally sized, equidistant green rectangles, and no scrollbars.
   6
   7  Spec reference:
   8  For those elements to which the 'overflow' property can apply, if the 'overflow' property has the value hidden
   9  or scroll, the effect is that a new clipping path in the shape of a rectangle is created. The result is equivalent
  10  to defining a 'clipPath' element whose content is a 'rect' element which defines the equivalent rectangle, and then
  11  specifying the <uri> of this 'clipPath' element on the 'clip-path' property for the given element.
  12
  13  Spec reference:
  14  Within SVG content, the value auto is equivalent to the value visible.
  15 -->
  16 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500">
  17     <svg x="50" y="50" width="50" height="50" style="overflow: hidden">
  18         <rect width="100" height="100" fill="red"/>
  19         <rect width="50" height="50" fill="green"/>
  20     </svg>
  21
  22     <svg x="150" y="50" width="25" height="25" style="overflow: visible">
  23         <rect width="25" height="50" fill="green"/>
  24         <rect x="25" width="25" height="50" fill="green"/>
  25     </svg>
  26
  27     <svg x="50" y="150" width="25" height="25" style="overflow: auto">
  28         <rect width="25" height="50" fill="green"/>
  29         <rect x="25" width="25" height="50" fill="green"/>
  30     </svg>
  31
  32     <svg x="150" y="150" width="50" height="50" style="overflow: scroll">
  33         <rect width="100" height="100" fill="red"/>
  34         <rect width="50" height="50" fill="green"/>
  35     </svg>
  36
  37     <g transform="translate(200,200)">
  38         <svg x="50" y="50" width="50" height="50" style="overflow: hidden">
  39             <rect width="100" height="100" fill="red"/>
  40             <rect width="50" height="50" fill="green"/>
  41         </svg>
  42
  43         <svg x="150" y="50" width="25" height="25" style="overflow: visible">
  44             <rect width="25" height="50" fill="green"/>
  45             <rect x="25" width="25" height="50" fill="green"/>
  46         </svg>
  47
  48         <svg x="50" y="150" width="25" height="25" style="overflow: auto">
  49             <rect width="25" height="50" fill="green"/>
  50             <rect x="25" width="25" height="50" fill="green"/>
  51         </svg>
  52
  53         <svg x="150" y="150" width="50" height="50" style="overflow: scroll">
  54             <rect width="100" height="100" fill="red"/>
  55             <rect width="50" height="50" fill="green"/>
  56         </svg>
  57     </g>
  58
  59     <defs>
  60         <g id="testContent">
  61             <svg x="50" y="50" width="50" height="50" style="overflow: hidden">
  62                 <rect width="100" height="100" fill="red"/>
  63                 <rect width="50" height="50" fill="green"/>
  64             </svg>
  65
  66             <svg x="150" y="50" width="25" height="25" style="overflow: visible">
  67                 <rect width="25" height="50" fill="green"/>
  68                 <rect x="25" width="25" height="50" fill="green"/>
  69             </svg>
  70
  71             <svg x="50" y="150" width="25" height="25" style="overflow: auto">
  72                 <rect width="25" height="50" fill="green"/>
  73                 <rect x="25" width="25" height="50" fill="green"/>
  74             </svg>
  75
  76             <svg x="150" y="150" width="50" height="50" style="overflow: scroll">
  77                 <rect width="100" height="100" fill="red"/>
  78                 <rect width="50" height="50" fill="green"/>
  79             </svg>
  80         </g>
  81     </defs>
  82
  83     <g transform="rotate(90 225 225)">
  84         <use xlink:href="#testContent"/>
  85         <use x="200" y="200" xlink:href="#testContent"/>
  86     </g>
  87
  88 </svg>