third_party/WebKit/LayoutTests/css3/calc/css3-radial-gradients.html

   1 <style>
   2 .box {
   3     display: inline-block;
   4     height: 120px;
   5     width: 200px;
   6     margin: 10px;
   7     border: 1px solid black;
   8     background-repeat: no-repeat;
   9 }
  10
  11 .gradient1 {
  12     background-image: -webkit-radial-gradient(calc(50px) calc(50%), circle closest-side, white, black);
  13     background-image: -moz-radial-gradient(calc(50px) calc(50%), circle closest-side, white, black);
  14 }
  15
  16 .gradient2 {
  17     background-image: -webkit-radial-gradient(calc(20px) calc(50px), ellipse closest-corner, white, black);
  18     background-image: -moz-radial-gradient(calc(20px) calc(50px), ellipse closest-corner, white, black);
  19 }
  20
  21 .gradient3 {
  22     background-image: -webkit-radial-gradient(calc(20%) calc(20%), circle closest-corner, white, black);
  23     background-image: -moz-radial-gradient(calc(20%) calc(20%), circle closest-corner, white, black);
  24 }
  25
  26 .gradient4 {
  27     background-image: -webkit-radial-gradient(left, circle cover, red, green calc(30%), blue);
  28     background-image: -moz-radial-gradient(left, circle cover, red, green calc(30%), blue);
  29 }
  30
  31 .gradient5 {
  32     background-image: -webkit-radial-gradient(ellipse cover, red, green calc(80px), blue);
  33     background-image: -moz-radial-gradient(ellipse cover, red, green calc(80px), blue);
  34 }
  35
  36 .gradient6 {
  37     background-image: -webkit-radial-gradient(circle cover, red calc(20%), green, blue calc(150%));
  38     background-image: -moz-radial-gradient(circle cover, red calc(20%), green, blue calc(150%));
  39 }
  40
  41 .gradient7 {
  42     background-image: -webkit-radial-gradient(calc(20%) calc(20%), circle closest-corner, red -50%, green, blue calc(150%));
  43     background-image: -moz-radial-gradient(calc(20%) calc(20%), circle closest-corner, red -50%, green, blue calc(150%));
  44 }
  45
  46 .gradient8 {
  47     background-image: -webkit-radial-gradient(circle closest-side, red, green calc(50% + 10px), blue);
  48     background-image: -moz-radial-gradient(circle closest-side, red, green -moz-calc(50% + 10px), blue);
  49 }
  50 </style>
  51 <body>
  52     <div class="gradient1 box"></div>
  53     <div class="gradient2 box"></div>
  54     <div class="gradient3 box"></div>
  55     <br>
  56     <div class="gradient4 box"></div>
  57     <div class="gradient5 box"></div>
  58     <div class="gradient6 box"></div>
  59     <br>
  60     <div class="gradient7 box"></div>
  61     <div class="gradient8 box"></div>
  62 </body>