Blitz - WPT: svg-filter-gradient-interpolation.html

wpt / css / filter-effects / svg-filter-gradient-interpolation.html

/css/filter-effects/svg-filter-gradient-interpolation.html

<!DOCTYPE html>
<html>
<head>
    <title>Gradient interpolation in linearRGB and SRGB contexts</title>
    <link rel="match" href="reference/svg-filter-gradient-interpolation-ref.html">
    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#FilterPrimitivesOverview">
    <meta name="fuzzy" content="maxDifference=0-13; totalPixels=0-32620">
    <meta name="flags" content="svg">
    <meta name="assert" content="Gradient interpolation should be the same with and without filters applied">
    <style type="text/css">
    svg {
        width: 500px;
        height: 500px;
    }
    </style>
</head>
<body>
    <p>The test passes if the two rects look identical</p>
    <svg>
        <defs>
          <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0" stop-color="white" />
              <stop offset="1" stop-color="blue" />
          </linearGradient>

          <filter primitiveUnits="objectBoundingBox" filterUnits="objectBoundingBox" id="filter_1">
              <feTile />
          </filter>
        </defs>

        <rect x="10" y="10" width="200" height="200" style="fill:url(#gradient); filter:url(#filter_1);"/>
        <rect x="10" y="220" width="200" height="200" style="fill:url(#gradient);"/>
    </svg>
</body>
</html>

/css/filter-effects/reference/svg-filter-gradient-interpolation-ref.html

<!DOCTYPE html>
<html>
<head>
    <title>Gradient interpolation in linearRGB and SRGB contexts</title>
    <style type="text/css">
    svg {
        width: 500px;
        height: 500px;
    }
    </style>
</head>
<body>
    <p>The test passes if the two rects look identical</p>
    <svg>
        <defs>
          <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0" stop-color="white" />
              <stop offset="1" stop-color="blue" />
          </linearGradient>
        </defs>

        <rect x="10" y="10" width="200" height="200" style="fill:url(#gradient);"/>
        <rect x="10" y="220" width="200" height="200" style="fill:url(#gradient);"/>
    </svg>
</body>
</html>