Attachment 441469 Details for Bug 231852 – Test case

Test case

clip-path-reduction.html (text/html), 1.09 KB, created by Simon Fraser (smfr) on 2021-10-15 19:39:06 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Simon Fraser (smfr)

Created: 2021-10-15 19:39:06 PDT

Size: 1.09 KB

patch

obsolete

><!DOCTYPE html>
><html>
><head>
>    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
>    <style>
>    .container {
>        margin: 20px;
>        border: 2px solid black;
>        width: 300px;
>        height: 300px;
>        overflow: hidden;
>    }
>
>    .container:hover {
>        overflow: visible;
>    }
>
>    .clipped {
>        margin-left: 50px;
>        width: 200px;
>        height: 200px;
>        clip-path: url(#avatar-bundle-clip-medium-superCondensed);
>        background-color: rgba(120, 46, 230, 0.5);
>        border: 1px solid gray;
>    }
>
>    .bubble {
>        width: 80px;
>        height: 80px;
>    }
>    </style>
>    <title></title>
></head>
><body class="sb-main-padded sb-show-main">
>    <p>You should see a purple cirle below.</p>
>
>    <svg width="0" height="0">
>        <defs>
>            <clippath id="avatar-bundle-clip-medium-superCondensed">
>                <rect x="0" y="0" width="200" height="200" rx="100"/>
>            </clippath>
>        </defs>
>    </svg>
>
>    <div class="container">
>        <div class="clipped">
>        </div> 
>    </div>
></body>
></html>

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>
    .container {
        margin: 20px;
        border: 2px solid black;
        width: 300px;
        height: 300px;
        overflow: hidden;
    }

    .container:hover {
        overflow: visible;
    }

    .clipped {
        margin-left: 50px;
        width: 200px;
        height: 200px;
        clip-path: url(#avatar-bundle-clip-medium-superCondensed);
        background-color: rgba(120, 46, 230, 0.5);
        border: 1px solid gray;
    }

    .bubble {
        width: 80px;
        height: 80px;
    }
    </style>
    <title></title>
</head>
<body class="sb-main-padded sb-show-main">
    <p>You should see a purple cirle below.</p>

    <svg width="0" height="0">
        <defs>
            <clippath id="avatar-bundle-clip-medium-superCondensed">
                <rect x="0" y="0" width="200" height="200" rx="100"/>
            </clippath>
        </defs>
    </svg>

    <div class="container">
        <div class="clipped">
        </div> 
    </div>
</body>
</html>

Actions: View

Attachments on bug 231852: 441469 | 441471 | 441500