chromium/src/third_party/blink/web_tests/fast/gradients/conic-gradient-out-of-range.html

<style>
div {
  width: 80px;
  height: 80px;
  border: 1px solid grey;
  display: inline-block;
  margin: 5px;
}

.reference1 {
  background: conic-gradient(rgb(0%, 75%, 25%), rgb(0%, 25%, 75%));
}

.c1 {
  background: conic-gradient(rgb(0%, 75%, 25%), rgb(0%, 0%, 100%) 150%);
}

.c2 {
  background: conic-gradient(rgb(0%, 100%, 0%) -50%, rgb(0%, 25%, 75%));
}

.c3 {
  background: conic-gradient(rgb(0%, 100%, 0%) -50%, rgb(0%, 0%, 100%) 150%);
}

.c4 {
  background: repeating-conic-gradient(rgb(0%, 75%, 25%), rgb(0%, 25%, 75%));
}

.c5 {
  background: repeating-conic-gradient(rgb(0%, 100%, 0%) -50%, rgb(0%, 25%, 75%));
}

.c6 {
  background: repeating-conic-gradient(rgb(0%, 75%, 25%), rgb(0%, 0%, 100%) 150%);
}

.c7 {
  background: repeating-conic-gradient(rgb(0%, 100%, 0%) -50%, rgb(0%, 0%, 100%) 150%);
}

.reference2 {
  background: repeating-conic-gradient(#0f0 20deg, yellow 50deg, blue 70deg, #0f0 140deg);
}

.c8 {
  background: repeating-conic-gradient(blue -50deg, #0f0 20deg, yellow 50deg, blue 70deg);
}

.c9 {
  background: repeating-conic-gradient(yellow -70deg, blue -50deg, #0f0 20deg, yellow 50deg);
}

.c10 {
  background: repeating-conic-gradient(#0f0 -100deg, yellow -70deg, blue -50deg, #0f0 20deg);
}

.c11 {
  background: repeating-conic-gradient(blue -170deg, #0f0 -100deg, yellow -70deg, blue -50deg);
}

.c12 {
  background: repeating-conic-gradient(#0f0 260deg, yellow 290deg, blue 310deg, #0f0 380deg);
}

.c13 {
  background: repeating-conic-gradient(yellow 290deg, blue 310deg, #0f0 380deg, yellow 410deg);
}

.c14 {
  background: repeating-conic-gradient(blue 310deg, #0f0 380deg, yellow 410deg, blue 430deg);
}

</style>

<p>All gradients in a row should render the same.</p>

<div class="reference1"></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
<div class="c5"></div>
<div class="c6"></div>
<div class="c7"></div>
<br>

<div class="reference2"></div>
<div class="c8"></div>
<div class="c9"></div>
<div class="c10"></div>
<div class="c11"></div>
<div class="c12"></div>
<div class="c13"></div>
<div class="c14"></div>