third_party/WebKit/LayoutTests/fast/overflow/scroll-div-hide-show.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <script src="../../resources/js-test.js"></script>
   6 </head>
   7 <body>
   8 <p>Scrolled position should be restored when the div is hidden and shown again</p>
   9 <div style="height:100px; width:100px; overflow: scroll; display: block;" id="main">
  10 <pre id="preId">
  11 line 1 with some text which has to be scroll to be visible
  12 line 2 with some text which has to be scroll to be visible
  13 line 3 with some text which has to be scroll to be visible
  14 line 4 with some text which has to be scroll to be visible
  15 line 5 with some text which has to be scroll to be visible
  16 line 6 with some text which has to be scroll to be visible
  17 line 7 with some text which has to be scroll to be visible
  18 line 8 with some text which has to be scroll to be visible
  19 line 9 with some text which has to be scroll to be visible
  20 line 10 with some text which has to be scroll to be visible
  21 line 11 with some text which has to be scroll to be visible
  22 line 12 with some text which has to be scroll to be visible
  23 </pre>
  24 </div>
  25
  26 <div id="second">
  27 Div will be moved here.
  28 </div>
  29
  30 <iframe id="frame" style="display:block; width:400px; height: 400px;"></iframe>
  31 <div id="console"></div>
  32 <script>
  33 var e = document.getElementById("main");
  34 debug("Scrolling to 0, 75");
  35 e.scrollTop = 75;
  36 e.style.display = 'none';
  37 debug("Div's display is none now");
  38 shouldBe('e.scrollTop', '0');
  39 e.style.display = 'block';
  40 debug("Div's display is block again");
  41 shouldBe('e.scrollTop', '75');
  42
  43 debug("");
  44 debug("Test that after changing the scroll position to different values the scroll position is restored");
  45 debug("Scrolling to 50, 50");
  46 e.scrollTop = 50;
  47 e.scrollLeft = 50;
  48 debug("Div's display is none now");
  49 e.style.display = 'none';
  50 shouldBe('e.scrollTop', '0');
  51 shouldBe('e.scrollLeft', '0');
  52 debug("Div's display is block again");
  53 e.style.display = 'block';
  54 shouldBe('e.scrollTop', '50');
  55 shouldBe('e.scrollLeft', '50');
  56
  57 debug("Scrolling to 30, 10");
  58 e.scrollTop = 10;
  59 e.scrollLeft = 30;
  60 debug("Div's display is none now");
  61 e.style.display = 'none';
  62 shouldBe('e.scrollTop', '0');
  63 shouldBe('e.scrollLeft', '0');
  64 debug("Div's display is block again");
  65 e.style.display = 'block';
  66 shouldBe('e.scrollTop', '10');
  67 shouldBe('e.scrollLeft', '30');
  68
  69 debug("Scrolling to 100, 0");
  70 e.scrollTop = 0;
  71 e.scrollLeft = 100;
  72 debug("Div's display is none now");
  73 e.style.display = 'none';
  74 shouldBe('e.scrollTop', '0');
  75 shouldBe('e.scrollLeft', '0');
  76 debug("Div's display is block again");
  77 e.style.display = 'block';
  78 shouldBe('e.scrollTop', '0');
  79 shouldBe('e.scrollLeft', '100');
  80
  81 debug("");
  82 debug("Testing that scroll position is restored when height and width of scrolling area is changed");
  83 e.style.height = e.scrollHeight + 50;
  84 e.style.width = e.scrollWidth + 50;
  85 debug("Scrolling to 35, 75");
  86 e.scrollTop = 75;
  87 e.scrollLeft = 35;
  88 debug("Div's display is none now");
  89 e.style.display = 'none';
  90 shouldBe('e.scrollTop', '0');
  91 shouldBe('e.scrollLeft', '0');
  92 debug("Div's display is block again");
  93 e.style.display = 'block';
  94 shouldBe('e.scrollTop', '75');
  95 shouldBe('e.scrollLeft', '35');
  96 debug("Adding some more text to div");
  97 e.innerHTML += "line 13 <br/> line 14 <br/> line 15 <br/> line 16 <br/> line 17 <br/>";
  98 debug("Scrolling to 125, 100");
  99 e.scrollTop = 100;
 100 e.scrollLeft = 125;
 101 debug("Div's display is none now");
 102 e.style.display = 'none';
 103 shouldBe('e.scrollTop', '0');
 104 shouldBe('e.scrollLeft', '0');
 105 debug("Div's display is block again");
 106 e.style.display = 'block';
 107 shouldBe('e.scrollTop', '100');
 108 shouldBe('e.scrollLeft', '125');
 109
 110 debug("");
 111 debug("Test that scroll position is reset when the node is moved to different location in the document");
 112 e.style.display = 'none';
 113 document.getElementById("second").appendChild(e);
 114 e.style.display = 'block';
 115 shouldBe('e.scrollTop', '0');
 116 shouldBe('e.scrollLeft', '0');
 117
 118 var divContent = document.getElementById("preId").innerHTML;
 119
 120 debug("");
 121 debug("Testing that scroll position is restored for RTL texts");
 122 document.getElementById("preId").innerHTML = "ممرحبًامرحبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
 123     \nبًامرحبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
 124     \nبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
 125     \nبًامرحبًامرحبًامرحبًامرحبًارحبًا\
 126     \nحبًامرحبًامرحبًامرحبًارحبًا\
 127     \nممرحبًامرحبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
 128     \nبًامرحبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
 129     \nبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
 130     \nبًامرحبًامرحبًامرحبًامرحبًارحبًا\
 131     \nممرحبًامرحبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
 132     \nبًامرحبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
 133     \nبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
 134     \nبًامرحبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
 135     \nبًامرحبًامرحبًامرحبًارحبًا\
 136     \nبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
 137     \nبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا";
 138
 139 e.dir="rtl";
 140
 141 debug("Scrolling to 50, 150");
 142 e.scrollTop = 150;
 143 e.scrollLeft = 50;
 144 debug("Div's display is none now");
 145 e.style.display = 'none';
 146 shouldBe('e.scrollTop', '0');
 147 shouldBe('e.scrollLeft', '0');
 148 debug("Div's display is block again");
 149 e.style.display = 'block';
 150 shouldBe('e.scrollTop', '150');
 151 shouldBe('e.scrollLeft', '50');
 152
 153 debug("");
 154 debug("Test iframe scrolling");
 155 var frame = document.getElementById('frame');
 156 var doc = frame.contentDocument.open();
 157 doc.write("<div style='width:100px; height:100px; background:yellow;'></div>");
 158 doc.close();
 159 frame.contentDocument.body.style.width = "2000px";
 160 frame.contentDocument.body.style.height = "2000px";
 161
 162 debug("Scrolling Iframe to (50, 75)");
 163 frame.contentWindow.scrollTo(50, 75);
 164
 165 frame.style.display = 'none';
 166 debug("Iframe's display is none now");
 167
 168 frame.style.display = 'block';
 169 debug("Iframe's display is block again");
 170
 171 shouldBe('frame.contentWindow.pageYOffset', '75');
 172 shouldBe('frame.contentWindow.pageXOffset', '50');
 173
 174 debug("");
 175 debug("Testing scroll offset getting reset when moved to other document");
 176 document.getElementById("preId").innerHTML = divContent;
 177 e.dir="ltr";
 178 debug("Scrolling div to (50, 75)");
 179 e.scrollTop = 75;
 180 e.scrollLeft = 50;
 181 e.style.display = 'none';
 182 frame.contentDocument.body.appendChild(e);
 183 e.style.display = 'block';
 184 shouldBe('e.scrollTop', '0');
 185 shouldBe('e.scrollLeft', '0');
 186
 187 successfullyParsed = true;
 188 </script>
 189 </body>
 190 </html>