clip-path-circle-003.html

Enable keyboard shortcuts

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

<!DOCTYPE html>

<html>

<head>

    <title>CSS Masking: Test clip-path property and circle function with percentage radius</title>

    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">

    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">

    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path">

    <link rel="match" href="reference/clip-path-circle-ref.html">

    <meta name="fuzzy" content="0-38; 0-800">

    <meta name="assert" content="The clip-path property takes the basic shape

    'circle' for clipping. Test percentage value as argument for radius and no

    position arguments. The circle should be in the center of the element. On

    pass there should be a green circle.">

</head>

<body>

    <p>The test passes if there is a full green circle.</p>

    <div style="width: 200px; height: 200px; background-color: green; clip-path: circle(50%);"></div>

</body>

</html>