| <!DOCTYPE html> |
| <meta charset=utf-8> |
| <title>cssom-view - elementScroll</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| #section { |
| width: 300px; |
| height: 500px; |
| /*position: absolute;*/ |
| top: 16px; |
| left: 16px; |
| border: inset gray 3px; |
| overflow: hidden; |
| background: white; |
| } |
| |
| #scrollable { |
| width: 400px; |
| height: 700px; |
| background: linear-gradient(135deg, red, blue); |
| } |
| |
| </style> |
| |
| <section id="section"> |
| <div id="scrollable"></div> |
| <div id="unrelated"></div> |
| </section> |
| |
| <script> |
| setup({explicit_done:true}); |
| window.onload = function () { |
| var section = document.getElementById("section"); |
| var unrelated = document.getElementById("unrelated"); |
| |
| test(function () { |
| assert_equals(section.scrollTop, 0, "initial scrollTop should be 0"); |
| assert_equals(section.scrollLeft, 0, "initial scrollLeft should be 0"); |
| |
| section.scrollTop = 30; |
| section.scrollLeft = 40; |
| |
| assert_equals(section.scrollTop, 30, "changed scrollTop should be 40"); |
| assert_equals(section.scrollLeft, 40, "changed scrollLeft should be 40"); |
| assert_equals(unrelated.scrollTop, 0, "unrelated element should not scroll"); |
| assert_equals(unrelated.scrollLeft, 0, "unrelated element should not scroll"); |
| }, "Element scrollTop/Left getter/setter test"); |
| |
| test(function () { |
| section.scroll(50, 60); |
| |
| assert_equals(section.scrollLeft, 50, "changed scrollLeft should be 50"); |
| assert_equals(section.scrollTop, 60, "changed scrollTop should be 60"); |
| }, "Element scroll test (two arguments)"); |
| |
| test(function () { |
| section.scroll({left: 55, top: 65}); |
| |
| assert_equals(section.scrollLeft, 55, "changed scrollLeft should be 55"); |
| assert_equals(section.scrollTop, 65, "changed scrollTop should be 65"); |
| |
| section.scroll({left: 85}); |
| |
| assert_equals(section.scrollLeft, 85, "changed scrollLeft should be 85"); |
| assert_equals(section.scrollTop, 65, "scrollTop should stay at 65"); |
| |
| section.scroll({top: 75}); |
| |
| assert_equals(section.scrollLeft, 85, "scrollLeft should stay at 85"); |
| assert_equals(section.scrollTop, 75, "changed scrollTop should be 75"); |
| |
| section.scroll({}); |
| |
| assert_equals(section.scrollLeft, 85, "scrollLeft should stay at 85"); |
| assert_equals(section.scrollTop, 75, "scrollTop should stay at 75"); |
| |
| section.scroll(); |
| |
| assert_equals(section.scrollLeft, 85, "scrollLeft should stay at 85"); |
| assert_equals(section.scrollTop, 75, "scrollTop should stay at 75"); |
| }, "Element scroll test (one argument)"); |
| |
| test(function () { |
| section.scrollTo(80, 70); |
| |
| assert_equals(section.scrollLeft, 80, "changed scrollLeft should be 70"); |
| assert_equals(section.scrollTop, 70, "changed scrollTop should be 80"); |
| }, "Element scrollTo test (two arguments)"); |
| |
| test(function () { |
| section.scrollTo({left: 75, top: 85}); |
| |
| assert_equals(section.scrollLeft, 75, "changed scrollLeft should be 75"); |
| assert_equals(section.scrollTop, 85, "changed scrollTop should be 85"); |
| |
| section.scrollTo({left: 65}); |
| |
| assert_equals(section.scrollLeft, 65, "changed scrollLeft should be 65"); |
| assert_equals(section.scrollTop, 85, "scrollTop should stay at 85"); |
| |
| section.scrollTo({top: 55}); |
| |
| assert_equals(section.scrollLeft, 65, "scrollLeft should stay at 65"); |
| assert_equals(section.scrollTop, 55, "changed scrollTop should be 55"); |
| |
| section.scrollTo({}); |
| |
| assert_equals(section.scrollLeft, 65, "scrollLeft should stay at 65"); |
| assert_equals(section.scrollTop, 55, "scrollTop should stay at 55"); |
| |
| section.scrollTo(); |
| |
| assert_equals(section.scrollLeft, 65, "scrollLeft should stay at 55"); |
| assert_equals(section.scrollTop, 55, "scrollTop should stay at 55"); |
| }, "Element scrollTo test (one argument)"); |
| |
| test(function () { |
| var left = section.scrollLeft; |
| var top = section.scrollTop; |
| |
| section.scrollBy(10, 20); |
| |
| assert_equals(section.scrollLeft, left + 10, "increment of scrollLeft should be 10") |
| assert_equals(section.scrollTop, top + 20, "increment of scrollTop should be 20") |
| }, "Element scrollBy test (two arguments)"); |
| |
| test(function () { |
| var left = section.scrollLeft; |
| var top = section.scrollTop; |
| |
| section.scrollBy({left: 5, top: 15}); |
| left += 5 |
| top += 15 |
| |
| assert_equals(section.scrollLeft, left, "increment of scrollLeft should be 5") |
| assert_equals(section.scrollTop, top, "increment of scrollTop should be 15") |
| |
| section.scrollBy({left: -15}); |
| left -= 15 |
| |
| assert_equals(section.scrollLeft, left, "decrement of scrollLeft should be 15") |
| assert_equals(section.scrollTop, top, "scrollTop should not be modified") |
| |
| section.scrollBy({top: -5}); |
| top -= 5; |
| |
| assert_equals(section.scrollLeft, left, "scrollLeft should not be modified") |
| assert_equals(section.scrollTop, top, "decrement of scrollTop should be 5") |
| |
| section.scrollBy({}); |
| |
| assert_equals(section.scrollLeft, left, "scrollLeft should not be modified") |
| assert_equals(section.scrollTop, top, "scrollTop should not be modified") |
| |
| section.scrollBy(); |
| |
| assert_equals(section.scrollLeft, left, "scrollLeft should not be modified") |
| assert_equals(section.scrollTop, top, "scrollTop should not be modified") |
| }, "Element scrollBy test (one argument)"); |
| |
| test(function () { |
| section.scrollTop = 1000; |
| section.scrollLeft = 1000; |
| |
| assert_equals(section.scrollTop, 700 - 500, "changed scrollTop should be 200"); |
| assert_equals(section.scrollLeft, 400 - 300, "changed scrollLeft should be 100"); |
| |
| }, "Element scroll maximum test"); |
| |
| done(); |
| }; |
| </script> |