Blitz - WPT: clip-path-circle-003.html

wpt / css / css-masking / clip-path / clip-path-circle-003.html

/css/css-masking/clip-path/clip-path-circle-003.html

<!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="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.">
    <meta name="fuzzy" content="maxDifference=0-60; totalPixels=0-900">
</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>

/css/css-masking/clip-path/reference/clip-path-circle-ref.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Reftest Reference</title>
    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
</head>
<body>
    <p>The test passes if there is a full green circle.</p>
    <div style="width: 200px; height: 200px; border-radius: 100px; background-color: green;"></div>
</body>
</html>