| <!DOCTYPE html> |
| <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#valdef-scroll-snap-type-mandatory" /> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| div { |
| position: absolute; |
| margin: 0px; |
| } |
| #scroller { |
| height: 500px; |
| width: 500px; |
| overflow: hidden; |
| } |
| .child { |
| width: 300px; |
| height: 300px; |
| background-color: blue; |
| } |
| </style> |
| |
| <div id="scroller"> |
| <div class="child" style="top: 0px; left: 0px;"></div> |
| <div class="child" style="top: 1000px; left: 1000px;"></div> |
| <div style="width: 2000px; height: 2000px;"></div> |
| </div> |
| |
| <script> |
| test(() => { |
| scroller.scrollSnapType = "both mandatory"; |
| |
| // Scroll to where the first child is in view. |
| scroller.scrollTo(100, 100); |
| assert_equals(scroller.scrollLeft, 100); |
| assert_equals(scroller.scrollTop, 100); |
| |
| // Scroll to where the second child is in view. |
| scroller.scrollTo(900, 900); |
| assert_equals(scroller.scrollLeft, 900); |
| assert_equals(scroller.scrollTop, 900); |
| }, "No snapping occurs if there is no valid snap position"); |
| |
| test(() => { |
| scroller.scrollSnapType = "x mandatory"; |
| |
| for (const target of document.querySelectorAll(".child")) { |
| target.scrollSnapAlign = "start none"; |
| } |
| |
| // Scroll to where the first child is in view. |
| scroller.scrollTo(100, 100); |
| assert_equals(scroller.scrollLeft, 100); |
| assert_equals(scroller.scrollTop, 100); |
| |
| // Scroll to where the second child is in view. |
| scroller.scrollTo(900, 900); |
| assert_equals(scroller.scrollLeft, 900); |
| assert_equals(scroller.scrollTop, 900); |
| }, "No snapping occurs if there is no valid snap position matches scroll-snap-type"); |
| </script> |
