<style>
body {
    margin: 0;
    padding: 0;
}
iframe {
    border: none;
    background-color: red;
}
div {
    display: inline-block;
}
.filtered {
    filter: url(#noop);
}
svg {
    display: none;
}
</style>
<p>Seeing green is ok. Seeing any red is bad.</p>

<p>Same origin</p>
<div>
    <iframe src="resources/solid-green.html"></iframe>
</div>

<div class="filtered">
    <iframe src="resources/solid-green.html"></iframe>
</div>

<br>

<p>Cross origin (must have http server running)</p>
<div>
    <iframe src="http://localhost:8000/css/resources/solid-green.html"></iframe>
</div>

<div class="filtered">
    <iframe style="background-color: white" src="http://localhost:8000/css/resources/solid-red.html"></iframe>
</div>

<br>

<p>Same origin that then references cross origin (must have http server running)</p>
<div>
    <iframe src="resources/references-external-green.html"></iframe>
</div>

<div class="filtered">
    <iframe style="background-color: white" src="resources/references-external-red.html"></iframe>
</div>

<br>

<svg>
    <defs>
        <filter id="noop">
            <feMorphology operator="dilate" in="SourceGraphic" radius="0"/>
        </filter>
    </defs>
</svg>