third_party/WebKit/LayoutTests/svg/custom/gradient-stop-corner-cases.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 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="tiny" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360">
   4   <title id="test-title">gradient stop corner cases</title>
   5   <g id="test-body-content">
   6     <!-- No stops, like fill = none -->
   7     <linearGradient id="defs1" gradientUnits="objectBoundingBox"  x1="0" y1="0" x2="1" y2="0">
   8     </linearGradient>
   9     <!-- One stop, like fill = black -->
  10     <linearGradient id="defs2" gradientUnits="objectBoundingBox"  x1="0" y1="0" x2="1" y2="0">
  11         <stop stop-color="black"  offset="1"/>
  12     </linearGradient>
  13     <!-- If a stop less than all previous stops, it is set equal to the largest stop-->
  14     <!-- This also tests if two stops are equal the last stop controls the color at the overlap point-->
  15     <linearGradient id="defs3" gradientUnits="objectBoundingBox"  x1="0" y1="0" x2="1" y2="0">
  16         <stop stop-color="yellow"  offset="0"/>
  17         <stop stop-color="red"  offset=".25"/>
  18         <stop stop-color="green"  offset=".5"/>
  19         <stop stop-color="blue"  offset=".1"/>
  20     </linearGradient>
  21     <!-- a stop less than 0 is clamped to 0; leftmost color should match stroke color -->
  22     <linearGradient id="defs4" gradientUnits="objectBoundingBox"  x1="0" y1="0" x2="1" y2="0">
  23         <stop stop-color="green" offset="-10"/>
  24         <stop stop-color="red" offset="1"/>
  25     </linearGradient>
  26     <!-- a stop more than 1 is clamped to 1; rightmost color should match strole color -->
  27     <linearGradient id="defs5" gradientUnits="objectBoundingBox"  x1="0" y1="0" x2="1" y2="0">
  28         <stop stop-color="red" offset="0"/>
  29         <stop stop-color="green" offset="10"/>
  30     </linearGradient>
  31     <!-- if 2 stop share the same value, the last one owns the value; there should be no red
  32          in the gradient -->
  33     <linearGradient id="defs6" gradientUnits="objectBoundingBox"  x1="0" y1="0" x2="1" y2="0">
  34         <stop stop-color="blue" offset="0"/>
  35         <stop stop-color="green" offset=".5"/>
  36         <stop stop-color="red" offset=".5"/>
  37         <stop stop-color="green" offset=".5"/>
  38         <stop stop-color="blue" offset="1"/>
  39     </linearGradient>
  40
  41     <rect x="20" y="10" width="440" height="30" fill="url(#defs1)" stroke="red"/>
  42     <rect x="20" y="60" width="440" height="30" fill="url(#defs2)" />
  43     <rect x="20" y="110" width="440" height="30" fill="url(#defs3)" />
  44     <rect x="20" y="160" width="440" height="30" fill="url(#defs4)" stroke="green"/>
  45     <rect x="20" y="210" width="440" height="30" fill="url(#defs5)" stroke="green"/>
  46     <rect x="20" y="260" width="440" height="30" fill="url(#defs6)"/>
  47   </g>
  48   <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
  49 </svg>