<!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> <svg xmlns="http://www.w3.org/2000/svg"> <title>Testcase for CSS polygon clipPath</title> <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1246741 --> <rect width="100%" height="100%" fill="lime"/> <!-- test the clip is not too big (or ignored altogether) --> <rect width="100%" height="100%" fill="red" clip-path="polygon(100px 100px, 200px 100px, 200px 200px, 100px 200px)"/> <rect x="98" y="98" width="105" height="105" fill="lime"/> <!-- test the clip does not simply make the element not render --> <rect x="300" y="100" width="100" height="100" fill="red"/> <rect x="280" y="80" width="150" height="150" fill="lime" clip-path="polygon(20px 20px, 120px 20px, 120px 120px, 20px 120px)"/> <!-- percentage values --> <svg x="100" y="300" width="100" height="100"> <rect width="100%" height="100%" fill="red" clip-path="polygon(0 0, 50% 0, 50% 50%, 0 50%)"/> <rect width="55" height="55" fill="lime"/> </svg> <!-- mixed absolute and percentage values --> <svg x="300" y="300" width="100" height="100"> <rect width="100%" height="100%" fill="red" clip-path="polygon(0 0, 50% 0, 50px 50%, 0 50px)"/> <rect width="55" height="55" fill="lime"/> </svg> <!-- mixed other units --> <svg x="500" y="300" width="100" height="100"> <rect width="100%" height="100%" fill="red" clip-path="polygon(0 0, 5em 0, 5em 10%, 0 10px)"/> <rect width="5em" height="10%" fill="lime"/> </svg> <!-- check fill-rule and clip-rule are ignored for polygon clip-path --> <svg x="500" y="100" width="100" height="100" fill-rule="evenodd" clip-rule="evenodd"> <rect width="100%" height="100%" fill="red" clip-path="polygon(0 0, 50px 0, 50px 50px, 0 50px, 0 0, 50px 0, 50px 50px, 0 50px, 0 0)"/> <rect width="55" height="55" fill="lime"/> </svg> </svg>