wpt / css / css-masking / mask-image / mask-image-svg-loading-error.html

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

/css/css-masking/mask-image/mask-image-svg-loading-error.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>mask-image with a slow loading image-set() with a truncated image</title>
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-image">
<link rel="match" href="reference/mask-image-ref.html">
<style>
  svg > rect {
    mask-image: image-set(url("/images/green-100x100.png?pipe=slice(1,200)"));
  }
</style>
<p>The test passes if there is a green square and no red below.</p>
<svg height="200">
  <rect width="200" height="200" fill="green"/>
</svg>

/css/css-masking/mask-image/reference/mask-image-ref.html

<!DOCTYPE html>
<title>CSS Reference: mask-image</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<style>
#ref {
  position: absolute;
  width: 200px;
  height: 200px;
  background: green;
}
</style>
<p>The test passes if there is a green square and no red below.</p>
<div id="ref"></div>