third_party/WebKit/LayoutTests/svg/clip-path/deep-nested-clip-in-mask-panning.svg

   1 <svg xmlns="http://www.w3.org/2000/svg">
   2 <defs>
   3     <clipPath id="clip1" clipPathUnits="objectBoundingBox">
   4         <circle cx="0" cy="0" r="0.5" />
   5         <circle cx="0" cy="1" r="0.5" />
   6     </clipPath>
   7
   8     <clipPath id="clip2" clipPathUnits="objectBoundingBox">
   9         <circle cx="1" cy="0" r="0.5" />
  10         <circle cx="1" cy="1" r="0.5" />
  11     </clipPath>
  12
  13     <clipPath id="clip" clipPathUnits="objectBoundingBox">
  14         <rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/>
  15         <rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/>
  16     </clipPath>
  17
  18     <mask id="mask1a" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
  19         <rect x="0" y="0" width="1" height="1" fill="white"/>
  20         <rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip1)" />
  21     </mask>
  22
  23     <mask id="mask1b" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
  24         <rect x="0" y="0" width="1" height="1" fill="white"/>
  25         <rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip2)" />
  26     </mask>
  27
  28     <mask id="mask2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
  29         <rect x="0" y="0" width="1" height="1" fill="white" mask="url(#mask1a)"/>
  30     </mask>
  31
  32     <mask id="mask3" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
  33         <rect x="0" y="0" width="1" height="1" fill="white" mask="url(#mask1b)"/>
  34     </mask>
  35 </defs>
  36
  37 <!-- The mask on the <g> causes nothing to be renderer with Opera, clearly a bug -->
  38 <g mask="url(#mask1a)">
  39     <circle cx="50" cy="50" r="50" fill="black" mask="url(#mask1b)"/>
  40 </g>
  41
  42 <!-- The mask on the <g> causes nothing to be renderer with Opera, clearly a bug -->
  43 <g mask="url(#mask3)">
  44     <circle cx="150" cy="150" r="50" fill="black" mask="url(#mask2)"/>
  45 </g>
  46
  47 <text x="250" y="250" text-anchor="middle">The left shape should still be visible after panning<tspan x="250" dy="25">And the right shape shouldn't look distorted</tspan></text>
  48 <script>
  49 var translate = document.getElementsByTagName('svg')[0].currentTranslate;
  50 translate.x = -75;
  51 </script>
  52 </svg>