SVG mask test cases

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<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%">
            <path id="testid" style="stroke-dasharray: 5px, 3px;" stroke="#FF0000" stroke-width="3" d="M50,50 L50,30 A20,20 90 0,0 30,50 Z" />
        </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="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(#myMask2)" />
</svg>
            
            </td>
            <td>

<svg width="100px" height="100px">
    <rect x="0" y="0" width="100" height="100" fill="#FFF" stroke="#000" />
</svg>
            
            </td>
 ...

CSS

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

th, td{
    padding : 5px;
}

thead th{
    text-align: center;
}


tbody th{
    text-align:right;
}

JavaScript

a = 1;
$(function() {
	//setInterval(fn, 400);
});

function fn() {
$('#testid').css('stroke-dasharray', a + 'px, ' + a + 'px');
a++
}