LayoutTests/svg/overflow/overflow-on-inner-svg-element.svg

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<!-- 
 Verify overflow handling for inner <svg> elements.
 You should see 16 equally sized, equidistant green rectangles, and no scrollbars.

 Spec reference:
 For those elements to which the 'overflow' property can apply, if the 'overflow' property has the value hidden
 or scroll, the effect is that a new clipping path in the shape of a rectangle is created. The result is equivalent
 to defining a 'clipPath' element whose content is a 'rect' element which defines the equivalent rectangle, and then
 specifying the <uri> of this 'clipPath' element on the 'clip-path' property for the given element.

 Spec reference:
 Within SVG content, the value auto is equivalent to the value visible.
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500">
    <svg x="50" y="50" width="50" height="50" style="overflow: hidden">
        <rect width="100" height="100" fill="red"/>
        <rect width="50" height="50" fill="green"/>
    </svg>

    <svg x="150" y="50" width="25" height="25" style="overflow: visible">
        <rect width="25" height="50" fill="green"/>
        <rect x="25" width="25" height="50" fill="green"/>
    </svg>

    <svg x="50" y="150" width="25" height="25" style="overflow: auto">
        <rect width="25" height="50" fill="green"/>
        <rect x="25" width="25" height="50" fill="green"/>
    </svg>

    <svg x="150" y="150" width="50" height="50" style="overflow: scroll">
        <rect width="100" height="100" fill="red"/>
        <rect width="50" height="50" fill="green"/>
    </svg>

    <g transform="translate(200,200)">
        <svg x="50" y="50" width="50" height="50" style="overflow: hidden">
            <rect width="100" height="100" fill="red"/>
            <rect width="50" height="50" fill="green"/>
        </svg>

        <svg x="150" y="50" width="25" height="25" style="overflow: visible">
            <rect width="25" height="50" fill="green"/>
            <rect x="25" width="25" height="50" fill="green"/>
        </svg>

        <svg x="50" y="150" width="25" height="25" style="overflow: auto">
            <rect width="25" height="50" fill="green"/>
            <rect x="25" width="25" height="50" fill="green"/>
        </svg>

        <svg x="150" y="150" width="50" height="50" style="overflow: scroll">
            <rect width="100" height="100" fill="red"/>
            <rect width="50" height="50" fill="green"/>
        </svg>
    </g>

    <defs>
        <g id="testContent">
            <svg x="50" y="50" width="50" height="50" style="overflow: hidden">
                <rect width="100" height="100" fill="red"/>
                <rect width="50" height="50" fill="green"/>
            </svg>

            <svg x="150" y="50" width="25" height="25" style="overflow: visible">
                <rect width="25" height="50" fill="green"/>
                <rect x="25" width="25" height="50" fill="green"/>
            </svg>

            <svg x="50" y="150" width="25" height="25" style="overflow: auto">
                <rect width="25" height="50" fill="green"/>
                <rect x="25" width="25" height="50" fill="green"/>
            </svg>

            <svg x="150" y="150" width="50" height="50" style="overflow: scroll">
                <rect width="100" height="100" fill="red"/>
                <rect width="50" height="50" fill="green"/>
            </svg>
        </g>
    </defs>

    <g transform="rotate(90 225 225)">
        <use xlink:href="#testContent"/>
        <use x="200" y="200" xlink:href="#testContent"/>
    </g>

</svg>