Blitz - WPT: clip-path-ellipse-closest-farthest-corner.html

wpt / css / css-masking / clip-path / clip-path-ellipse-closest-farthest-corner.html

/css/css-masking/clip-path/clip-path-ellipse-closest-farthest-corner.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Masking: Test clip-path property and ellipse function with absolute values</title>
    <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/#propdef-clip-path">
    <link rel="match" href="reference/clip-path-ellipse-2-ref.html">
    <meta name="fuzzy" content="maxDifference=0-120; totalPixels=0-1500">
    <meta name="assert" content="The clip-path property takes the basic shape
        'ellipse' for clipping. Test the farthest-corner and closest-corner radial size keywords.">
    <style>
        .test {
            position: absolute;
            left: 150px;
            top: 100px;
            width: 250px;
            height: 275px;
            background-color: red;
            clip-path: ellipse(farthest-corner closest-corner at 175px 100px);
        }

        .inner {
            position: absolute;
            top: -60px;
            left: -110px;
            width: 550px;
            height: 420px;
            background-color: green;
        }
    </style>
</head>
<body>
    <p>The test passes if there is a full green ellipse.</p>
    <div class="test">
        <div class="inner"></div>
    </div>
</body>
</html>

/css/css-masking/clip-path/reference/clip-path-ellipse-2-ref.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Reftest Reference</title>
    <style>
        svg {
            position: absolute;
            height: 500px;
            width: 600px;
            left: 0px;
            top: 0px;
        }
    </style>
</head>
<body>
    <p>The test passes if there is a full green ellipse.</p>
    <svg>
        <ellipse cx="325" cy="200" rx="247.487" ry="125" fill="green"/>
    </svg>
</body>
</html>