Blitz - WPT: clip-path-path-003.html

wpt / css / css-masking / clip-path / clip-path-path-003.html

/css/css-masking/clip-path/clip-path-path-003.html

<!DOCTYPE html>
<title>CSS Masking: clip-path property and path() function with non-zero reference box offset</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes/#basic-shape-functions">
<link rel="help" href="https://drafts.csswg.org/css-shapes/#funcdef-basic-shape-path">
<link rel="match" href="reference/green-100x100.html">
<style>
  #target {
    clip-path: path('M0 100h100v100h-100z');
  }
</style>
<svg>
  <g id="target">
    <rect y="-100" width="100" height="300" fill="red"/>
    <rect width="100" height="100" fill="green"/>
  </g>
</svg>

/css/css-masking/clip-path/reference/green-100x100.html

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