third_party/WebKit/LayoutTests/svg/custom/group-opacity.svg

   1 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   2
   3   <title>
   4     Fills, strokes and opacity
   5   </title>
   6
   7   <defs>
   8     <linearGradient id="gradient_fill">
   9       <stop offset="0" stop-color="red" />
  10       <stop offset="1" stop-color="green" />
  11     </linearGradient>
  12     <linearGradient id="stroke_fill">
  13       <stop offset="0" stop-color="blue" />
  14       <stop offset="1" stop-color="yellow" />
  15     </linearGradient>
  16   </defs>
  17
  18   <g transform="translate(10,10)">
  19     <rect width="100" height="100"
  20           fill="red" stroke="green" stroke-width="10"
  21           fill-opacity="0.5" stroke-opacity="0.5" />
  22
  23     <g opacity="0.5">
  24       <rect x="115" width="100" height="100"
  25             fill="red" stroke="green" stroke-width="10" />
  26     </g>
  27
  28     <!--
  29       was wrong in WebKit, should render as preceding example
  30       as "opacity" is not equivalent to "stroke-opacity"
  31       and "fill-opacity" combined
  32     -->
  33     <rect x="230" width="100" height="100"
  34           fill="red" stroke="green" stroke-width="10"
  35           opacity="0.5" />
  36
  37     <!--
  38       was wrong in WebKit, "fill-opacity" and "stroke-opacity"
  39       are not taken into account for gradient fills and strokes
  40      -->
  41     <rect x="345" width="100" height="100"
  42           fill="url(#gradient_fill)" stroke="url(#stroke_fill)" stroke-width="10"
  43           fill-opacity="0.5" stroke-opacity="0.5" />
  44
  45     <!--
  46       was wrong in WebKit, same bug as rect #2
  47      -->
  48     <rect x="460" width="100" height="100"
  49           fill="url(#gradient_fill)" stroke="url(#stroke_fill)" stroke-width="10"
  50           opacity="0.5" />
  51   </g>
  52
  53   <!-- reference images -->
  54   <g transform="translate(5,120)">
  55     <image xlink:href="resources/groupOpacityReference1.png" width="110" height="110" />
  56     <image x="115" xlink:href="resources/groupOpacityReference2.png" width="110" height="110" />
  57     <image x="230" xlink:href="resources/groupOpacityReference2.png" width="110" height="110" />
  58     <image x="345" xlink:href="resources/groupOpacityReference3.png" width="110" height="110" />
  59     <image x="460" xlink:href="resources/groupOpacityReference4.png" width="110" height="110" />
  60   </g>
  61
  62 </svg>