| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| body { |
| overflow: hidden; |
| } |
| iframe { |
| border: 0; |
| margin: 0; |
| padding: 0; |
| overflow: hidden; |
| } |
| div { |
| width: 300px; |
| height: 150px; |
| } |
| .curtain { |
| position: fixed; |
| left: 0px; |
| top: 0px; |
| right: 0px; |
| bottom: 0px; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| background-color: #eef; |
| } |
| </style> |
| </head> |
| <body style="margin: 0; padding: 0;"> |
| |
| <!-- Confound naive hit testing by appearing to cover the whole screen, |
| while actually having a negative z-index. --> |
| <div role="group" class="curtain"> |
| <div role="group" class="curtain"> |
| </div> |
| </div> |
| |
| <div> |
| <button style="margin: 25px; border: 0; width: 250px; height: 50px"> |
| Button |
| </button> |
| </div> |
| |
| <div> |
| <button style="margin: 25px; border: 0; width: 250px; height: 50px"> |
| Button |
| </button> |
| </div> |
| |
| <div> |
| <iframe id="frame1" style="width: 300px; height: 100px;" |
| scrolling="no" src="button.html"></iframe> |
| </div> |
| |
| <div> |
| <iframe id="frame2" style="width: 150px; height: 50px;" |
| scrolling="no" src="button_scrolled.html"></iframe> |
| </div> |
| |
| <!-- Confound naive hit testing by appearing to cover the whole screen --> |
| <div role="group" class="curtain"> |
| <div role="group" class="curtain"> |
| </div> |
| </div> |
| |
| </body> |
| </html> |
