| Index: LayoutTests/fast/dom/HTMLDialogElement/non-anchored-dialog-positioning.html
|
| diff --git a/LayoutTests/fast/dom/HTMLDialogElement/non-anchored-dialog-positioning.html b/LayoutTests/fast/dom/HTMLDialogElement/non-anchored-dialog-positioning.html
|
| deleted file mode 100644
|
| index 8240a6a765afecd2a79cfa414028b186d74eb517..0000000000000000000000000000000000000000
|
| --- a/LayoutTests/fast/dom/HTMLDialogElement/non-anchored-dialog-positioning.html
|
| +++ /dev/null
|
| @@ -1,190 +0,0 @@
|
| -<!DOCTYPE html>
|
| -<html>
|
| -<head>
|
| -<style>
|
| -/* Remove body margin and dialog styles for easier positioning expected values */
|
| -body {
|
| - height: 10000px;
|
| - margin: 0;
|
| -}
|
| -
|
| -dialog {
|
| - border: 0;
|
| - padding: 0;
|
| - height: auto;
|
| - width: auto;
|
| -}
|
| -
|
| -#absolute-div {
|
| - position: absolute;
|
| - top: 800px;
|
| - height: 50px;
|
| - width: 90%;
|
| -}
|
| -
|
| -#relative-div {
|
| - position: relative;
|
| - top: 20px;
|
| - height: 30px;
|
| -}
|
| -</style>
|
| -<script src="../../../resources/js-test.js"></script>
|
| -<script>
|
| -function checkTopOfViewport(dialog) {
|
| - shouldBe('dialog.getBoundingClientRect().top', '0');
|
| -}
|
| -
|
| -function checkCentered(dialog) {
|
| - centeredTop = (window.innerHeight - dialog.offsetHeight) / 2;
|
| - shouldBe('dialog.getBoundingClientRect().top', 'centeredTop');
|
| -}
|
| -
|
| -function testShowModal(dialog, checker) {
|
| - dialog.showModal();
|
| - checker();
|
| - dialog.close();
|
| -}
|
| -
|
| -function testShow(dialog, checker) {
|
| - dialog.show();
|
| - checker();
|
| - dialog.close();
|
| -}
|
| -</script>
|
| -</head>
|
| -<body>
|
| - <dialog id="mydialog">It is my dialog.</dialog>
|
| - <div id="absolute-div">
|
| - <div id="relative-div"></div>
|
| - </div>
|
| -</body>
|
| -<script>
|
| -description("Tests positioning of non-anchored dialogs.");
|
| -
|
| -dialog = document.getElementById('mydialog');
|
| -absoluteContainer = document.querySelector('#absolute-div');
|
| -relativeContainer = document.querySelector('#relative-div');
|
| -
|
| -debug('showModal() should center in the viewport.');
|
| -testShowModal(dialog, function() { checkCentered(dialog) });
|
| -
|
| -debug('<br>The computed top and bottom of a centered dialog should still have position auto');
|
| -shouldBeEqualToString('window.getComputedStyle(dialog).top', 'auto');
|
| -shouldBeEqualToString('window.getComputedStyle(dialog).bottom', 'auto');
|
| -
|
| -debug('<br>Dialog should be recentered if showModal() is called after close().');
|
| -window.scroll(0, 500);
|
| -dialog.showModal();
|
| -checkCentered(dialog);
|
| -
|
| -debug('<br>Dialog should not be recentered on a relayout.');
|
| -var expectedTop = dialog.getBoundingClientRect().top;
|
| -window.scroll(0, 1000);
|
| -document.body.offsetHeight;
|
| -window.scroll(0, 500);
|
| -shouldBe('dialog.getBoundingClientRect().top', 'expectedTop');
|
| -dialog.close();
|
| -
|
| -debug('<br>A tall dialog should be positioned at the top of the viewport.');
|
| -dialog.style.height = '20000px';
|
| -testShowModal(dialog, function() { checkTopOfViewport(dialog) });
|
| -dialog.style.height = 'auto';
|
| -
|
| -debug('<br>The dialog should be centered regardless of the presence of a horizontal scrollbar.');
|
| -document.body.style.width = '4000px';
|
| -testShowModal(dialog, function() { checkCentered(dialog) });
|
| -document.body.style.width = 'auto';
|
| -
|
| -debug('<br>Test that centering works when dialog is inside positioned containers.');
|
| -dialog.parentNode.removeChild(dialog);
|
| -absoluteContainer.appendChild(dialog);
|
| -testShowModal(dialog, function() { checkCentered(dialog) });
|
| -dialog.parentNode.removeChild(dialog);
|
| -relativeContainer.appendChild(dialog);
|
| -testShowModal(dialog, function() { checkCentered(dialog) });
|
| -
|
| -debug("<br>Dialog's position should survive after becoming display:none temporarily.");
|
| -window.scroll(0, 500);
|
| -dialog.showModal();
|
| -expectedTop = dialog.getBoundingClientRect().top;
|
| -window.scroll(0, 1000);
|
| -relativeContainer.style.display = 'none';
|
| -relativeContainer.style.display = 'block';
|
| -window.scroll(0, 500);
|
| -shouldBe('dialog.getBoundingClientRect().top', 'expectedTop');
|
| -
|
| -debug("<br>Dialog loses centering position when removed from document.");
|
| -window.scroll(0, 1000);
|
| -dialog.parentNode.removeChild(dialog);
|
| -relativeContainer.appendChild(dialog);
|
| -window.scroll(0, 500);
|
| -shouldBe('dialog.getBoundingClientRect().top', 'relativeContainer.getBoundingClientRect().top');
|
| -dialog.close();
|
| -
|
| -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');
|
| -
|
| -debug("<br>Dialog is recentered if showModal() is called after removing 'open'");
|
| -dialog.style.top = 'auto';
|
| -dialog.close();
|
| -dialog.showModal();
|
| -dialog.removeAttribute('open');
|
| -window.scroll(0, 1000);
|
| -dialog.showModal();
|
| -checkCentered(dialog);
|
| -dialog.close();
|
| -window.scroll(0, 500);
|
| -
|
| -debug("<br>Dialog should not be centered if showModal() was called when an ancestor had display 'none'.");
|
| -absoluteContainer.style.display = 'none';
|
| -dialog.showModal();
|
| -absoluteContainer.style.display = 'block';
|
| -// Since dialog's containing block is the ICB, it's statically positioned after <body>.
|
| -expectedTop = document.body.getBoundingClientRect().bottom;
|
| -shouldBe('dialog.getBoundingClientRect().top', 'expectedTop');
|
| -dialog.close();
|
| -
|
| -debug("<br>Test setting 'top' on an abspos modal dialog");
|
| -offset = 50;
|
| -dialog.style.top = offset + 'px';
|
| -testShowModal(dialog, function() { shouldBe('dialog.getBoundingClientRect().top + window.scrollY', 'offset'); });
|
| -dialog.style.top = 'auto';
|
| -
|
| -debug("<br>Test setting 'bottom' on an abspos modal dialog");
|
| -dialog.style.top = 'auto';
|
| -dialog.style.bottom = offset + 'px';
|
| -testShowModal(dialog, function() { shouldBe('dialog.getBoundingClientRect().bottom + window.scrollY', 'window.innerHeight - offset'); });
|
| -dialog.style.bottom = 'auto';
|
| -
|
| -debug("<br>Test fixed position for a modal dialog");
|
| -dialog.style.position = 'fixed';
|
| -dialog.style.top = offset + 'px';
|
| -testShowModal(dialog, function() { shouldBe('dialog.getBoundingClientRect().top', 'offset'); });
|
| -
|
| -// Omit testing static/relative for modal dialogs, as they are covered by top layer tests (static/relative don't exist in top layer)
|
| -
|
| -debug('<br>Test absolute position for a non-modal dialog');
|
| -dialog.style.position = 'absolute';
|
| -dialog.style.top = offset + 'px';
|
| -testShow(dialog, function() { shouldBe('dialog.getBoundingClientRect().top', 'relativeContainer.getBoundingClientRect().top + offset'); });
|
| -
|
| -debug('<br>Test static position for a non-modal dialog');
|
| -dialog.style.position = 'static';
|
| -testShow(dialog, function() { shouldBe('dialog.getBoundingClientRect().top', 'relativeContainer.getBoundingClientRect().top'); });
|
| -
|
| -debug('<br>Test relative position for a non-modal dialog');
|
| -dialog.style.position = 'relative';
|
| -dialog.style.top = offset + 'px';
|
| -dialog.style.left = offset + 'px';
|
| -testShow(dialog, function() {
|
| - shouldBe('dialog.getBoundingClientRect().top', 'relativeContainer.getBoundingClientRect().top + offset');
|
| - shouldBe('dialog.getBoundingClientRect().left', 'relativeContainer.getBoundingClientRect().left + offset');
|
| -});
|
| -</script>
|
| -</body>
|
| -</html>
|
|
|
Chromium Code Reviews
