| <!DOCTYPE html> |
| <link href="resources/dialog-layout.css" rel="stylesheet"> |
| <script src="../../resources/js-test.js"></script> |
| <div id="absolute-div"> |
| <div id="relative-div"> |
| <dialog id="dialog">It is my dialog.</dialog> |
| </div> |
| </div> |
| <script> |
| description('Tests layout of non-modal dialogs.'); |
| |
| dialog = document.querySelector('#dialog'); |
| div = document.querySelector('#div-dialog'); |
| relativeContainer = document.querySelector('#relative-div'); |
| offset = 50; |
| dialog.style.top = offset + 'px'; |
| dialog.style.left = offset + 'px'; |
| |
| (function() { |
| debug('<br>Test absolute position'); |
| dialog.style.position = 'absolute'; |
| dialog.show(); |
| shouldBe('dialog.getBoundingClientRect().top', 'relativeContainer.getBoundingClientRect().top + offset'); |
| shouldBe('dialog.getBoundingClientRect().left', 'relativeContainer.getBoundingClientRect().left + offset'); |
| }()); |
| |
| (function() { |
| debug('<br>Test static position'); |
| dialog.style.position = 'static'; |
| dialog.show(); |
| shouldBe('dialog.getBoundingClientRect().top', 'relativeContainer.getBoundingClientRect().top'); |
| shouldBe('dialog.getBoundingClientRect().left', 'relativeContainer.getBoundingClientRect().left'); |
| dialog.close(); |
| }()); |
| |
| (function() { |
| debug('<br>Test relative position'); |
| dialog.style.position = 'relative'; |
| dialog.show(); |
| shouldBe('dialog.getBoundingClientRect().top', 'relativeContainer.getBoundingClientRect().top + offset'); |
| shouldBe('dialog.getBoundingClientRect().left', 'relativeContainer.getBoundingClientRect().left + offset'); |
| dialog.close(); |
| }()); |
| |
| (function() { |
| debug('<br>Test fixed position'); |
| dialog.style.position = 'fixed'; |
| dialog.show(); |
| shouldBe('dialog.getBoundingClientRect().top', 'offset'); |
| shouldBe('dialog.getBoundingClientRect().left', 'offset'); |
| dialog.close(); |
| }()); |
| </script> |
