scroll-margin.html (2712B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-margin" /> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <style> 6 div { 7 position: absolute; 8 margin: 0px; 9 } 10 #scroller { 11 height: 500px; 12 width: 500px; 13 overflow: hidden; 14 scroll-snap-type: both mandatory; 15 } 16 #target { 17 width: 300px; 18 height: 300px; 19 background-color: blue; 20 } 21 #another-target { 22 width: 300px; 23 height: 300px; 24 top: 400px; 25 left: 400px; 26 background-color: blue; 27 scroll-snap-align: start; 28 } 29 </style> 30 31 <div id="scroller"> 32 <div style="width: 2000px; height: 2000px;"></div> 33 <div id="target"></div> 34 <div id="another-target"></div> 35 </div> 36 37 <script> 38 test(() => { 39 target.style.scrollSnapAlign = "start"; 40 target.style.scrollMargin = "100px"; 41 target.style.left = "300px"; 42 target.style.top = "300px"; 43 44 scroller.scrollTo(0, 0); 45 // `target position (300px, 300px)` - `margin (100px, 100px)`. 46 assert_equals(scroller.scrollLeft, 200); 47 assert_equals(scroller.scrollTop, 200); 48 49 target.style.scrollSnapAlign = "end"; 50 51 // `target position (300px, 300px)` + `target size (300px, 300px) + 52 // `margin (100px, 100px) - `scroller size (500px, 500px)`. 53 scroller.scrollTo(0, 0); 54 assert_equals(scroller.scrollLeft, 200); 55 assert_equals(scroller.scrollTop, 200); 56 }, "Snaps to the positions adjusted by scroll-margin"); 57 58 test(() => { 59 target.style.left = "0px"; 60 target.style.top = "0px"; 61 target.style.scrollSnapAlign = "start"; 62 63 // Since the target is at (0px, 0px) in the scroll port, the added margin 64 // should not be considered, and the snap points for this snap area should be 65 // the closest points in the scroll port (i.e x=0 or y=0). 66 target.style.scrollMargin = "200px"; 67 68 // Distance from target without margin: 69 // `scroll position (150px, 150px)` - `target position (0px, 0px)` 70 // = (150px, 150px) 71 // 72 // Distance from target with margin: 73 // `scroll position (150px, 150px)` - [`target position (0px, 0px)` - 74 // `target margin (200px, 200px)`] 75 // = (350px, 350px) 76 // 77 // Distance from other target: 78 // `other target position (400px, 400px)` - `scroll position (150px, 150px)` 79 // = (250px, 250px) 80 // 81 // Therefore if the "out-of-scrollport" scroll-margin contributes to the 82 // calculation, then the other target would be snapped to. However if the 83 // scroll-margin is not considered, then the (0px, 0px) target should be 84 // snapped to. 85 scroller.scrollTo(150, 150); 86 assert_equals(scroller.scrollLeft, 0); 87 assert_equals(scroller.scrollTop, 0); 88 }, "scroll-margin doesn't contribute to the snap position of the element " + 89 "if it's outside of the scroll port"); 90 </script>