| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| ::backdrop { |
| background: yellow; |
| } |
| body, html { |
| height: 100%; |
| margin: 0px; |
| } |
| |
| body:-webkit-full-screen-ancestor > :not(:-webkit-full-screen-ancestor):not(:fullscreen) { |
| display: none!important |
| } |
| |
| #spacer { |
| width: 200px; |
| height: 3000px; |
| background-color: red; |
| } |
| |
| #fullscreenElement { |
| width: 20px; |
| height: 20px; |
| background-color: blue; |
| position: absolute; |
| left: 10px; |
| top: 500px; |
| } |
| </style> |
| <script> |
| // To test manually, you can enter fullscreen by clicking on the blue square while |
| // the page has some scroll offset. Exiting fullscreen should reset to the previous |
| // scroll position. |
| var fullscreen = false; |
| addEventListener('load', function() { |
| document.getElementById('fullscreenElement').addEventListener('click', function() { |
| if (fullscreen) |
| document.webkitExitFullscreen(); |
| else |
| this.webkitRequestFullscreen(); |
| |
| fullscreen = !fullscreen; |
| }); |
| }); |
| </script> |
| </head> |
| |
| <body> |
| <div id="spacer"></div> |
| <div id="fullscreenElement"></div> |
| </body> |
| </html> |
