unprefixed-linear-gradients-color-hints.html

<!DOCTYPE html>
<style>
  .box {
    display: inline-block;
    height: 100px;
    width: 200px;
    border: 1px solid black;
  }

  .linear1 {
    background-image: linear-gradient(to right, red -80%, -50%, green, blue, green, 150%, blue 170%);
  }

  .linear2 {
    background-image: linear-gradient(to right, red, 10%, green 100px, 60%, blue);
  }

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

  .linear4 {
    background-image: linear-gradient(to right, red 4em, 6em, green 10em, 11em, blue);
  }

  .linear5 {
    background-image: linear-gradient(to right, red 10px, 10%, green 50px, 60%, blue 100px);
  }

  .linear6 {
    background-image: linear-gradient(to right, red 5%, 100px, green 50%, 160px, blue 90%);
  }

  .linear7 {
    background-image: linear-gradient(to right, red, 10%, transparent, 90%, blue);
  }

  .linear8 {
    background-image: linear-gradient(to right, transparent, 10%, red, 90%, transparent);
  }

</style>

<div class="linear1 box"></div>
<div class="linear2 box"></div>
<div class="linear3 box"></div>
<div class="linear4 box"></div>
<div class="linear5 box"></div>
<div class="linear6 box"></div>
<div class="linear7 box"></div>
<div class="linear8 box"></div>

chromium/third_party/blink/web_tests/fast/gradients/unprefixed-linear-gradients-color-hints.html