| Index: third_party/WebKit/LayoutTests/fast/scroll-behavior/scroll-boundary-behavior.html
|
| diff --git a/third_party/WebKit/LayoutTests/fast/scroll-behavior/scroll-boundary-behavior.html b/third_party/WebKit/LayoutTests/fast/scroll-behavior/scroll-boundary-behavior.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..dac81ab58697bc4e43b469a0150053facafeb006
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/fast/scroll-behavior/scroll-boundary-behavior.html
|
| @@ -0,0 +1,143 @@
|
| +<!DOCTYPE html>
|
| +<script src="../../resources/testharness.js"></script>
|
| +<script src="../../resources/testharnessreport.js"></script>
|
| +<style>
|
| +.outer {
|
| + height: 400px;
|
| + width: 1000px;
|
| + overflow: scroll;
|
| +}
|
| +#content {
|
| + height: 1000px;
|
| + width: 1200px;
|
| +}
|
| +</style>
|
| +
|
| +<div id='space' class='outer'></div>
|
| +<div id='container' class='outer'>
|
| + <div id='content'></div>
|
| +</div>
|
| +
|
| +<script>
|
| +const container = document.getElementById('container');
|
| +
|
| +function setUpForWindow() {
|
| + window.scrollTo(100, 100);
|
| + container.scrollTo(0, 0);
|
| + assert_equals(window.scrollY, 100);
|
| + assert_equals(window.scrollX, 100);
|
| +}
|
| +
|
| +function setUpForContainer() {
|
| + window.scrollTo(0, 0);
|
| + container.scrollTo(100, 100);
|
| + assert_equals(container.scrollTop, 100);
|
| + assert_equals(container.scrollLeft, 100);
|
| +}
|
| +
|
| +function smoothScroll(pixels_to_scroll, start_x, start_y, gesture_source_type, direction, speed_in_pixels_s) {
|
| + return new Promise((resolve, reject) => {
|
| + chrome.gpuBenchmarking.smoothScrollBy(pixels_to_scroll, resolve, start_x, start_y, gesture_source_type, direction, speed_in_pixels_s);
|
| + });
|
| +}
|
| +
|
| +function waitForAnimationEnd() {
|
| + const MAX_FRAME = 500;
|
| + var last_changed_frame = 0;
|
| + var last_window_x = window.scrollX;
|
| + var last_window_y = window.scrollY;
|
| + var last_container_x = container.scrollLeft;
|
| + var last_container_y = container.scrollTop;
|
| + return new Promise((resolve, reject) => {
|
| + function tick(frames) {
|
| + // We requestAnimationFrame either for 500 frames or until 5 frames with
|
| + // no change have been observed.
|
| + if (frames >= MAX_FRAME || frames - last_changed_frame > 5) {
|
| + resolve();
|
| + } else {
|
| + if (window.scrollX != last_window_x ||
|
| + window.scrollY != last_window_y ||
|
| + container.scrollLeft != last_container_x ||
|
| + container.scrollTop != last_container_y) {
|
| + last_changed_frame = frames;
|
| + last_window_x = window.scrollX;
|
| + last_window_y = window.scrollY;
|
| + last_container_x = container.scrollLeft;
|
| + last_container_y = container.scrollTop;
|
| + }
|
| + requestAnimationFrame(tick.bind(this, frames + 1));
|
| + }
|
| + }
|
| + tick(0);
|
| + });
|
| +}
|
| +
|
| +function test_boundary_prevents_y(source_type) {
|
| + container.style.scrollBoundaryBehaviorX = 'auto';
|
| + container.style.scrollBoundaryBehaviorY = 'none';
|
| + setUpForWindow();
|
| + return smoothScroll(200, 200, 500, source_type, "up", 4000)
|
| + .then(waitForAnimationEnd)
|
| + .then(() => {
|
| + assert_equals(window.scrollY, 100);})
|
| + .then(
|
| + smoothScroll.bind(this, 200, 200, 500, source_type, "left", 4000))
|
| + .then(waitForAnimationEnd)
|
| + .then(() => {
|
| + assert_equals(window.scrollX, 0);
|
| + });
|
| +}
|
| +
|
| +function test_boundary_prevents_x(source_type) {
|
| + container.style.scrollBoundaryBehaviorX = 'none';
|
| + container.style.scrollBoundaryBehaviorY = 'auto';
|
| + setUpForWindow();
|
| + return smoothScroll(200, 200, 500, source_type, 'left', 4000)
|
| + .then(waitForAnimationEnd)
|
| + .then(() => {
|
| + assert_equals(window.scrollX, 100);})
|
| + .then(
|
| + smoothScroll.bind(this, 200, 200, 500, source_type, 'up', 4000))
|
| + .then(waitForAnimationEnd)
|
| + .then(() => {
|
| + assert_equals(window.scrollY, 0);
|
| + });
|
| +}
|
| +
|
| +function test_boundary_allows_inner(source_type) {
|
| + container.style.scrollBoundaryBehaviorX = 'none';
|
| + container.style.scrollBoundaryBehaviorY = 'none';
|
| + setUpForContainer();
|
| + return smoothScroll(200, 200, 500, source_type, 'upleft', 4000)
|
| + .then(waitForAnimationEnd)
|
| + .then(() => {
|
| + assert_equals(container.scrollTop, 0);
|
| + assert_equals(container.scrollLeft, 0);
|
| + });
|
| +}
|
| +
|
| +const TOUCH_SOURCE_TYPE = 1; // TOUCH_INPUT from synthetic_gesture_params.h
|
| +const WHEEL_SOURCE_TYPE = 2; // TOUCH_INPUT from synthetic_gesture_params.h
|
| +promise_test(t => {
|
| + return test_boundary_prevents_y(WHEEL_SOURCE_TYPE);
|
| + }, 'scroll-boundary-behavior-y: none should only prevent scroll propagation on y axis with: wheel.');
|
| +promise_test(t => {
|
| + return test_boundary_prevents_x(WHEEL_SOURCE_TYPE);
|
| + }, 'scroll-boundary-behavior-x: none should only prevent scroll propagation on x axis with: wheel.');
|
| +promise_test(t => {
|
| + return test_boundary_allows_inner(WHEEL_SOURCE_TYPE);
|
| + }, 'scroll-boundary-behavior should not affect scrolling inside the applied container with: wheel.');
|
| +
|
| +const IS_MAC = navigator.platform.indexOf('Mac') == 0;
|
| +if (!IS_MAC) {
|
| + promise_test(t => {
|
| + return test_boundary_prevents_y(TOUCH_SOURCE_TYPE);
|
| + }, 'scroll-boundary-behavior-y: none should only prevent scroll propagation on y axis with: touch.');
|
| + promise_test(t => {
|
| + return test_boundary_prevents_x(TOUCH_SOURCE_TYPE);
|
| + }, 'scroll-boundary-behavior-x: none should only prevent scroll propagation on x axis with: touch.');
|
| + promise_test(t => {
|
| + return test_boundary_allows_inner(TOUCH_SOURCE_TYPE);
|
| + }, 'scroll-boundary-behavior should not affect scrolling inside the applied container with: touch.');
|
| +}
|
| +</script>
|
|
|
Chromium Code Reviews
Issue 2769793002:
Implement CSS: scroll-boundary-behavior (Closed)
