third_party/WebKit/LayoutTests/fast/gradients/css3-radial-gradients2.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style type="text/css" media="screen">
   6     .box {
   7       display: inline-block;
   8       height: 250px;
   9       width: 200px;
  10       margin: 10px;
  11       border: 1px solid black;
  12       background-repeat: no-repeat;
  13     }
  14
  15     .gradient1 {
  16       /* Green should coincide with the edge of the box, with blue fill (buggy in CG). */
  17       background-image: -webkit-radial-gradient(left, circle closest-corner, red, green 150px, blue);
  18       background-image: -moz-radial-gradient(left, circle closest-corner, red, green 150px, blue);
  19     }
  20
  21     .gradient2 {
  22       /* Fill should be orange (buggy in CG). */
  23       background-image: -webkit-radial-gradient(left, circle closest-corner, red, green 150px, blue, orange 101%);
  24       background-image: -moz-radial-gradient(left, circle closest-corner, red, green 150px, blue, orange 101%);
  25     }
  26
  27     .gradient3 {
  28       background-image: -webkit-radial-gradient(-100px center, ellipse farthest-corner, black, white);
  29       background-image: -moz-radial-gradient(-100px center, ellipse farthest-corner, black, white);
  30     }
  31
  32     .gradient4 {
  33       background-image: -webkit-radial-gradient(-100px center, ellipse closest-corner, black, white);
  34       background-image: -moz-radial-gradient(-100px center, ellipse closest-corner, black, white);
  35     }
  36
  37     .gradient5 {
  38       background-image: -webkit-radial-gradient(bottom right, black, white);
  39       background-image: -moz-radial-gradient(bottom right, black, white);
  40     }
  41
  42     .gradient6 {
  43       background-image: -webkit-radial-gradient(50% 20%, ellipse contain, black, white);
  44       background-image: -moz-radial-gradient(50% 20%, ellipse contain, black, white);
  45     }
  46
  47   </style>
  48   <script type="text/javascript" charset="utf-8">
  49     if (window.testRunner) {
  50       testRunner.dumpAsTextWithPixelResults();
  51     }
  52   </script>
  53 </head>
  54 <body>
  55
  56   <div class="gradient1 box"></div>
  57   <div class="gradient2 box"></div>
  58   <div class="gradient3 box"></div>
  59   <br>
  60   <div class="gradient4 box"></div>
  61   <div class="gradient5 box"></div>
  62   <div class="gradient6 box"></div>
  63
  64 </body>
  65 </html>