third_party/WebKit/LayoutTests/fast/css/radial-gradient-position-with-relative-offset.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 .box {
   6     height: 200px;
   7     width: 200px;
   8     margin: 10px;
   9 }
  10
  11 .gradient1 {
  12     background: radial-gradient(5em circle at left 55px bottom 75px, yellow, blue);
  13 }
  14
  15 .gradient2 {
  16     background: radial-gradient(5em circle at top 65px right 45%, yellow, blue);
  17 }
  18
  19 .gradient3 {
  20     background: radial-gradient(5em circle at bottom 65px right 45%, yellow, blue);
  21 }
  22
  23 .gradient4 {
  24     background: radial-gradient(5em circle at center left 45%, yellow, blue);
  25 }
  26
  27 .gradient5 {
  28     background: radial-gradient(5em circle at right 45% center, yellow, blue);
  29 }
  30
  31 .gradient6 {
  32     background: radial-gradient(5em circle at right calc(60px + 5px) center, yellow, blue);
  33 }
  34
  35 </style>
  36 </head>
  37 <body>
  38     <div class="gradient1 box"></div>
  39     <div class="gradient2 box"></div>
  40     <div class="gradient3 box"></div>
  41     <div class="gradient4 box"></div>
  42     <div class="gradient5 box"></div>
  43     <div class="gradient6 box"></div>
  44 </body>
  45 </html>