css3-degenerate-color-stops.html | Explore in Territory

<!DOCTYPE html>

<html>
<head>
  <style type="text/css" media="screen">
    .box {
      display: inline-block;
      height: 80px;
      width: 80px;
      margin: 2px;
      border: 1px solid black;
      background-repeat: no-repeat;
    }

    .linear1_1 {
      background-image: linear-gradient(to right, red -20%, green 50%);
    }

    .linear1_2 {
      background-image: linear-gradient(to right, green 50%, red 120%);
    }

    .linear1_3 {
      background-image: linear-gradient(to right, red -20%, green -10%);
    }

    .linear1_4 {
      background-image: linear-gradient(to right, red -10%, green -10%);
    }

    .linear1_5 {
      background-image: linear-gradient(to right, green 110%, red 120%);
    }

    .linear1_6 {
      background-image: linear-gradient(to right, green 110%, red 110%);
    }

    .linear1_7 {
      background-image: linear-gradient(to right, red -20%, green -10%, green 110%, red 120%);
    }


    .linear2_1 {
      background-image: linear-gradient(to left bottom, red -20%, green 50%);
    }

    .linear2_2 {
      background-image: linear-gradient(to left bottom, green 50%, red 120%);
    }

    .linear2_3 {
      background-image: linear-gradient(to left bottom, red -20%, green -10%);
    }

    .linear2_4 {
      background-image: linear-gradient(to left bottom, red -10%, green -10%);
    }

    .linear2_5 {
      background-image: linear-gradient(to left bottom, green 110%, red 120%);
    }

    .linear2_6 {
      background-image: linear-gradient(to left bottom, green 110%, red 110%);
    }

    .linear2_7 {
      background-image: linear-gradient(to left bottom, red -20%, green -10%, green 110%, red 120%);
    }


    .linear3_1 {
      background-image: repeating-linear-gradient(to right, red -30%, green -20%, red -10%);
    }

    .linear3_2 {
      background-image: repeating-linear-gradient(to right, red -10%, green 0%, red 10%);
    }

    .linear3_3 {
      background-image: repeating-linear-gradient(to right, red 90%, green 100%, red 110%);
    }

    .linear3_4 {
      background-image: repeating-linear-gradient(to right, red 110%, green 120%, red 130%);
    }

    .linear3_5 {
      background-image: repeating-linear-gradient(to right, red -20%, green -20%);

    }

    .linear3_6 {
      background-image: repeating-linear-gradient(to right, red -20%, green 50%, green 100%, red 120%);
    }

    .linear3_7 {
      background-image: repeating-linear-gradient(to right, red -20%, green 0%, green 50%, red 120%);
    }



    .linear4_1 {
      background-image: repeating-linear-gradient(to left bottom, red -30%, green -20%, red -10%);
    }

    .linear4_2 {
      background-image: repeating-linear-gradient(to left bottom, red -10%, green 0%, red 10%);
    }

    .linear4_3 {
      background-image: repeating-linear-gradient(to left bottom, red 90%, green 100%, red 110%);
    }

    .linear4_4 {
      background-image: repeating-linear-gradient(to left bottom, red 110%, green 120%, red 130%);
    }

    .linear4_5 {
      background-image: repeating-linear-gradient(to left bottom, red -20%, green -20%);

    }

    .linear4_6 {
      background-image: repeating-linear-gradient(to left bottom, red -20%, green 50%, green 100%, red 120%);
    }

    .linear4_7 {
      background-image: repeating-linear-gradient(to left bottom, red -20%, green 0%, green 50%, red 120%);
    }

    .radial1_1 {
      background-image: radial-gradient(red -50%, green 50%);
    }
    
    .radial1_2 {
      background-image: radial-gradient(green 50%, red 150%);
    }

    .radial1_3 {
      background-image: radial-gradient(red -20%, green -10%);
    }

    .radial1_4 {
      background-image: radial-gradient(red -10%, green -10%);
    }

    .radial1_5 {
      background-image: radial-gradient(green 110%, red 120%);
    }

    .radial1_6 {
      background-image: radial-gradient(green 110%, red 110%);
    }

    .radial1_7 {
      background-image: radial-gradient(red -20%, green -10%, green 110%, red 120%);
    }


    .radial2_1 {
      background-image: repeating-radial-gradient(red -50%, green -40%, red -30%);
    }
    
    .radial2_2 {
      background-image: repeating-radial-gradient(red -10%, green 0%, red 10%);
    }

    .radial2_3 {
      background-image: repeating-radial-gradient(red 90%, green 100%, red 110%);
    }

    .radial2_4 {
      background-image: repeating-radial-gradient(red 130%, green 140%, red 150%);
    }

    .radial2_5 {
      background-image: repeating-radial-gradient(red -50%, green -50%);
    }

    .radial2_6 {
      background-image: repeating-radial-gradient(red -50%, green 50%, green 100%, red 120%);
    }

    .radial2_7 {
      background-image: repeating-radial-gradient(red -20%, green 0%, green 50%, red 150%);
    }
  </style>
</head>
<body>

  <div class="linear1_1 box"></div>
  <div class="linear1_2 box"></div>
  <div class="linear1_3 box"></div>
  <div class="linear1_4 box"></div>
  <div class="linear1_5 box"></div>
  <div class="linear1_6 box"></div>
  <div class="linear1_7 box"></div>
  <br>

  <div class="linear2_1 box"></div>
  <div class="linear2_2 box"></div>
  <div class="linear2_3 box"></div>
  <div class="linear2_4 box"></div>
  <div class="linear2_5 box"></div>
  <div class="linear2_6 box"></div>
  <div class="linear2_7 box"></div>
  <br>
  
  <div class="radial1_1 box"></div>
  <div class="radial1_2 box"></div>
  <div class="radial1_3 box"></div>
  <div class="radial1_4 box"></div>
  <div class="radial1_5 box"></div>
  <div class="radial1_6 box"></div>
  <div class="radial1_7 box"></div>
  <br>

  <div class="linear3_1 box"></div>
  <div class="linear3_2 box"></div>
  <div class="linear3_3 box"></div>
  <div class="linear3_4 box"></div>
  <div class="linear3_5 box"></div>
  <div class="linear3_6 box"></div>
  <div class="linear3_7 box"></div>
  <br>

  <div class="linear4_1 box"></div>
  <div class="linear4_2 box"></div>
  <div class="linear4_3 box"></div>
  <div class="linear4_4 box"></div>
  <div class="linear4_5 box"></div>
  <div class="linear4_6 box"></div>
  <div class="linear4_7 box"></div>
  <br>

  <div class="radial2_1 box"></div>
  <div class="radial2_2 box"></div>
  <div class="radial2_3 box"></div>
  <div class="radial2_4 box"></div>
  <div class="radial2_5 box"></div>
  <div class="radial2_6 box"></div>
  <div class="radial2_7 box"></div>
  <br>
</body>
</html>
chromium/third_party/blink/web_tests/fast/gradients/css3-degenerate-color-stops.html
