| <!DOCTYPE html> |
| <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" /> |
| <title>Tests that window should snap at user scroll end.</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-actions.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| <script src="support/common.js"></script> |
| <style> |
| html { |
| margin: 0px; |
| scroll-snap-type: both mandatory; |
| } |
| #content { |
| width: 2000px; |
| height: 2000px; |
| padding: 0px; |
| margin: 0px; |
| } |
| #target { |
| position: relative; |
| left: 400px; |
| top: 400px; |
| width: 400px; |
| height: 400px; |
| background-color: lightblue; |
| overflow: hidden; |
| scroll-snap-align: start; |
| } |
| #i1 { |
| color: red; |
| font-weight: bold; |
| } |
| </style> |
| |
| <div id="content"> |
| <div id="target"> |
| <h1>CSSScrollSnap</h1> |
| <h4>Tests that the window can snap at user scroll end.</h4> |
| <ol> |
| <li id="i1" style="color: red"> |
| Scroll the page vertically and horizontally. |
| Keep scrolling until background has turned yellow.</li> |
| <li id="i2"> Press the button "Done"</li> |
| </ol> |
| <input type="button" id="btn" value="DONE" style="width: 100px; height: 50px;"/> |
| </div> |
| </div> |
| |
| <script> |
| var snap_test = async_test('Tests that window should snap at user scroll end.'); |
| var body = document.body; |
| var button = document.getElementById("btn"); |
| var target = document.getElementById("target"); |
| var instruction1 = document.getElementById("i1"); |
| var instruction2 = document.getElementById("i2"); |
| var scrolled_x = false; |
| var scrolled_y = false; |
| var start_x = window.scrollX; |
| var start_y = window.scrollY; |
| var actions_promise; |
| |
| scrollTop = () => window.scrollY; |
| |
| window.onscroll = function() { |
| if (scrolled_x && scrolled_y) { |
| body.style.backgroundColor = "yellow"; |
| instruction1.style.color = "black"; |
| instruction1.style.fontWeight = "normal"; |
| instruction2.style.color = "red"; |
| instruction2.style.fontWeight = "bold"; |
| return; |
| } |
| |
| scrolled_x |= window.scrollX != start_x; |
| scrolled_y |= window.scrollY != start_y; |
| } |
| |
| button.onclick = function() { |
| if (!scrolled_x || !scrolled_y) |
| return; |
| |
| snap_test.step(() => { |
| assert_equals(window.scrollX, target.offsetLeft, |
| "window.scrollX should be at snapped position."); |
| assert_equals(window.scrollY, target.offsetTop, |
| "window.scrollY should be at snapped position."); |
| }); |
| |
| // To make the test result visible. |
| var content = document.getElementById("content"); |
| body.removeChild(content); |
| actions_promise.then( () => { |
| snap_test.done(); |
| }); |
| } |
| |
| // Inject scroll actions. |
| const pos_x = 20; |
| const pos_y = 20; |
| const scroll_delta_x = 100; |
| const scroll_delta_y = 100; |
| actions_promise = new test_driver.Actions() |
| .scroll(pos_x, pos_y, scroll_delta_x, scroll_delta_y) |
| .send().then(() => { |
| return waitForAnimationEnd(scrollTop); |
| }).then(() => { |
| return test_driver.click(button); |
| }); |
| </script> |
