| <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> |