clip-path-nested-clippath-zoom.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-masking/clip-path/clip-path-nested-clippath-zoom.html - WPT Dashboard Interop Dashboard

<!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>