css3-radial-gradients4.html | Explore in Territory

<!DOCTYPE html>

<html>
<meta name=fuzzy content="0-20;0-255">
<head>
  <style type="text/css" media="screen">
    div {
      display: inline-block;
      height: 50px;
      width: 80px;
      margin: 2px;
      border: 1px solid black;
      background-repeat: no-repeat;
    }

    .g1_1 { background-image: repeating-radial-gradient(closest-side circle at -50% -30%, red, green, red); }
    .g1_2 { background-image: repeating-radial-gradient(closest-side circle at  50% -30%, red, green, red); }
    .g1_3 { background-image: repeating-radial-gradient(closest-side circle at 150% -30%, red, green, red); }
    .g1_4 { background-image: repeating-radial-gradient(closest-side circle at 150%  30%, red, green, red); }
    .g1_5 { background-image: repeating-radial-gradient(closest-side circle at 130% 150%, red, green, red); }
    .g1_6 { background-image: repeating-radial-gradient(closest-side circle at  30% 150%, red, green, red); }
    .g1_7 { background-image: repeating-radial-gradient(closest-side circle at -30% 150%, red, green, red); }
    .g1_8 { background-image: repeating-radial-gradient(closest-side circle at -30%  50%, red, green, red); }

    .g2_1 { background-image: repeating-radial-gradient(farthest-side circle at -50% -30%, red, green, red); }
    .g2_2 { background-image: repeating-radial-gradient(farthest-side circle at  50% -30%, red, green, red); }
    .g2_3 { background-image: repeating-radial-gradient(farthest-side circle at 150% -30%, red, green, red); }
    .g2_4 { background-image: repeating-radial-gradient(farthest-side circle at 150%  30%, red, green, red); }
    .g2_5 { background-image: repeating-radial-gradient(farthest-side circle at 130% 150%, red, green, red); }
    .g2_6 { background-image: repeating-radial-gradient(farthest-side circle at  30% 150%, red, green, red); }
    .g2_7 { background-image: repeating-radial-gradient(farthest-side circle at -30% 150%, red, green, red); }
    .g2_8 { background-image: repeating-radial-gradient(farthest-side circle at -30%  50%, red, green, red); }

    .g3_1 { background-image: repeating-radial-gradient(closest-side ellipse at -50% -30%, red, green, red); }
    .g3_2 { background-image: repeating-radial-gradient(closest-side ellipse at  50% -30%, red, green, red); }
    .g3_3 { background-image: repeating-radial-gradient(closest-side ellipse at 150% -30%, red, green, red); }
    .g3_4 { background-image: repeating-radial-gradient(closest-side ellipse at 150%  30%, red, green, red); }
    .g3_5 { background-image: repeating-radial-gradient(closest-side ellipse at 130% 150%, red, green, red); }
    .g3_6 { background-image: repeating-radial-gradient(closest-side ellipse at  30% 150%, red, green, red); }
    .g3_7 { background-image: repeating-radial-gradient(closest-side ellipse at -30% 150%, red, green, red); }
    .g3_8 { background-image: repeating-radial-gradient(closest-side ellipse at -30%  50%, red, green, red); }

    .g4_1 { background-image: repeating-radial-gradient(farthest-side ellipse at -50% -30%, red, green, red); }
    .g4_2 { background-image: repeating-radial-gradient(farthest-side ellipse at  50% -30%, red, green, red); }
    .g4_3 { background-image: repeating-radial-gradient(farthest-side ellipse at 150% -30%, red, green, red); }
    .g4_4 { background-image: repeating-radial-gradient(farthest-side ellipse at 150%  30%, red, green, red); }
    .g4_5 { background-image: repeating-radial-gradient(farthest-side ellipse at 130% 150%, red, green, red); }
    .g4_6 { background-image: repeating-radial-gradient(farthest-side ellipse at  30% 150%, red, green, red); }
    .g4_7 { background-image: repeating-radial-gradient(farthest-side ellipse at -30% 150%, red, green, red); }
    .g4_8 { background-image: repeating-radial-gradient(farthest-side ellipse at -30%  50%, red, green, red); }

    .g5_1 { background-image: repeating-radial-gradient(closest-corner circle at -50% -30%, red, green, red); }
    .g5_2 { background-image: repeating-radial-gradient(closest-corner circle at  50% -30%, red, green, red); }
    .g5_3 { background-image: repeating-radial-gradient(closest-corner circle at 150% -30%, red, green, red); }
    .g5_4 { background-image: repeating-radial-gradient(closest-corner circle at 150%  30%, red, green, red); }
    .g5_5 { background-image: repeating-radial-gradient(closest-corner circle at 130% 150%, red, green, red); }
    .g5_6 { background-image: repeating-radial-gradient(closest-corner circle at  30% 150%, red, green, red); }
    .g5_7 { background-image: repeating-radial-gradient(closest-corner circle at -30% 150%, red, green, red); }
    .g5_8 { background-image: repeating-radial-gradient(closest-corner circle at -30%  50%, red, green, red); }

    .g6_1 { background-image: repeating-radial-gradient(farthest-corner circle at -50% -30%, red, green, red); }
    .g6_2 { background-image: repeating-radial-gradient(farthest-corner circle at  50% -30%, red, green, red); }
    .g6_3 { background-image: repeating-radial-gradient(farthest-corner circle at 150% -30%, red, green, red); }
    .g6_4 { background-image: repeating-radial-gradient(farthest-corner circle at 150%  30%, red, green, red); }
    .g6_5 { background-image: repeating-radial-gradient(farthest-corner circle at 130% 150%, red, green, red); }
    .g6_6 { background-image: repeating-radial-gradient(farthest-corner circle at  30% 150%, red, green, red); }
    .g6_7 { background-image: repeating-radial-gradient(farthest-corner circle at -30% 150%, red, green, red); }
    .g6_8 { background-image: repeating-radial-gradient(farthest-corner circle at -30%  50%, red, green, red); }

    .g7_1 { background-image: repeating-radial-gradient(closest-corner ellipse at -50% -30%, red, green, red); }
    .g7_2 { background-image: repeating-radial-gradient(closest-corner ellipse at  50% -30%, red, green, red); }
    .g7_3 { background-image: repeating-radial-gradient(closest-corner ellipse at 150% -30%, red, green, red); }
    .g7_4 { background-image: repeating-radial-gradient(closest-corner ellipse at 150%  30%, red, green, red); }
    .g7_5 { background-image: repeating-radial-gradient(closest-corner ellipse at 130% 150%, red, green, red); }
    .g7_6 { background-image: repeating-radial-gradient(closest-corner ellipse at  30% 150%, red, green, red); }
    .g7_7 { background-image: repeating-radial-gradient(closest-corner ellipse at -30% 150%, red, green, red); }
    .g7_8 { background-image: repeating-radial-gradient(closest-corner ellipse at -30%  50%, red, green, red); }

    .g8_1 { background-image: repeating-radial-gradient(farthest-corner ellipse at -50% -30%, red, green, red); }
    .g8_2 { background-image: repeating-radial-gradient(farthest-corner ellipse at  50% -30%, red, green, red); }
    .g8_3 { background-image: repeating-radial-gradient(farthest-corner ellipse at 150% -30%, red, green, red); }
    .g8_4 { background-image: repeating-radial-gradient(farthest-corner ellipse at 150%  30%, red, green, red); }
    .g8_5 { background-image: repeating-radial-gradient(farthest-corner ellipse at 130% 150%, red, green, red); }
    .g8_6 { background-image: repeating-radial-gradient(farthest-corner ellipse at  30% 150%, red, green, red); }
    .g8_7 { background-image: repeating-radial-gradient(farthest-corner ellipse at -30% 150%, red, green, red); }
    .g8_8 { background-image: repeating-radial-gradient(farthest-corner ellipse at -30%  50%, red, green, red); }

  </style>
