diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-scroll-snap/support')
6 files changed, 308 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-scroll-snap/support/common.css b/testing/web-platform/tests/css/css-scroll-snap/support/common.css new file mode 100644 index 0000000000..f49c7cbacd --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/support/common.css @@ -0,0 +1,44 @@ +body { + margin: 0; +} + +#scroller { + position: absolute; + width: 400px; + height: 400px; + overflow: scroll; + padding: 0; + + scroll-snap-type: both mandatory; +} + +.snap { + position: absolute; + width: 200px; + height: 200px; + background-color: blue; + + scroll-snap-align: start; +} + +#space { + position: absolute; + width: 1000px; + height: 1000px; +} + +.left { + left: 0; +} + +.top { + top: 0; +} + +.right { + left: 400px; +} + +.bottom { + top: 400px; +}
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-scroll-snap/support/common.js b/testing/web-platform/tests/css/css-scroll-snap/support/common.js new file mode 100644 index 0000000000..f83122e837 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/support/common.js @@ -0,0 +1,97 @@ +const KEY_CODE_MAP = { + 'ArrowLeft': '\uE012', + 'ArrowUp': '\uE013', + 'ArrowRight': '\uE014', + 'ArrowDown': '\uE015', + 'PageUp': '\uE00E', + 'PageDown': '\uE00F', + 'End': '\uE010', + 'Home': '\uE011', + 'Space': ' ', +}; + +// Send key event to the target element using test driver. Supports human +// friendly key names for common keyboard scroll operations e.g., arrow keys, +// page keys, etc. +async function keyPress(target, key) { + let code = key; + if (KEY_CODE_MAP.hasOwnProperty(key)) + code = KEY_CODE_MAP[key]; + + // First move pointer on target and click to ensure it receives the key. + return test_driver.send_keys(target, code); +} + +// Use rAF to wait for the value of the getter function passed to not change for +// at least 15 frames or timeout after 1 second. +// +// Example usage: +// await waitForAnimationEnd(() => scroller.scrollTop); +function waitForAnimationEnd(getValue) { + const TIMEOUT = 1000; // milliseconds + const MAX_UNCHANGED_FRAMES = 15; + + const start_time = performance.now(); + let last_changed_frame = 0; + let last_value = getValue(); + + return new Promise((resolve, reject) => { + function tick(frames, time) { + // We requestAnimationFrame either for TIMEOUT milliseconds or until + // MAX_UNCHANGED_FRAMES with no change have been observed. + if (time - start_time > TIMEOUT || + frames - last_changed_frame >= MAX_UNCHANGED_FRAMES) { + resolve(time); + } else { + current_value = getValue(); + if (last_value != current_value) { + last_changed_frame = frames; + last_value = current_value; + } + requestAnimationFrame(tick.bind(this, frames + 1)); + } + } + tick(0, start_time); + }); +} + + +function waitForEvent(eventTarget, type) { + return new Promise((resolve, reject) => { + const eventListener = (evt) => { + eventTarget.removeEventListener('scroll', eventListener); + resolve(evt); + }; + eventTarget.addEventListener(type, eventListener); + }); +} + +function waitForScrollEvent(eventTarget) { + return waitForEvent(eventTarget, 'scroll'); +} + +function waitForWheelEvent(eventTarget) { + return waitForEvent(eventTarget, 'wheel'); +} + +// TODO: Update tests to replace call to this method with calls to +// waitForScrollTo, since this method does not test that scrolling has in fact +// stopped. +function waitForScrollEnd(eventTarget, getValue, targetValue) { + return waitForScrollTo(eventTarget, getValue, targetValue); +} + +function waitForScrollTo(eventTarget, getValue, targetValue) { + return new Promise((resolve, reject) => { + const scrollListener = (evt) => { + if (getValue() == targetValue) { + eventTarget.removeEventListener('scroll', scrollListener); + resolve(evt); + } + }; + if (getValue() == targetValue) + resolve(); + else + eventTarget.addEventListener('scroll', scrollListener); + }); +} diff --git a/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-align-001-iframe.html b/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-align-001-iframe.html new file mode 100644 index 0000000000..d86a5e86d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-align-001-iframe.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>iframe for #target and snap position with snapping off</title> +<style type='text/css'> + html, body { + margin: 0; padding: 0; + } + html { + /* to make failing more obvious */ + background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x fixed; + /* avoid anti-aliasing issues */ + font: 20px/1 sans-serif; + scrollbar-width: none; + } + div { + height: 1em; + } + html { scroll-padding: .5em 0 0; } /* set up a snap position */ + #target { scroll-margin: .5em 0 0; + scroll-snap-align: center; } + #stripe { background: green; } /* color part of the snap area */ + .fail { color: red; } /* make failing more obvious */ + + /* emulate `scrollbar-width: none` for browsers that don't support it yet */ + ::-webkit-scrollbar { display: none; } +</style> + +<div></div> +<div></div> +<div></div> +<div></div> +<div class="fail">FAIL</div> +<div></div> +<div id="stripe"></div> +<div id="target"></div> +<div></div> +<div class="fail">FAIL</div> +<div></div> +<div></div> +<div></div> +<div></div> diff --git a/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-margin-001-iframe.html b/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-margin-001-iframe.html new file mode 100644 index 0000000000..2b2c1d2d8c --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-margin-001-iframe.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>iframe for #target and scroll-margin with snapping off (y</title> +<style type='text/css'> + html, body { + margin: 0; padding: 0; + } + html { + /* to make failing more obvious */ + background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x fixed; + /* avoid anti-aliasing issues */ + font: 20px/1 sans-serif; + scrollbar-width: none; + } + div { + height: 1em; + } + #target { scroll-margin: 2em 0 1em; } /* snap area is exact fit for snapport */ + #stripe { background: green; } /* color part of the snap area */ + .fail { color: red; } /* make failing more obvious */ + + /* emulate `scrollbar-width: none` for browsers that don't support it yet */ + ::-webkit-scrollbar { display: none; } +</style> + +<div></div> +<div></div> +<div></div> +<div></div> +<div class="fail">FAIL</div> +<div></div> +<div id="stripe"></div> +<div id="target"></div> +<div></div> +<div class="fail">FAIL</div> +<div></div> +<div></div> +<div></div> +<div></div> diff --git a/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-padding-001-iframe.html b/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-padding-001-iframe.html new file mode 100644 index 0000000000..9260c81b1c --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-padding-001-iframe.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>iframe for #target and scroll-snap-padding with snapping off (y</title> +<style type='text/css'> + html, body { + margin: 0; padding: 0; + } + html { + /* to make failing more obvious */ + background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x fixed; + /* avoid anti-aliasing issues */ + font: 20px/1 sans-serif; + scrollbar-width: none; + } + div { + height: 1em; + } + html { scroll-padding: 2em 0 1em; } /* snap area is exact fit for snapport */ + #stripe { background: green; } /* color part of the snap area */ + .fail { color: red; } /* make failing more obvious */ + + /* emulate `scrollbar-width: none` for browsers that don't support it yet */ + ::-webkit-scrollbar { display: none; } +</style> + +<div></div> +<div></div> +<div></div> +<div></div> +<div class="fail">FAIL</div> +<div></div> +<div id="stripe"></div> +<div id="target"></div> +<div></div> +<div class="fail">FAIL</div> +<div></div> +<div></div> +<div></div> +<div></div> diff --git a/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-snap-001-iframe.html b/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-snap-001-iframe.html new file mode 100644 index 0000000000..3146a3bf88 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-snap-001-iframe.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<title>iframe for #target and snap position with snapping on</title> +<style type='text/css'> + html, body { + margin: 0; padding: 0; + } + html { + /* to make failing more obvious */ + background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x fixed; + /* avoid anti-aliasing issues */ + font: 20px/1 sans-serif; + scrollbar-width: none; + + /* turn on snapping */ + scroll-snap-type: block; + } + div { + height: 1em; + } + #target { scroll-margin: 1em 0 0; + scroll-snap-align: center; } /* set up a snap position */ + #stripe { background: green; } /* color part of the snap area */ + .fail { color: red; } /* make failing more obvious */ + + /* Try to foil the UA */ + .foilup { margin-bottom: -1em; scroll-snap-align: start; } + .foildn { margin-top: -1em; scroll-snap-align: end; } + + /* emulate `scrollbar-width: none` for browsers that don't support it yet */ + ::-webkit-scrollbar { display: none; } +</style> + +<div></div> +<div></div> +<div></div> +<div></div> +<div class="foilup"></div> +<div class="fail">FAIL</div> +<div></div> +<div id="stripe"></div> +<div class="foilup"></div> +<div id="target"></div> +<div class="foildn"></div> +<div></div> +<div class="fail">FAIL</div> +<div class="foildn"></div> +<div></div> +<div class="foildn"></div> +<div></div> +<div></div> +<div></div> |