SVG mask test cases

by JeremiePat

HTML

<table>
    <thead>
        <tr>
            <td></td>
            <th scope="col">Mask/Clip usage</th>
            <th scope="col">Expected result</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">
                maskUnits="userSpaceOnUse"<br>
                maskContentUnits="userSpaceOnUse"
            </th>
            <td>

<svg width="100px" height="100px">
    <defs>
        <mask id="myMask1" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" x="0" y="0" width="50%" height="50%">
            <circle cx="50%" cy="50%" r="20%" fill="#FFF" />
        </mask>
    </defs>
    <rect x="0" y="0" width="100" height="100" fill="#FFF" stroke="#000" />
    <rect x="0" y="0" width="50" height="50" mask="url(#myMask1)" />
</svg>
            
            </td>
            <td>

<svg width="100px" height="100px">
    <rect x="0" y="0" width="100" height="100" fill="#FFF" stroke="#000" />
    <path d="M50,50 L50,30 A20,20 90 0,0 30,50 Z" />
</svg>
            
            </td>
        </tr>
        
        <tr>
            <th scope="row">
                maskUnits="objectBoundingBox"<br>
                maskContentUnits="userSpaceOnUse"
            </th>
            <td>

<svg width="100px" height="100px">
    <defs>
        <mask id="myMask2" maskUnits="objectBoundingBox" maskContentUnits="userSpaceOnUse" x="0" y="0" width=".5" height=".5">
            <circle cx="50%" cy="50%" r="20%" fill="#FFF" />
        </mask>
    </defs>
    <rect x="0" y="0" width="100" height="100" fill="#FFF" stroke="#000" />
    <rect x="0" y="0" width="50" height="50" mask="url(#myMask2)" />
</svg>
            
            </td>
            <td>

<svg width="100px" height="100px">
    <rect x="0" y="0" width="100" height="100" fill="#FFF" stroke="#000" />
</svg>
            
            </td>
        </tr>
        
        <tr>
            <th scope="row">
                maskUnits="userSpaceOnUse"<br>
               ...

CSS

body{
    margin: 0;
    padding: 1em;
    font: .8em sans-serif;
}

th, td{
    padding : 5px;
}

thead th{
    text-align: center;
}


tbody th{
    text-align:right;
}