wpt / css / css-images / gradient / linear-gradient-relative-currentcolor-stop.html

Status: PASS | Duration: 5ms | Subtests: 1/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi

/css/css-images/gradient/linear-gradient-relative-currentcolor-stop.html

<!doctype html>
<title>linear-gradient() with relative color stops referencing currentcolor</title>
<link rel="help" href="https://drafts.csswg.org/css-images/#linear-gradients">
<link rel="help" href="https://drafts.csswg.org/css-color-5/#typedef-color">
<link rel="match" href="../reference/100x100-blue-green.html">
<meta name="fuzzy" content="maxDifference=1; totalPixels=0-5000">
<style>
  .g {
      background-image: linear-gradient(rgb(from currentcolor r g b), rgb(from currentcolor r g b));
      width: 50px;
      height: 100px;
  }
  .a {
      color: blue;
  }
  .b {
      color: green;
      position: absolute;
      left: 50px;
      top: 0;
  }
</style>
<div style="position: relative">
  <div class="g a"></div>
  <div class="g b"></div>
</div>

/css/css-images/reference/100x100-blue-green.html

<!DOCTYPE html>
<div style="width: 50px; height: 100px; background-color: green; border-left: 50px solid blue"></div>