clip-path-shape-009.tentative.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-masking/clip-path/clip-path-shape-009.tentative.html - WPT Dashboard Interop Dashboard

<!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 origin of the reference box.">

</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% 0 from origin,

                    curve by -200px 0 with 50% 100% from origin / -50% 50% from start,

                    close)

               content-box;

</style>

<body>

  <div id="shape"></div>

</body>

</html>