Blitz - WPT: svg-filter-render-srcdoc-frame.tentative.https.html

wpt / svg / styling / svg-filter-render-srcdoc-frame.tentative.https.html

/svg/styling/svg-filter-render-srcdoc-frame.tentative.https.html

<!DOCTYPE html>
<html>
<head>
<link rel="match" href="svg-filter-render-srcdoc-frame-ref.tentative.html">
<style type="text/css">
    iframe {
        border: none;
    }
    .svg-filter {
        filter: url(#svg-filter);
    }
</style>
</head>
<body>
    <svg width="0" height="0" display="none">
        <filter id="svg-filter">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        </filter>
    </svg>
    <div>
        SVG filter security test: this test passes if there is a filter effect on the srcdoc frame.
    </div>
    <br />
    <div>
        <iframe class="svg-filter" width="100px" height="100px" srcdoc="
            <!DOCTYPE html>
            <html>
            <head>
            <style type=&quot;text/css&quot;>
                body {
                    margin: 0px;
                }
                .square {
                    width: 20px;
                    height: 20px;
                    background: black;
                }
            </style>
            </head>
            <body>
                <div class=&quot;square&quot;></div>
            </body>
            </html>
        "></iframe>
    </div>
</body>
</html>

/svg/styling/svg-filter-render-srcdoc-frame-ref.tentative.html

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    .square {
        width: 20px;
        height: 20px;
        background: black;
    }
    .fake-iframe {
        width: 100px;
        height: 100px;
    }
    .svg-filter {
        filter: url(#svg-filter);
    }
</style>
</head>
<body>
    <svg width="0" height="0" display="none">
        <filter id="svg-filter">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        </filter>
    </svg>
    <div>
        SVG filter security test: this test passes if there is a filter effect on the srcdoc frame.
    </div>
    <br />
    <div>
        <div class="svg-filter fake-iframe">
            <div class="square"></div>
        </div>
    </div>
</body>
</html>