Test overflow property on SVG

by Nikos Andronikos

HTML

<h2>Symbol tests - A full circle indicates overflow</h2>
<svg height="500" width="500" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <symbol viewBox="0 0 1 1" id="initial" overflow="initial">
            <circle cx="0" cy="0" r="1" fill="skyblue"/>
        </symbol>
        <symbol viewBox="0 0 1 1" id="hidden" overflow="hidden">
            <circle cx="0" cy="0" r="1" fill="green"/>
        </symbol>
        <symbol viewBox="0 0 1 1" id="auto" overflow="auto">
            <circle cx="0" cy="0" r="1" fill="red"/>
        </symbol>
        <symbol viewBox="0 0 1 1" id="default">
            <circle cx="0" cy="0" r="1" fill="blue"/>
        </symbol>
    </defs>
    <rect width="500" height="500" fill="#DDD"/>
    <use xlink:href="#initial" x="100" y="100" width="100" height="100"/>
    <use xlink:href="#auto" x="200" y="200" width="100" height="100"/>
    <use xlink:href="#hidden" x="300" y="300" width="100" height="100"/>
    <use xlink:href="#default" x="400" y="400" width="100" height="100"/>
    <text x="200" y="50">initial</text>
    <text x="300" y="150">auto</text>
    <text x="340" y="280">hidden</text>
    <text x="440" y="380">default</text>    
</svg>
<h2>SVGElement tests - the absence of skyblue indicates overflow</h2>
<h3>default</h3>
<svg height="500" width="500" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
    <rect fill="skyblue" height="500" width="500"></rect>
    <svg height="200" width="200">
        <rect style="clip: rect(0 400px 400px 0)" fill="green" height="500" width="500"></rect>
    </svg>
</svg>
<h3>hidden</h3>
<svg height="500" width="500" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
    <rect fill="skyblue" height="500" width="500"></rect>
    <svg height="200" width="200" overflow="hidden">
        <rect style="clip: rect(0 400px 400px 0)" fill="green" height="500" width="500"></rect>
   ...

CSS

body {font-family: sans-serif; font-size: 0.75em;}