| <!DOCTYPE html> |
| <link href="resources/dialog-layout.css" rel="stylesheet"> |
| <style> |
| dialog { |
| position: fixed; |
| } |
| </style> |
| <script src="../../../resources/js-test.js"></script> |
| <dialog id="dialog">It is my dialog.</dialog> |
| <div id="absolute-div"> |
| <div id="relative-div"></div> |
| </div> |
| <script> |
| description('Tests layout of fixed positioned dialogs.'); |
| |
| function checkCentered(dialog) { |
| centeredTop = (window.innerHeight - dialog.offsetHeight) / 2; |
| shouldBe('dialog.getBoundingClientRect().top', 'centeredTop'); |
| } |
| |
| function reset() { |
| if (dialog.open) |
| dialog.close(); |
| dialog.remove(); |
| document.body.appendChild(dialog); |
| window.scroll(0, 500); |
| } |
| |
| dialog = document.querySelector('#dialog'); |
| absoluteContainer = document.querySelector('#absolute-div'); |
| relativeContainer = document.querySelector('#relative-div'); |
| reset(); |
| |
| (function() { |
| debug('<br>showModal() should center in the viewport.'); |
| |
| dialog.showModal(); |
| checkCentered(dialog); |
| reset(); |
| }()); |
| |
| (function() { |
| debug('<br>The dialog is a positioned element, so the top and bottom should not have style auto.'); |
| |
| dialog.style.height = '20px'; |
| dialog.showModal(); |
| shouldBeEqualToString('window.getComputedStyle(dialog).top', '290px'); |
| shouldBeEqualToString('window.getComputedStyle(dialog).bottom', '290px'); |
| |
| dialog.style.height = 'auto'; |
| reset(); |
| }()); |
| |
| (function() { |
| debug('<br>The dialog shold stay centered on scroll.'), |
| |
| dialog.showModal(); |
| window.scroll(0, 2 * window.scrollY); |
| checkCentered(dialog); |
| reset(); |
| }()); |
| |
| (function() { |
| debug('<br>A tall dialog should be positioned at the top of the viewport.'); |
| |
| dialog.style.height = '20000px'; |
| dialog.showModal(); |
| shouldBe('dialog.getBoundingClientRect().top', '0'); |
| |
| dialog.style.height = 'auto'; |
| reset(); |
| }()); |
| |
| (function() { |
| debug('<br>The dialog should be centered regardless of the presence of a horizontal scrollbar.'); |
| |
| document.body.style.width = '4000px'; |
| dialog.showModal(); |
| checkCentered(dialog); |
| |
| document.body.style.width = 'auto'; |
| reset(); |
| }()); |
| |
| (function() { |
| debug('<br>Centering should work when dialog is inside positioned containers.'); |
| |
| dialog.remove(); |
| absoluteContainer.appendChild(dialog); |
| dialog.showModal(); |
| checkCentered(dialog); |
| dialog.close(); |
| |
| dialog.remove(); |
| relativeContainer.appendChild(dialog); |
| dialog.showModal(); |
| checkCentered(dialog); |
| |
| reset(); |
| }()); |
| |
| (function() { |
| debug('<br>A centered dialog\'s position should survive becoming display:none temporarily.'); |
| |
| dialog.showModal(); |
| expectedTop = dialog.getBoundingClientRect().top; |
| relativeContainer.style.display = 'none'; |
| relativeContainer.style.display = 'block'; |
| shouldBe('dialog.getBoundingClientRect().top', 'expectedTop'); |
| |
| reset(); |
| }()); |
| |
| (function() { |
| debug('<br>Dialog should lose centering when removed from the document.'); |
| |
| dialog.showModal(); |
| dialog.remove(); |
| relativeContainer.appendChild(dialog); |
| shouldBe('dialog.getBoundingClientRect().top', '0'); |
| |
| reset(); |
| }()); |
| |
| (function() { |
| debug('<br>Dialog\'s specified position should survive after close() and showModal().'); |
| |
| dialog.showModal(); |
| dialog.style.top = '0px'; |
| expectedTop = dialog.getBoundingClientRect().top; |
| dialog.close(); |
| dialog.showModal(); |
| shouldBe('dialog.getBoundingClientRect().top', 'expectedTop'); |
| |
| dialog.style.top = 'auto'; |
| reset(); |
| }()); |
| |
| (function() { |
| debug('<br>Dialog should not be centered if showModal() was called when an ancestor had display \'none\'.'); |
| |
| dialog.remove(); |
| absoluteContainer.appendChild(dialog); |
| absoluteContainer.style.display = 'none'; |
| dialog.showModal(); |
| absoluteContainer.style.display = 'block'; |
| shouldBe('dialog.getBoundingClientRect().top', '0'); |
| |
| reset(); |
| }()); |
| |
| (function() { |
| debug('<br>A dialog with specified \'top\' should be positioned as usual'); |
| offset = 50; |
| dialog.style.top = offset + 'px'; |
| dialog.showModal(); |
| shouldBe('dialog.getBoundingClientRect().top', 'offset'); |
| |
| reset(); |
| }()); |
| </script> |