src/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/non-anchored-dialog-positioning.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 /* Remove body margin and dialog styles for easier positioning expected values */
   6 body {
   7     height: 10000px;
   8     margin: 0;
   9 }
  10
  11 dialog {
  12     border: 0;
  13     padding: 0;
  14     height: auto;
  15     width: auto;
  16 }
  17
  18 #absolute-div {
  19     position: absolute;
  20     top: 800px;
  21     height: 50px;
  22     width: 90%;
  23 }
  24
  25 #relative-div {
  26     position: relative;
  27     top: 20px;
  28     height: 30px;
  29 }
  30 </style>
  31 <script src="../../../resources/js-test.js"></script>
  32 <script>
  33 function checkTopOfViewport(dialog) {
  34     shouldBe('dialog.getBoundingClientRect().top', '0');
  35 }
  36
  37 function checkCentered(dialog) {
  38     centeredTop = (window.innerHeight - dialog.offsetHeight) / 2;
  39     shouldBe('dialog.getBoundingClientRect().top', 'centeredTop');
  40 }
  41
  42 function testShowModal(dialog, checker) {
  43     dialog.showModal();
  44     checker();
  45     dialog.close();
  46 }
  47
  48 function testShow(dialog, checker) {
  49     dialog.show();
  50     checker();
  51     dialog.close();
  52 }
  53 </script>
  54 </head>
  55 <body>
  56     <dialog id="mydialog">It is my dialog.</dialog>
  57     <div id="absolute-div">
  58         <div id="relative-div"></div>
  59     </div>
  60 </body>
  61 <script>
  62 description("Tests positioning of non-anchored dialogs.");
  63
  64 dialog = document.getElementById('mydialog');
  65 absoluteContainer = document.querySelector('#absolute-div');
  66 relativeContainer = document.querySelector('#relative-div');
  67
  68 debug('showModal() should center in the viewport.');
  69 testShowModal(dialog, function() { checkCentered(dialog) });
  70
  71 debug('<br>The computed top and bottom of a centered dialog should still have position auto');
  72 shouldBeEqualToString('window.getComputedStyle(dialog).top', 'auto');
  73 shouldBeEqualToString('window.getComputedStyle(dialog).bottom', 'auto');
  74
  75 debug('<br>Dialog should be recentered if showModal() is called after close().');
  76 window.scroll(0, 500);
  77 dialog.showModal();
  78 checkCentered(dialog);
  79
  80 debug('<br>Dialog should not be recentered on a relayout.');
  81 var expectedTop = dialog.getBoundingClientRect().top;
  82 window.scroll(0, 1000);
  83 document.body.offsetHeight;
  84 window.scroll(0, 500);
  85 shouldBe('dialog.getBoundingClientRect().top', 'expectedTop');
  86 dialog.close();
  87
  88 debug('<br>A tall dialog should be positioned at the top of the viewport.');
  89 dialog.style.height = '20000px';
  90 testShowModal(dialog, function() { checkTopOfViewport(dialog) });
  91 dialog.style.height = 'auto';
  92
  93 debug('<br>The dialog should be centered regardless of the presence of a horizontal scrollbar.');
  94 document.body.style.width = '4000px';
  95 testShowModal(dialog, function() { checkCentered(dialog) });
  96 document.body.style.width = 'auto';
  97
  98 debug('<br>Test that centering works when dialog is inside positioned containers.');
  99 dialog.parentNode.removeChild(dialog);
 100 absoluteContainer.appendChild(dialog);
 101 testShowModal(dialog, function() { checkCentered(dialog) });
 102 dialog.parentNode.removeChild(dialog);
 103 relativeContainer.appendChild(dialog);
 104 testShowModal(dialog, function() { checkCentered(dialog) });
 105
 106 debug("<br>Dialog's position should survive after becoming display:none temporarily.");
 107 window.scroll(0, 500);
 108 dialog.showModal();
 109 expectedTop = dialog.getBoundingClientRect().top;
 110 window.scroll(0, 1000);
 111 relativeContainer.style.display = 'none';
 112 relativeContainer.style.display = 'block';
 113 window.scroll(0, 500);
 114 shouldBe('dialog.getBoundingClientRect().top', 'expectedTop');
 115
 116 debug("<br>Dialog loses centering position when removed from document.");
 117 window.scroll(0, 1000);
 118 dialog.parentNode.removeChild(dialog);
 119 relativeContainer.appendChild(dialog);
 120 window.scroll(0, 500);
 121 shouldBe('dialog.getBoundingClientRect().top', 'relativeContainer.getBoundingClientRect().top');
 122 dialog.close();
 123
 124 debug("<br>Dialog's specified position should survive after close() and showModal().");
 125 dialog.showModal();
 126 dialog.style.top = '0px';
 127 expectedTop = dialog.getBoundingClientRect().top;
 128 dialog.close();
 129 dialog.showModal();
 130 shouldBe('dialog.getBoundingClientRect().top', 'expectedTop');
 131
 132 debug("<br>Dialog is recentered if showModal() is called after removing 'open'");
 133 dialog.style.top = 'auto';
 134 dialog.close();
 135 dialog.showModal();
 136 dialog.removeAttribute('open');
 137 window.scroll(0, 1000);
 138 dialog.showModal();
 139 checkCentered(dialog);
 140 dialog.close();
 141 window.scroll(0, 500);
 142
 143 debug("<br>Dialog should not be centered if showModal() was called when an ancestor had display 'none'.");
 144 absoluteContainer.style.display = 'none';
 145 dialog.showModal();
 146 absoluteContainer.style.display = 'block';
 147 // Since dialog's containing block is the ICB, it's statically positioned after <body>.
 148 expectedTop = document.body.getBoundingClientRect().bottom;
 149 shouldBe('dialog.getBoundingClientRect().top', 'expectedTop');
 150 dialog.close();
 151
 152 debug("<br>Test setting 'top' on an abspos modal dialog");
 153 offset = 50;
 154 dialog.style.top = offset + 'px';
 155 testShowModal(dialog, function() { shouldBe('dialog.getBoundingClientRect().top + window.scrollY', 'offset'); });
 156 dialog.style.top = 'auto';
 157
 158 debug("<br>Test setting 'bottom' on an abspos modal dialog");
 159 dialog.style.top = 'auto';
 160 dialog.style.bottom = offset + 'px';
 161 testShowModal(dialog, function() { shouldBe('dialog.getBoundingClientRect().bottom + window.scrollY', 'window.innerHeight - offset'); });
 162 dialog.style.bottom = 'auto';
 163
 164 debug("<br>Test fixed position for a modal dialog");
 165 dialog.style.position = 'fixed';
 166 dialog.style.top = offset + 'px';
 167 testShowModal(dialog, function() { shouldBe('dialog.getBoundingClientRect().top', 'offset'); });
 168
 169 // Omit testing static/relative for modal dialogs, as they are covered by top layer tests (static/relative don't exist in top layer)
 170
 171 debug('<br>Test absolute position for a non-modal dialog');
 172 dialog.style.position = 'absolute';
 173 dialog.style.top = offset + 'px';
 174 testShow(dialog, function() { shouldBe('dialog.getBoundingClientRect().top', 'relativeContainer.getBoundingClientRect().top + offset'); });
 175
 176 debug('<br>Test static position for a non-modal dialog');
 177 dialog.style.position = 'static';
 178 testShow(dialog, function() { shouldBe('dialog.getBoundingClientRect().top', 'relativeContainer.getBoundingClientRect().top'); });
 179
 180 debug('<br>Test relative position for a non-modal dialog');
 181 dialog.style.position = 'relative';
 182 dialog.style.top = offset + 'px';
 183 dialog.style.left = offset + 'px';
 184 testShow(dialog, function() {
 185     shouldBe('dialog.getBoundingClientRect().top', 'relativeContainer.getBoundingClientRect().top + offset');
 186     shouldBe('dialog.getBoundingClientRect().left', 'relativeContainer.getBoundingClientRect().left + offset');
 187 });
 188 </script>
 189 </body>
 190 </html>