| <!DOCTYPE html> |
| <link href="resources/dialog-layout.css" rel="stylesheet"> |
| <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 absolutely positioned modal 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', '790px'); |
| shouldBeEqualToString('window.getComputedStyle(dialog).bottom', '-210px'); |
| |
| dialog.style.height = 'auto'; |
| reset(); |
| }()); |
| |
| (function() { |
| debug('<br>Dialog should be recentered if showModal() is called after close().'), |
| |
| dialog.showModal(); |
| dialog.close(); |
| window.scroll(0, 2 * window.scrollY); |
| dialog.showModal(); |
| checkCentered(dialog); |
| reset(); |
| }()); |
| |
| (function() { |
| debug('<br>Dialog should not recenter on relayout.'); |
| |
| dialog.showModal(); |
| expectedTop = dialog.getBoundingClientRect().top; |
| window.scroll(0, window.scrollY * 2); |
| document.body.offsetHeight; |
| window.scroll(0, window.scrollY / 2); |
| shouldBe('dialog.getBoundingClientRect().top', 'expectedTop'); |
| 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', 'relativeContainer.getBoundingClientRect().top'); |
| |
| 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 be recentered if showModal() is called after removing \'open\'.'); |
| |
| dialog.showModal(); |
| dialog.removeAttribute('open'); |
| window.scroll(0, window.scrollY * 2); |
| dialog.showModal(); |
| checkCentered(dialog); |
| |
| 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'; |
| // Since dialog's containing block is the ICB, it's statically positioned after <body>. |
| shouldBe('dialog.getBoundingClientRect().top', 'document.body.getBoundingClientRect().bottom'); |
| 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 + window.scrollY', 'offset'); |
| dialog.style.top = 'auto'; |
| reset(); |
| }()); |
| |
| (function() { |
| debug('<br>A dialog with specified \'bottom\' should be positioned as usual'); |
| offset = 50; |
| dialog.style.bottom = offset + 'px'; |
| dialog.showModal(); |
| shouldBe('dialog.getBoundingClientRect().bottom + window.scrollY', 'window.innerHeight - offset'); |
| dialog.style.bottom = 'auto'; |
| reset(); |
| }()); |
| </script> |
