Blitz - WPT: clip-path-shape-008.html

wpt / css / css-masking / clip-path / clip-path-shape-008.html

/css/css-masking/clip-path/clip-path-shape-008.html

<!DOCTYPE html>
<html>
<head>
  <title>CSS Masking: Test clip-path property and shape function with content-box</title>
  <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape">
  <link rel="match" href="reference/clip-path-shape-control-points-ref.html">
  <meta name="assert" content="Relative segments in the shape() function can use control points relative to the start or end of the segment.">
</head>
<style>
  body {
    margin: 0;
  }
  #shape {
    width: 240px;
    height: 240px;
    padding: 10px;
    border: 10px solid red;
    box-sizing: border-box;
    background-color: green;
    /* The size of the content-box is 200x200. */
    clip-path: shape(from center left,
                    curve by 200px 0 with 50% -50% from start / -50% -50% from end,
                    curve by -200px 0 with 50% 50% from end / -50% 50% from start,
                    close)
               content-box;
  }
</style>
<body>
  <div id="shape"></div>
</body>
</html>

/css/css-masking/clip-path/reference/clip-path-shape-control-points-ref.html

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    body {
      margin: 0;
    }
    #shape {
      margin: 20px;
      width: 200px;
      height: 200px;
      background-color: green;
      clip-path: url("#clip");
    }
  </style>
</head>
<body>
  <div id="shape"></div>
  <svg height="0" width="0">
    <defs>
      <clipPath id="clip">
        <path clip-rule="nonzero" d="M0 100 C100 0 100 0 200 100 C100 200 100 200 0 100z"/>
      </clippath>
    </defs>
  </svg>
</body>
</html>