src/third_party/WebKit/LayoutTests/fast/gradients/unprefixed-color-hints-edge-cases-expected.html

   1 <!DOCTYPE html>
   2 <style>
   3   .box {
   4     display: inline-block;
   5     height: 100px;
   6     width: 200px;
   7     border: 1px solid black;
   8   }
   9
  10   .linear1 {
  11     background-image: linear-gradient(to right, red -80%, green -80%, green);
  12   }
  13
  14   .linear2 {
  15     background-image: linear-gradient(to right, red, green 0%, green);
  16   }
  17
  18   .linear3 {
  19     background-image: linear-gradient(to right, green, green 100%, red);
  20   }
  21
  22   .linear4 {
  23     background-image: linear-gradient(to right, green, blue);
  24   }
  25
  26   .linear5 {
  27     background-image: linear-gradient(to right, red, green, blue);
  28   }
  29
  30   .linear6 {
  31     background-image: linear-gradient(to right, green, green 50%, blue 50%, blue);
  32   }
  33
  34   .radial1 {
  35     background-image: radial-gradient(ellipse, red -80%, green -80%, green);
  36   }
  37
  38   .radial2 {
  39     background-image: radial-gradient(ellipse, red, green 0%, green);
  40   }
  41
  42   .radial3 {
  43     background-image: radial-gradient(ellipse, green, green 100%, red);
  44   }
  45
  46   .radial4 {
  47     background-image: radial-gradient(ellipse, green, blue);
  48   }
  49
  50   .radial5 {
  51     background-image: radial-gradient(ellipse, red, green, blue);
  52   }
  53
  54   .radial6 {
  55     background-image: radial-gradient(ellipse, green, green 50%, red, blue 50%, blue);
  56   }
  57 </style>
  58
  59 <div class="linear1 box"></div>
  60 <div class="linear2 box"></div>
  61 <div class="linear3 box"></div>
  62 <div class="linear4 box"></div>
  63 <div class="linear5 box"></div>
  64 <div class="linear6 box"></div>
  65 <div class="radial1 box"></div>
  66 <div class="radial2 box"></div>
  67 <div class="radial3 box"></div>
  68 <div class="radial4 box"></div>
  69 <div class="radial5 box"></div>
  70 <div class="radial6 box"></div>