| Index: LayoutTests/fast/dom/HTMLDialogElement/fixpos-dialog-layout.html
|
| diff --git a/LayoutTests/fast/dom/HTMLDialogElement/fixpos-dialog-layout.html b/LayoutTests/fast/dom/HTMLDialogElement/fixpos-dialog-layout.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..697007c4cf07eef2f6336fd3a7eb1c5034fd74de
|
| --- /dev/null
|
| +++ b/LayoutTests/fast/dom/HTMLDialogElement/fixpos-dialog-layout.html
|
| @@ -0,0 +1,165 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| +<head>
|
| +<link href="resources/dialog-layout.css" rel="stylesheet">
|
| +<style>
|
| +dialog {
|
| + position: fixed;
|
| +}
|
| +</style>
|
| +<script src="../../../resources/js-test.js"></script>
|
| +</head>
|
| +<body>
|
| + <dialog id="dialog">It is my dialog.</dialog>
|
| + <div id="absolute-div">
|
| + <div id="relative-div"></div>
|
| + </div>
|
| +</body>
|
| +<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>
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
