| <style> |
| body { |
| margin: 0; |
| padding: 0; |
| } |
| iframe { |
| border: none; |
| background-color: red; |
| } |
| div { |
| display: inline-block; |
| } |
| .filtered { |
| filter: url(#noop); |
| } |
| .wrapper { |
| width: 300px; |
| height: 150px; |
| overflow: hidden; |
| } |
| .scroll { |
| width: 50px; |
| height: 50px; |
| overflow: hidden; |
| transform: scale(20); |
| } |
| 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="resources/solid-green.html"></iframe> |
| </div> |
| |
| <div class="filtered"> |
| <iframe style="background-color: white" src="resources/blank.html"></iframe> |
| </div> |
| |
| <br> |
| |
| <p>Same origin that then references cross origin (must have http server running)</p> |
| <div> |
| <iframe src="resources/solid-green.html"></iframe> |
| </div> |
| |
| <div class="filtered"> |
| <iframe style="background-color: white" src="resources/blank.html"></iframe> |
| </div> |
| |
| <br> |