Blitz - WPT: clip-path-nested-clippath-zoom.html

wpt / css / css-masking / clip-path / clip-path-nested-clippath-zoom.html

/css/css-masking/clip-path/clip-path-nested-clippath-zoom.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Masking: nested clip-path (clip-path on a clipPath) honors zoom</title>
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path">
<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property">
<link rel="match" href="reference/green-100x100.html">
<style>
#target {
    top: 4px;
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: green;
    clip-path: url(#outer);
    zoom: 2;
}
</style>
</head>
<body>
<svg width="0" height="0">
  <clipPath id="outer" clipPathUnits="userSpaceOnUse" clip-path="url(#inner)">
    <rect x="0" y="0" width="100" height="50"/>
    <rect x="0" y="50" width="100" height="50"/>
  </clipPath>
  <clipPath id="inner" clipPathUnits="userSpaceOnUse">
    <rect x="0" y="0" width="50" height="50"/>
  </clipPath>
</svg>
<div id="target"></div>
</body>
</html>

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

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