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

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