Blitz - WPT: feimage-element-ref-geometry.html

wpt / css / filter-effects / feimage-element-ref-geometry.html

/css/filter-effects/feimage-element-ref-geometry.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>feImage</title>
<link rel="author" title="Apple Inc" href="http://www.apple.com/">
<link rel="match" href="feimage-element-ref-geometry-ref.html">
<link rel="help" href="https://drafts.csswg.org/filter-effects/#feImageElement">
<style>
    .box {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 400px;
        height: 300px;
    }
    .test {
        width: 400px;
        height: 300px;
        filter: url(#filter);
    }
    .indicator {
        border: 1px solid black;
    }
    /* This also hides any antialiasing of the filter content due to scaling */
    .filter-indicator {
        top: 38px;
        left: 38px;
        width: 354px;
        height: 254px;
        box-sizing: border-box;
        border: 4px solid orange;
    }
</style>
</head>
<body>
  <svg width="100%" height="100%">
    <filter id="filter" x="-10%" y="0" width="120%" height="100%">
      <feImage href="#group"></feImage>
    </filter>
    <defs>
      <g id="group">
        <rect x="60" y="20" width="350" height="250" fill="green"></rect>
        <!-- The large offset triggers buffer scaling in some UAs -->
        <rect x="4000" y="4000" width="500" height="400" fill="red"></rect>
      </g>
    </defs>
  </svg>
</div>

<div class="test box"></div>
<div class="indicator box"></div>
<div class="filter-indicator box"></div>

</body>
</html>

/css/filter-effects/feimage-element-ref-geometry-ref.html

<!DOCTYPE html>
<html lang="en">
<head>
<style>
    svg, .box {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 400px;
        height: 300px;
    }
    .test {
        width: 400px;
        height: 300px;
        filter: url(#filter);
    }
    .indicator {
        border: 1px solid black;
    }
    /* This also hides any antialiasing of the filter content */
    .filter-indicator {
        top: 38px;
        left: 38px;
        width: 354px;
        height: 254px;
        box-sizing: border-box;
        border: 4px solid orange;
    }
</style>
</head>
<body>
  <svg width="400" height="300">
    <defs>
      <g id="group">
        <rect x="20" y="20" width="350" height="250" fill="green"></rect>
        <!-- The large offset triggers buffer scaling in some UAs -->
        <rect x="4000" y="4000" width="500" height="400" fill="red"></rect>
      </g>
    </defs>
    <use href="#group">
  </svg>
</div>

<div class="indicator box"></div>
<div class="filter-indicator box"></div>

</body>
</html>