Last active
September 6, 2023 16:41
-
-
Save dlford/64927d17a174da44c6515efd38392c81 to your computer and use it in GitHub Desktop.
Chromium Bug 1479494 Demo Code
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <style> | |
| :where(.modal) { | |
| margin: 0; | |
| padding: 0; | |
| inline-size: 100%; | |
| max-inline-size: 100%; | |
| block-size: 100%; | |
| max-block-size: 100%; | |
| border: none; | |
| background-color: #252521; | |
| border-radius: 0; | |
| cursor: pointer; | |
| } | |
| :where(dialog.modal) { | |
| display: block !important; | |
| height: 0; | |
| opacity: 0; | |
| } | |
| :where(dialog.modal[open]) { | |
| height: unset; | |
| opacity: 1; | |
| } | |
| :where(.modal[open] .inner) { | |
| display: grid; | |
| padding: 0; | |
| grid-template-rows: auto 1fr auto; | |
| inline-size: 100%; | |
| max-inline-size: 100%; | |
| block-size: 100%; | |
| max-block-size: 100%; | |
| } | |
| :where(.modal[open] .inner-inner) { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| width: 100vw; | |
| container-type: inline-size; | |
| } | |
| :where(.modal[open] .inner-inner .inner-button-wrapper) { | |
| position: relative; | |
| height: fit-content; | |
| margin: 5% auto auto auto !important; | |
| width: 90%; | |
| max-width: 90% !important; | |
| cursor: default; | |
| } | |
| @container (min-width: 1100px) { | |
| :where(.modal[open] .inner-inner .inner-button-wrapper) { | |
| margin: auto !important; | |
| max-width: 60% !important; | |
| } | |
| } | |
| @container (min-width: 1700px) { | |
| :where(.modal[open] .inner-inner .inner-button-wrapper) { | |
| max-width: 1100px !important; | |
| } | |
| } | |
| :where(.modal[open] form) { | |
| margin: 2% 2% 2% auto; | |
| width: fit-content; | |
| } | |
| :where(.modal[open] form button) { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| color: #f8fafb; | |
| background-color: #121210; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button id="show-dialog">Show Dialog</button> | |
| <dialog | |
| class="modal" | |
| role="presentation" | |
| id="dialog"> | |
| <div class="inner"> | |
| <form method="dialog"> | |
| <button | |
| id="close-btn" | |
| aria-label="Close Modal Button"> | |
| Close | |
| </button> | |
| </form> | |
| <div class="inner-inner"> | |
| <div | |
| class="inner-btn-wrapper" | |
| aria-label="Content Wrapper" | |
| aria-hidden | |
| role="button" | |
| onClick="(event) => event.stopPropagation()"> | |
| <iframe | |
| width="560" | |
| height="315" | |
| src="https://www.youtube.com/embed/VkyD-56VVZg?si=dunaf2OAtjDuPWfm" | |
| title="YouTube video player" | |
| frameborder="0" | |
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" | |
| allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| </dialog> | |
| <script type="text/javascript"> | |
| const dialog = document.getElementById('dialog'); | |
| const showDialogButton = document.getElementById('show-dialog'); | |
| const closeBtn = document.getElementById('close-btn'); | |
| function handleKeyDown(event) { | |
| console.log(event.key, dialog.open); | |
| if (event.key === 'Escape') { | |
| event.preventDefault(); | |
| if (dialog.open) { | |
| dialog.close(); | |
| dialog.classList.remove('open'); | |
| document.removeEventListener('keydown', handleKeyDown); | |
| } | |
| } | |
| } | |
| document.addEventListener('keydown', handleKeyDown); | |
| let pointer = { | |
| x: 0, | |
| y: 0, | |
| }; | |
| showDialogButton.addEventListener('click', () => { | |
| dialog.showModal(); | |
| dialog.classList.add('open'); | |
| }); | |
| closeBtn.addEventListener('click', () => { | |
| dialog.close(); | |
| dialog.classList.remove('open'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment