| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <link href="resources/dialog-layout.css" rel="stylesheet"> |
| 5 <style> |
| 6 dialog { |
| 7 position: fixed; |
| 8 } |
| 9 </style> |
| 10 <script src="../../../resources/js-test.js"></script> |
| 11 </head> |
| 12 <body> |
| 13 <dialog id="dialog">It is my dialog.</dialog> |
| 14 <div id="absolute-div"> |
| 15 <div id="relative-div"></div> |
| 16 </div> |
| 17 </body> |
| 18 <script> |
| 19 description('Tests layout of fixed positioned dialogs.'); |
| 20 |
| 21 function checkCentered(dialog) { |
| 22 centeredTop = (window.innerHeight - dialog.offsetHeight) / 2; |
| 23 shouldBe('dialog.getBoundingClientRect().top', 'centeredTop'); |
| 24 } |
| 25 |
| 26 function reset() { |
| 27 if (dialog.open) |
| 28 dialog.close(); |
| 29 dialog.remove(); |
| 30 document.body.appendChild(dialog); |
| 31 window.scroll(0, 500); |
| 32 } |
| 33 |
| 34 dialog = document.querySelector('#dialog'); |
| 35 absoluteContainer = document.querySelector('#absolute-div'); |
| 36 relativeContainer = document.querySelector('#relative-div'); |
| 37 reset(); |
| 38 |
| 39 (function() { |
| 40 debug('<br>showModal() should center in the viewport.'); |
| 41 |
| 42 dialog.showModal(); |
| 43 checkCentered(dialog); |
| 44 reset(); |
| 45 }()); |
| 46 |
| 47 (function() { |
| 48 debug('<br>The computed top and bottom of a centered dialog should still hav
e position auto.'); |
| 49 |
| 50 dialog.showModal(); |
| 51 shouldBeEqualToString('window.getComputedStyle(dialog).top', 'auto'); |
| 52 shouldBeEqualToString('window.getComputedStyle(dialog).bottom', 'auto'); |
| 53 reset(); |
| 54 }()); |
| 55 |
| 56 (function() { |
| 57 debug('<br>The dialog shold stay centered on scroll.'), |
| 58 |
| 59 dialog.showModal(); |
| 60 window.scroll(0, 2 * window.scrollY); |
| 61 checkCentered(dialog); |
| 62 reset(); |
| 63 }()); |
| 64 |
| 65 (function() { |
| 66 debug('<br>A tall dialog should be positioned at the top of the viewport.'); |
| 67 |
| 68 dialog.style.height = '20000px'; |
| 69 dialog.showModal(); |
| 70 shouldBe('dialog.getBoundingClientRect().top', '0'); |
| 71 |
| 72 dialog.style.height = 'auto'; |
| 73 reset(); |
| 74 }()); |
| 75 |
| 76 (function() { |
| 77 debug('<br>The dialog should be centered regardless of the presence of a hor
izontal scrollbar.'); |
| 78 |
| 79 document.body.style.width = '4000px'; |
| 80 dialog.showModal(); |
| 81 checkCentered(dialog); |
| 82 |
| 83 document.body.style.width = 'auto'; |
| 84 reset(); |
| 85 }()); |
| 86 |
| 87 (function() { |
| 88 debug('<br>Centering should work when dialog is inside positioned containers
.'); |
| 89 |
| 90 dialog.remove(); |
| 91 absoluteContainer.appendChild(dialog); |
| 92 dialog.showModal(); |
| 93 checkCentered(dialog); |
| 94 dialog.close(); |
| 95 |
| 96 dialog.remove(); |
| 97 relativeContainer.appendChild(dialog); |
| 98 dialog.showModal(); |
| 99 checkCentered(dialog); |
| 100 |
| 101 reset(); |
| 102 }()); |
| 103 |
| 104 (function() { |
| 105 debug('<br>A centered dialog\'s position should survive becoming display:non
e temporarily.'); |
| 106 |
| 107 dialog.showModal(); |
| 108 expectedTop = dialog.getBoundingClientRect().top; |
| 109 relativeContainer.style.display = 'none'; |
| 110 relativeContainer.style.display = 'block'; |
| 111 shouldBe('dialog.getBoundingClientRect().top', 'expectedTop'); |
| 112 |
| 113 reset(); |
| 114 }()); |
| 115 |
| 116 (function() { |
| 117 debug('<br>Dialog should lose centering when removed from the document.'); |
| 118 |
| 119 dialog.showModal(); |
| 120 dialog.remove(); |
| 121 relativeContainer.appendChild(dialog); |
| 122 shouldBe('dialog.getBoundingClientRect().top', '0'); |
| 123 |
| 124 reset(); |
| 125 }()); |
| 126 |
| 127 (function() { |
| 128 debug('<br>Dialog\'s specified position should survive after close() and sho
wModal().'); |
| 129 |
| 130 dialog.showModal(); |
| 131 dialog.style.top = '0px'; |
| 132 expectedTop = dialog.getBoundingClientRect().top; |
| 133 dialog.close(); |
| 134 dialog.showModal(); |
| 135 shouldBe('dialog.getBoundingClientRect().top', 'expectedTop'); |
| 136 |
| 137 dialog.style.top = 'auto'; |
| 138 reset(); |
| 139 }()); |
| 140 |
| 141 (function() { |
| 142 debug('<br>Dialog should not be centered if showModal() was called when an a
ncestor had display \'none\'.'); |
| 143 |
| 144 dialog.remove(); |
| 145 absoluteContainer.appendChild(dialog); |
| 146 absoluteContainer.style.display = 'none'; |
| 147 dialog.showModal(); |
| 148 absoluteContainer.style.display = 'block'; |
| 149 shouldBe('dialog.getBoundingClientRect().top', '0'); |
| 150 |
| 151 reset(); |
| 152 }()); |
| 153 |
| 154 (function() { |
| 155 debug('<br>A dialog with specified \'top\' should be positioned as usual'); |
| 156 offset = 50; |
| 157 dialog.style.top = offset + 'px'; |
| 158 dialog.showModal(); |
| 159 shouldBe('dialog.getBoundingClientRect().top', 'offset'); |
| 160 |
| 161 reset(); |
| 162 }()); |
| 163 </script> |
| 164 </body> |
| 165 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