</head>
<body>
  <div class="g1_1"></div>
  <div class="g1_2"></div>
  <div class="g1_3"></div>
  <div class="g1_4"></div>
  <div class="g1_5"></div>
  <div class="g1_6"></div>
  <div class="g1_7"></div>
  <div class="g1_8"></div>
  <br>

  <div class="g2_1"></div>
  <div class="g2_2"></div>
  <div class="g2_3"></div>
  <div class="g2_4"></div>
  <div class="g2_5"></div>
  <div class="g2_6"></div>
  <div class="g2_7"></div>
  <div class="g2_8"></div>
  <br>

  <div class="g3_1"></div>
  <div class="g3_2"></div>
  <div class="g3_3"></div>
  <div class="g3_4"></div>
  <div class="g3_5"></div>
  <div class="g3_6"></div>
  <div class="g3_7"></div>
  <div class="g3_8"></div>
  <br>

  <div class="g4_1"></div>
  <div class="g4_2"></div>
  <div class="g4_3"></div>
  <div class="g4_4"></div>
  <div class="g4_5"></div>
  <div class="g4_6"></div>
  <div class="g4_7"></div>
  <div class="g4_8"></div>
  <br>

  <div class="g5_1"></div>
  <div class="g5_2"></div>
  <div class="g5_3"></div>
  <div class="g5_4"></div>
  <div class="g5_5"></div>
  <div class="g5_6"></div>
  <div class="g5_7"></div>
  <div class="g5_8"></div>
  <br>

  <div class="g6_1"></div>
  <div class="g6_2"></div>
  <div class="g6_3"></div>
  <div class="g6_4"></div>
  <div class="g6_5"></div>
  <div class="g6_6"></div>
  <div class="g6_7"></div>
  <div class="g6_8"></div>
  <br>

  <div class="g7_1"></div>
  <div class="g7_2"></div>
  <div class="g7_3"></div>
  <div class="g7_4"></div>
  <div class="g7_5"></div>
  <div class="g7_6"></div>
  <div class="g7_7"></div>
  <div class="g7_8"></div>
  <br>

  <div class="g8_1"></div>
  <div class="g8_2"></div>
  <div class="g8_3"></div>
  <div class="g8_4"></div>
  <div class="g8_5"></div>
  <div class="g8_6"></div>
  <div class="g8_7"></div>
  <div class="g8_8"></div>
  <br>
</body>
chromium/third_party/blink/web_tests/fast/gradients/css3-radial-gradients4.html
