image-scrolling-zoom-1.html 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <!DOCTYPE HTML>
  2. <!-- Any copyright is dedicated to the Public Domain.
  3. - http://creativecommons.org/publicdomain/zero/1.0/ -->
  4. <html class="reftest-wait" reftest-zoom="0.3">
  5. <head>
  6. <style type="text/css">
  7. #container {
  8. height: 100px;
  9. overflow: auto;
  10. }
  11. #container-background {
  12. background: url(one-pixel-wide-background.png);
  13. }
  14. #container-background > div {
  15. line-height: 20px;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div id="container">
  21. <div id="container-background">
  22. <div>Item</div>
  23. <div>Item</div>
  24. <div>Item</div>
  25. <div>Item</div>
  26. <div>Item</div>
  27. <div>Item</div>
  28. <div>Item</div>
  29. <div>Item</div>
  30. <div>Item</div>
  31. <div>Item</div>
  32. <div>Item</div>
  33. </div>
  34. </div>
  35. </body>
  36. <script>
  37. var container = document.getElementById('container');
  38. // Start scrolled all the way to the bottom.
  39. container.scrollTop = container.scrollHeight;
  40. // When we get MozReftestInvalidate, scroll to the top. This puts us at the
  41. // same scroll position as the reference.
  42. function doTest() {
  43. container.scrollTop = 0;
  44. document.documentElement.removeAttribute('class');
  45. }
  46. document.addEventListener("MozReftestInvalidate", doTest, false);
  47. </script>
  48. </html>