blob: bab9fe352084350d44de11ecf861eac1954ac2b3 [file] [log] [blame]
<!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 computed top and bottom of a centered dialog should still have position auto.');
dialog.showModal();
shouldBeEqualToString('window.getComputedStyle(dialog).top', 'auto');
shouldBeEqualToString('window.getComputedStyle(dialog).bottom', '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>