| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../../resources/testharness.js"></script> |
| 3 <script src="../../resources/testharnessreport.js"></script> |
| 4 <style> |
| 5 .outer { |
| 6 height: 400px; |
| 7 width: 1000px; |
| 8 overflow: scroll; |
| 9 } |
| 10 #content { |
| 11 height: 1000px; |
| 12 width: 1200px; |
| 13 } |
| 14 </style> |
| 15 |
| 16 <div id='space' class='outer'></div> |
| 17 <div id='container' class='outer'> |
| 18 <div id='content'></div> |
| 19 </div> |
| 20 |
| 21 <script> |
| 22 const container = document.getElementById('container'); |
| 23 |
| 24 function setUpForWindow() { |
| 25 window.scrollTo(100, 100); |
| 26 container.scrollTo(0, 0); |
| 27 assert_equals(window.scrollY, 100); |
| 28 assert_equals(window.scrollX, 100); |
| 29 } |
| 30 |
| 31 function setUpForContainer() { |
| 32 window.scrollTo(0, 0); |
| 33 container.scrollTo(100, 100); |
| 34 assert_equals(container.scrollTop, 100); |
| 35 assert_equals(container.scrollLeft, 100); |
| 36 } |
| 37 |
| 38 function smoothScroll(pixels_to_scroll, start_x, start_y, gesture_source_type, d
irection, speed_in_pixels_s) { |
| 39 return new Promise((resolve, reject) => { |
| 40 chrome.gpuBenchmarking.smoothScrollBy(pixels_to_scroll, resolve, start_x, st
art_y, gesture_source_type, direction, speed_in_pixels_s); |
| 41 }); |
| 42 } |
| 43 |
| 44 function waitForAnimationEnd() { |
| 45 const MAX_FRAME = 500; |
| 46 var last_changed_frame = 0; |
| 47 var last_window_x = window.scrollX; |
| 48 var last_window_y = window.scrollY; |
| 49 var last_container_x = container.scrollLeft; |
| 50 var last_container_y = container.scrollTop; |
| 51 return new Promise((resolve, reject) => { |
| 52 function tick(frames) { |
| 53 // We requestAnimationFrame either for 500 frames or until 5 frames with |
| 54 // no change have been observed. |
| 55 if (frames >= MAX_FRAME || frames - last_changed_frame > 5) { |
| 56 resolve(); |
| 57 } else { |
| 58 if (window.scrollX != last_window_x || |
| 59 window.scrollY != last_window_y || |
| 60 container.scrollLeft != last_container_x || |
| 61 container.scrollTop != last_container_y) { |
| 62 last_changed_frame = frames; |
| 63 last_window_x = window.scrollX; |
| 64 last_window_y = window.scrollY; |
| 65 last_container_x = container.scrollLeft; |
| 66 last_container_y = container.scrollTop; |
| 67 } |
| 68 requestAnimationFrame(tick.bind(this, frames + 1)); |
| 69 } |
| 70 } |
| 71 tick(0); |
| 72 }); |
| 73 } |
| 74 |
| 75 function test_boundary_prevents_y(source_type) { |
| 76 container.style.scrollBoundaryBehaviorX = 'auto'; |
| 77 container.style.scrollBoundaryBehaviorY = 'none'; |
| 78 setUpForWindow(); |
| 79 return smoothScroll(200, 200, 500, source_type, "up", 4000) |
| 80 .then(waitForAnimationEnd) |
| 81 .then(() => { |
| 82 assert_equals(window.scrollY, 100);}) |
| 83 .then( |
| 84 smoothScroll.bind(this, 200, 200, 500, source_type, "left", 4000)) |
| 85 .then(waitForAnimationEnd) |
| 86 .then(() => { |
| 87 assert_equals(window.scrollX, 0); |
| 88 }); |
| 89 } |
| 90 |
| 91 function test_boundary_prevents_x(source_type) { |
| 92 container.style.scrollBoundaryBehaviorX = 'none'; |
| 93 container.style.scrollBoundaryBehaviorY = 'auto'; |
| 94 setUpForWindow(); |
| 95 return smoothScroll(200, 200, 500, source_type, 'left', 4000) |
| 96 .then(waitForAnimationEnd) |
| 97 .then(() => { |
| 98 assert_equals(window.scrollX, 100);}) |
| 99 .then( |
| 100 smoothScroll.bind(this, 200, 200, 500, source_type, 'up', 4000)) |
| 101 .then(waitForAnimationEnd) |
| 102 .then(() => { |
| 103 assert_equals(window.scrollY, 0); |
| 104 }); |
| 105 } |
| 106 |
| 107 function test_boundary_allows_inner(source_type) { |
| 108 container.style.scrollBoundaryBehaviorX = 'none'; |
| 109 container.style.scrollBoundaryBehaviorY = 'none'; |
| 110 setUpForContainer(); |
| 111 return smoothScroll(200, 200, 500, source_type, 'upleft', 4000) |
| 112 .then(waitForAnimationEnd) |
| 113 .then(() => { |
| 114 assert_equals(container.scrollTop, 0); |
| 115 assert_equals(container.scrollLeft, 0); |
| 116 }); |
| 117 } |
| 118 |
| 119 const TOUCH_SOURCE_TYPE = 1; // TOUCH_INPUT from synthetic_gesture_params.h |
| 120 const WHEEL_SOURCE_TYPE = 2; // TOUCH_INPUT from synthetic_gesture_params.h |
| 121 promise_test(t => { |
| 122 return test_boundary_prevents_y(WHEEL_SOURCE_TYPE); |
| 123 }, 'scroll-boundary-behavior-y: none should only prevent scroll propagation on
y axis with: wheel.'); |
| 124 promise_test(t => { |
| 125 return test_boundary_prevents_x(WHEEL_SOURCE_TYPE); |
| 126 }, 'scroll-boundary-behavior-x: none should only prevent scroll propagation on
x axis with: wheel.'); |
| 127 promise_test(t => { |
| 128 return test_boundary_allows_inner(WHEEL_SOURCE_TYPE); |
| 129 }, 'scroll-boundary-behavior should not affect scrolling inside the applied co
ntainer with: wheel.'); |
| 130 |
| 131 const IS_MAC = navigator.platform.indexOf('Mac') == 0; |
| 132 if (!IS_MAC) { |
| 133 promise_test(t => { |
| 134 return test_boundary_prevents_y(TOUCH_SOURCE_TYPE); |
| 135 }, 'scroll-boundary-behavior-y: none should only prevent scroll propagation
on y axis with: touch.'); |
| 136 promise_test(t => { |
| 137 return test_boundary_prevents_x(TOUCH_SOURCE_TYPE); |
| 138 }, 'scroll-boundary-behavior-x: none should only prevent scroll propagation
on x axis with: touch.'); |
| 139 promise_test(t => { |
| 140 return test_boundary_allows_inner(TOUCH_SOURCE_TYPE); |
| 141 }, 'scroll-boundary-behavior should not affect scrolling inside the applied
container with: touch.'); |
| 142 } |
| 143 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2769793002:
Implement CSS: scroll-boundary-behavior (Closed)
