scrollTo-scrollBy-snaps.html (4905B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" /> 3 <meta name="viewport" content="user-scalable=no"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 html { 8 margin: 0px; 9 overflow: scroll; 10 scroll-snap-type: both mandatory; 11 } 12 div { 13 position: absolute; 14 } 15 .scroller { 16 overflow: scroll; 17 scroll-snap-type: both mandatory; 18 } 19 #inner-scroller { 20 top: 3000px; 21 width: 800px; 22 height: 800px; 23 } 24 .space { 25 left: 0px; 26 top: 0px; 27 width: 4000px; 28 height: 4000px; 29 } 30 .target { 31 width: 600px; 32 height: 600px; 33 scroll-snap-align: start; 34 } 35 36 .left { 37 left: 0px; 38 } 39 .right { 40 left: 1000px; 41 } 42 .top { 43 top: 0px; 44 } 45 .bottom { 46 top: 1000px; 47 } 48 </style> 49 <body class="scroller"> 50 <div class="space"></div> 51 <div class="target left top"></div> 52 <div class="target right top"></div> 53 <div class="target left bottom"></div> 54 <div class="target right bottom"></div> 55 <div class="scroller" id="inner-scroller"> 56 <div class="space"></div> 57 <div class="target left top"></div> 58 <div class="target right top"></div> 59 <div class="target left bottom"></div> 60 <div class="target right bottom"></div> 61 </div> 62 </body> 63 64 <script> 65 function format_dict(dict) { 66 const props = []; 67 for (let prop in dict) { 68 props.push(`${prop}: ${format_value(dict[prop])}`); 69 } 70 return `{${props.join(', ')}}`; 71 } 72 73 var divScroller = document.getElementById("inner-scroller"); 74 var viewport = document.scrollingElement; 75 [ 76 [{left: 800}, 1000, 0], 77 [{top: 900}, 0, 1000], 78 [{left: 900, top: 800}, 1000, 1000], 79 [{left: 800, top: -100}, 1000, 0], /* outside bounds on y axis */ 80 [{left: 10000, top: -100}, 1000, 0] /* outside bounds on both axes */ 81 ].forEach(([input, expectedX, expectedY]) => { 82 test(() => { 83 divScroller.scrollTo(0, 0); 84 assert_equals(divScroller.scrollLeft, 0); 85 assert_equals(divScroller.scrollTop, 0); 86 if (input.left) 87 divScroller.scrollLeft = input.left; 88 if (input.top) 89 divScroller.scrollTop = input.top; 90 assert_equals(divScroller.scrollLeft, expectedX); 91 assert_equals(divScroller.scrollTop, expectedY); 92 }, `assign scrollLeft and scrollTop for ${format_dict(input)} on div lands on (${expectedX}, ${expectedY})`); 93 94 test(() => { 95 viewport.scrollTo(0, 0); 96 assert_equals(viewport.scrollLeft, 0); 97 assert_equals(viewport.scrollTop, 0); 98 if (input.left) 99 viewport.scrollLeft = input.left; 100 if (input.top) 101 viewport.scrollTop = input.top; 102 assert_equals(viewport.scrollLeft, expectedX); 103 assert_equals(viewport.scrollTop, expectedY); 104 }, `assign scrollLeft and scrollTop for ${format_dict(input)} on viewport-defining element lands on (${expectedX}, ${expectedY})`); 105 106 test(() => { 107 divScroller.scrollTo(0, 0); 108 assert_equals(divScroller.scrollLeft, 0); 109 assert_equals(divScroller.scrollTop, 0); 110 divScroller.scrollTo(input); 111 assert_equals(divScroller.scrollLeft, expectedX); 112 assert_equals(divScroller.scrollTop, expectedY); 113 }, `scrollTo(${format_dict(input)}) on div lands on (${expectedX}, ${expectedY})`); 114 115 test(() => { 116 divScroller.scrollTo(0, 0); 117 assert_equals(divScroller.scrollLeft, 0); 118 assert_equals(divScroller.scrollTop, 0); 119 divScroller.scrollBy(input); 120 assert_equals(divScroller.scrollLeft, expectedX); 121 assert_equals(divScroller.scrollTop, expectedY); 122 }, `scrollBy(${format_dict(input)}) on div lands on (${expectedX}, ${expectedY})`); 123 124 test(() => { 125 viewport.scrollTo(0, 0); 126 assert_equals(viewport.scrollLeft, 0); 127 assert_equals(viewport.scrollTop, 0); 128 viewport.scrollTo(input); 129 assert_equals(viewport.scrollLeft, expectedX); 130 assert_equals(viewport.scrollTop, expectedY); 131 }, `scrollTo(${format_dict(input)}) on viewport-defining element lands on (${expectedX}, ${expectedY})`); 132 133 test(() => { 134 viewport.scrollTo(0, 0); 135 assert_equals(viewport.scrollLeft, 0); 136 assert_equals(viewport.scrollTop, 0); 137 viewport.scrollBy(input); 138 assert_equals(viewport.scrollLeft, expectedX); 139 assert_equals(viewport.scrollTop, expectedY); 140 }, `scrollBy(${format_dict(input)}) on viewport-defining element lands on (${expectedX}, ${expectedY})`); 141 142 test(() => { 143 window.scrollTo(0, 0); 144 assert_equals(window.scrollX, 0); 145 assert_equals(window.scrollY, 0); 146 window.scrollTo(input); 147 assert_equals(window.scrollX, expectedX); 148 assert_equals(window.scrollY, expectedY); 149 }, `scrollTo(${format_dict(input)}) on window lands on (${expectedX}, ${expectedY})`); 150 151 test(() => { 152 window.scrollTo(0, 0); 153 assert_equals(window.scrollX, 0); 154 assert_equals(window.scrollY, 0); 155 window.scrollBy(input); 156 assert_equals(window.scrollX, expectedX); 157 assert_equals(window.scrollY, expectedY); 158 }, `scrollBy(${format_dict(input)}) on window lands on (${expectedX}, ${expectedY})`); 159 }); 160 </script>