elementScroll.html (6449B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>cssom-view - elementScroll</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 #section { 8 width: 300px; 9 height: 500px; 10 /*position: absolute;*/ 11 top: 16px; 12 left: 16px; 13 border: inset gray 3px; 14 overflow: hidden; 15 background: white; 16 } 17 18 #scrollable { 19 width: 400px; 20 height: 700px; 21 background: linear-gradient(135deg, red, blue); 22 } 23 24 </style> 25 26 <section id="section"> 27 <div id="scrollable"></div> 28 <div id="unrelated"></div> 29 </section> 30 31 <script> 32 setup({explicit_done:true}); 33 window.onload = function () { 34 var section = document.getElementById("section"); 35 var unrelated = document.getElementById("unrelated"); 36 37 test(function () { 38 assert_equals(section.scrollTop, 0, "initial scrollTop should be 0"); 39 assert_equals(section.scrollLeft, 0, "initial scrollLeft should be 0"); 40 41 section.scrollTop = 30; 42 section.scrollLeft = 40; 43 44 assert_equals(section.scrollTop, 30, "changed scrollTop should be 40"); 45 assert_equals(section.scrollLeft, 40, "changed scrollLeft should be 40"); 46 assert_equals(unrelated.scrollTop, 0, "unrelated element should not scroll"); 47 assert_equals(unrelated.scrollLeft, 0, "unrelated element should not scroll"); 48 }, "Element scrollTop/Left getter/setter test"); 49 50 test(function () { 51 section.scroll(50, 60); 52 53 assert_equals(section.scrollLeft, 50, "changed scrollLeft should be 50"); 54 assert_equals(section.scrollTop, 60, "changed scrollTop should be 60"); 55 }, "Element scroll test (two arguments)"); 56 57 test(function () { 58 section.scroll({left: 55, top: 65}); 59 60 assert_equals(section.scrollLeft, 55, "changed scrollLeft should be 55"); 61 assert_equals(section.scrollTop, 65, "changed scrollTop should be 65"); 62 63 section.scroll({left: 85}); 64 65 assert_equals(section.scrollLeft, 85, "changed scrollLeft should be 85"); 66 assert_equals(section.scrollTop, 65, "scrollTop should stay at 65"); 67 68 section.scroll({top: 75}); 69 70 assert_equals(section.scrollLeft, 85, "scrollLeft should stay at 85"); 71 assert_equals(section.scrollTop, 75, "changed scrollTop should be 75"); 72 73 section.scroll({}); 74 75 assert_equals(section.scrollLeft, 85, "scrollLeft should stay at 85"); 76 assert_equals(section.scrollTop, 75, "scrollTop should stay at 75"); 77 78 section.scroll(); 79 80 assert_equals(section.scrollLeft, 85, "scrollLeft should stay at 85"); 81 assert_equals(section.scrollTop, 75, "scrollTop should stay at 75"); 82 }, "Element scroll test (one argument)"); 83 84 test(function () { 85 section.scrollTo(80, 70); 86 87 assert_equals(section.scrollLeft, 80, "changed scrollLeft should be 70"); 88 assert_equals(section.scrollTop, 70, "changed scrollTop should be 80"); 89 }, "Element scrollTo test (two arguments)"); 90 91 test(function () { 92 section.scrollTo({left: 75, top: 85}); 93 94 assert_equals(section.scrollLeft, 75, "changed scrollLeft should be 75"); 95 assert_equals(section.scrollTop, 85, "changed scrollTop should be 85"); 96 97 section.scrollTo({left: 65}); 98 99 assert_equals(section.scrollLeft, 65, "changed scrollLeft should be 65"); 100 assert_equals(section.scrollTop, 85, "scrollTop should stay at 85"); 101 102 section.scrollTo({top: 55}); 103 104 assert_equals(section.scrollLeft, 65, "scrollLeft should stay at 65"); 105 assert_equals(section.scrollTop, 55, "changed scrollTop should be 55"); 106 107 section.scrollTo({}); 108 109 assert_equals(section.scrollLeft, 65, "scrollLeft should stay at 65"); 110 assert_equals(section.scrollTop, 55, "scrollTop should stay at 55"); 111 112 section.scrollTo(); 113 114 assert_equals(section.scrollLeft, 65, "scrollLeft should stay at 55"); 115 assert_equals(section.scrollTop, 55, "scrollTop should stay at 55"); 116 }, "Element scrollTo test (one argument)"); 117 118 test(function () { 119 var left = section.scrollLeft; 120 var top = section.scrollTop; 121 122 section.scrollBy(10, 20); 123 124 assert_equals(section.scrollLeft, left + 10, "increment of scrollLeft should be 10") 125 assert_equals(section.scrollTop, top + 20, "increment of scrollTop should be 20") 126 }, "Element scrollBy test (two arguments)"); 127 128 test(function () { 129 var left = section.scrollLeft; 130 var top = section.scrollTop; 131 132 section.scrollBy({left: 5, top: 15}); 133 left += 5 134 top += 15 135 136 assert_equals(section.scrollLeft, left, "increment of scrollLeft should be 5") 137 assert_equals(section.scrollTop, top, "increment of scrollTop should be 15") 138 139 section.scrollBy({left: -15}); 140 left -= 15 141 142 assert_equals(section.scrollLeft, left, "decrement of scrollLeft should be 15") 143 assert_equals(section.scrollTop, top, "scrollTop should not be modified") 144 145 section.scrollBy({top: -5}); 146 top -= 5; 147 148 assert_equals(section.scrollLeft, left, "scrollLeft should not be modified") 149 assert_equals(section.scrollTop, top, "decrement of scrollTop should be 5") 150 151 section.scrollBy({}); 152 153 assert_equals(section.scrollLeft, left, "scrollLeft should not be modified") 154 assert_equals(section.scrollTop, top, "scrollTop should not be modified") 155 156 section.scrollBy(); 157 158 assert_equals(section.scrollLeft, left, "scrollLeft should not be modified") 159 assert_equals(section.scrollTop, top, "scrollTop should not be modified") 160 }, "Element scrollBy test (one argument)"); 161 162 test(function () { 163 section.scrollTop = 1000; 164 section.scrollLeft = 1000; 165 166 assert_equals(section.scrollTop, 700 - 500, "changed scrollTop should be 200"); 167 assert_equals(section.scrollLeft, 400 - 300, "changed scrollLeft should be 100"); 168 169 }, "Element scroll maximum test"); 170 171 done(); 172 }; 173 </script>