clip-path-path-001-ref.html

Enable keyboard shortcuts

<!--

     Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/

-->

<!DOCTYPE html>

<html>

<head>

  <title>CSS Masking: Reference for clip-path's path function with nonzero</title>

  <style type="text/css">

    #rect {

      width: 100px;

      height: 100px;

      background-color: green;

      clip-path: url("#clip");

  </style>

</head>

<body>

  <p>The test passes if there is a green filled rect.</p>

  <div id="rect"></div>

  <svg height="0" width="0">

    <defs>

      <clipPath id="clip">

        <path clip-rule="nonzero" d="M10,10h80v80h-80zM25,25h50v50h-50z"/>

      </clipPath>

    </defs>

  </svg>

</body>

</html>