third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/non-modal-dialog-layout.html

   1 <!DOCTYPE html>
   2 <link href="resources/dialog-layout.css" rel="stylesheet">
   3 <script src="../../../resources/js-test.js"></script>
   4 <div id="absolute-div">
   5     <div id="relative-div">
   6         <dialog id="dialog">It is my dialog.</dialog>
   7     </div>
   8 </div>
   9 <script>
  10 description('Tests layout of non-modal dialogs.');
  11
  12 dialog = document.querySelector('#dialog');
  13 div = document.querySelector('#div-dialog');
  14 relativeContainer = document.querySelector('#relative-div');
  15 offset = 50;
  16 dialog.style.top = offset + 'px';
  17 dialog.style.left = offset + 'px';
  18
  19 (function() {
  20     debug('<br>Test absolute position');
  21     dialog.style.position = 'absolute';
  22     dialog.show();
  23     shouldBe('dialog.getBoundingClientRect().top', 'relativeContainer.getBoundingClientRect().top + offset');
  24     shouldBe('dialog.getBoundingClientRect().left', 'relativeContainer.getBoundingClientRect().left + offset');
  25 }());
  26
  27 (function() {
  28     debug('<br>Test static position');
  29     dialog.style.position = 'static';
  30     dialog.show();
  31     shouldBe('dialog.getBoundingClientRect().top', 'relativeContainer.getBoundingClientRect().top');
  32     shouldBe('dialog.getBoundingClientRect().left', 'relativeContainer.getBoundingClientRect().left');
  33     dialog.close();
  34 }());
  35
  36 (function() {
  37     debug('<br>Test relative position');
  38     dialog.style.position = 'relative';
  39     dialog.show();
  40     shouldBe('dialog.getBoundingClientRect().top', 'relativeContainer.getBoundingClientRect().top + offset');
  41     shouldBe('dialog.getBoundingClientRect().left', 'relativeContainer.getBoundingClientRect().left + offset');
  42     dialog.close();
  43 }());
  44
  45 (function() {
  46     debug('<br>Test fixed position');
  47     dialog.style.position = 'fixed';
  48     dialog.show();
  49     shouldBe('dialog.getBoundingClientRect().top', 'offset');
  50     shouldBe('dialog.getBoundingClientRect().left', 'offset');
  51     dialog.close();
  52 }());
  53 </script>