third_party/WebKit/LayoutTests/fast/gradients/gradient-transparency.html

   1 <html>
   2 <head>
   3   <style>
   4     div, canvas, svg {
   5       width: 200px;
   6       height: 200px;
   7       margin: 10px;
   8       float: left;
   9     }
  10
  11   </style>
  12 </head>
  13 <script>
  14   function runTest() {
  15     var c1 = document.getElementById('c1');
  16     var ctx = c1.getContext('2d');
  17     ctx.scale(2, 1);
  18     var grad = ctx.createLinearGradient(0, 0, 0, 150);
  19
  20     grad.addColorStop(0, "green");
  21     grad.addColorStop(1, "transparent");
  22
  23     ctx.fillStyle = grad;
  24     ctx.fillRect(0, 0, 200, 200);
  25
  26     var c2 = document.getElementById('c2');
  27     ctx = c2.getContext('2d');
  28     ctx.scale(2, 1);
  29     grad = ctx.createRadialGradient(75, 75, 0, 75, 75, 125);
  30
  31     grad.addColorStop(0, "green");
  32     grad.addColorStop(1, "transparent");
  33
  34     ctx.fillStyle = grad;
  35     ctx.fillRect(0, 0, 200, 200);
  36   }
  37 </script>
  38 <body onload="runTest()">
  39   <div style="background-image: -webkit-linear-gradient(green 0%, transparent 100%);"></div>
  40   <div style="background-image: -webkit-repeating-linear-gradient(green 0%, transparent 5%);"></div>
  41   <div style="background-image: -webkit-radial-gradient(green 0%, transparent 100%);"></div>
  42   <div style="background-image: -webkit-repeating-radial-gradient(green 0%, transparent 5%);"></div>
  43   <canvas id="c1"></canvas>
  44   <canvas id="c2"></canvas>
  45
  46   <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  47     <defs>
  48       <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
  49         <stop offset="0%" style="stop-color:green;stop-opacity:1" />
  50         <stop offset="100%" style="stop-color:transparent;stop-opacity:0" />
  51       </linearGradient>
  52     </defs>
  53     <rect width="200" height="200" fill="url(#grad1)" />
  54   </svg>
  55
  56     <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  57     <defs>
  58       <radialGradient id="grad2" cx="50%" cy="50%" r="80%" fx="50%" fy="50%">
  59         <stop offset="0%" style="stop-color:green;stop-opacity:1" />
  60         <stop offset="100%" style="stop-color:transparent;stop-opacity:0" />
  61       </radialGradient>
  62     </defs>
  63     <rect width="200" height="200" fill="url(#grad2)" />
  64   </svg>
  65
  66 </body>
  67 </html>