https://github.com/web-platform-tests/wpt
Tip revision: 64bd43ee19cc4667e4a3020c5894af7dbe68f5cc authored by Yuki Shiino on 25 December 2018, 07:52:23 UTC
v8binding: Add lexical scope test of event handlers in WPT
v8binding: Add lexical scope test of event handlers in WPT
Tip revision: 64bd43e
current-time-writing-modes.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>ScrollTimeline current time algorithm - interaction with writing modes</title>
<link rel="help" href="https://wicg.github.io/scroll-animations/#current-time-algorithm">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="./resources/scrolltimeline-utils.js"></script>
<body></body>
<script>
'use strict';
test(function() {
const scrollerOverrides = new Map([['direction', 'rtl']]);
const scroller = setupScrollTimelineTest(scrollerOverrides);
// Set the timeRange such that currentTime maps directly to the value
// scrolled. The contents and scroller are square, so it suffices to compute
// one edge and use it for all the timelines.
const scrollerSize = scroller.scrollHeight - scroller.clientHeight;
const blockScrollTimeline = new ScrollTimeline(
{scrollSource: scroller, timeRange: scrollerSize, orientation: 'block'});
const inlineScrollTimeline = new ScrollTimeline(
{scrollSource: scroller, timeRange: scrollerSize, orientation: 'inline'});
const horizontalScrollTimeline = new ScrollTimeline({
scrollSource: scroller,
timeRange: scrollerSize,
orientation: 'horizontal'
});
const verticalScrollTimeline = new ScrollTimeline({
scrollSource: scroller,
timeRange: scrollerSize,
orientation: 'vertical'
});
// Unscrolled, all timelines should read a current time of 0 even though the
// X-axis will have started at the right hand side for rtl.
assert_equals(
blockScrollTimeline.currentTime, 0, 'Unscrolled block timeline');
assert_equals(
inlineScrollTimeline.currentTime, 0, 'Unscrolled inline timeline');
assert_equals(
horizontalScrollTimeline.currentTime, 0,
'Unscrolled horizontal timeline');
assert_equals(
verticalScrollTimeline.currentTime, 0, 'Unscrolled vertical timeline');
// The offset in the inline/horizontal direction should be inverted. The
// block/vertical direction should be unaffected.
scroller.scrollTop = 50;
scroller.scrollLeft = 75;
assert_equals(blockScrollTimeline.currentTime, 50, 'Scrolled block timeline');
assert_equals(
inlineScrollTimeline.currentTime, scrollerSize - 75,
'Scrolled inline timeline');
assert_equals(
horizontalScrollTimeline.currentTime, scrollerSize - 75,
'Scrolled horizontal timeline');
assert_equals(
verticalScrollTimeline.currentTime, 50, 'Scrolled vertical timeline');
}, 'currentTime handles direction: rtl correctly');
test(function() {
const scrollerOverrides = new Map([['writing-mode', 'vertical-rl']]);
const scroller = setupScrollTimelineTest(scrollerOverrides);
// Set the timeRange such that currentTime maps directly to the value
// scrolled. The contents and scroller are square, so it suffices to compute
// one edge and use it for all the timelines.
const scrollerSize = scroller.scrollHeight - scroller.clientHeight;
const blockScrollTimeline = new ScrollTimeline(
{scrollSource: scroller, timeRange: scrollerSize, orientation: 'block'});
const inlineScrollTimeline = new ScrollTimeline(
{scrollSource: scroller, timeRange: scrollerSize, orientation: 'inline'});
const horizontalScrollTimeline = new ScrollTimeline({
scrollSource: scroller,
timeRange: scrollerSize,
orientation: 'horizontal'
});
const verticalScrollTimeline = new ScrollTimeline({
scrollSource: scroller,
timeRange: scrollerSize,
orientation: 'vertical'
});
// Unscrolled, all timelines should read a current time of 0 even though the
// X-axis will have started at the right hand side for vertical-rl.
assert_equals(
blockScrollTimeline.currentTime, 0, 'Unscrolled block timeline');
assert_equals(
inlineScrollTimeline.currentTime, 0, 'Unscrolled inline timeline');
assert_equals(
horizontalScrollTimeline.currentTime, 0,
'Unscrolled horizontal timeline');
assert_equals(
verticalScrollTimeline.currentTime, 0, 'Unscrolled vertical timeline');
// For vertical-rl, the X-axis starts on the right-hand-side and is the block
// axis. The Y-axis is normal but is the inline axis. For the
// horizontal/vertical cases, horizontal starts on the right-hand-side and
// vertical is normal.
scroller.scrollTop = 50;
scroller.scrollLeft = 75;
assert_equals(
blockScrollTimeline.currentTime, scrollerSize - 75,
'Scrolled block timeline');
assert_equals(
inlineScrollTimeline.currentTime, 50, 'SCrolled inline timeline');
assert_equals(
horizontalScrollTimeline.currentTime, scrollerSize - 75,
'Scrolled horizontal timeline');
assert_equals(
verticalScrollTimeline.currentTime, 50, 'Scrolled vertical timeline');
}, 'currentTime handles writing-mode: vertical-rl correctly');
test(function() {
const scrollerOverrides = new Map([['writing-mode', 'vertical-lr']]);
const scroller = setupScrollTimelineTest(scrollerOverrides);
// Set the timeRange such that currentTime maps directly to the value
// scrolled. The contents and scroller are square, so it suffices to compute
// one edge and use it for all the timelines.
const scrollerSize = scroller.scrollHeight - scroller.clientHeight;
const blockScrollTimeline = new ScrollTimeline(
{scrollSource: scroller, timeRange: scrollerSize, orientation: 'block'});
const inlineScrollTimeline = new ScrollTimeline(
{scrollSource: scroller, timeRange: scrollerSize, orientation: 'inline'});
const horizontalScrollTimeline = new ScrollTimeline({
scrollSource: scroller,
timeRange: scrollerSize,
orientation: 'horizontal'
});
const verticalScrollTimeline = new ScrollTimeline({
scrollSource: scroller,
timeRange: scrollerSize,
orientation: 'vertical'
});
// Unscrolled, all timelines should read a current time of 0.
assert_equals(
blockScrollTimeline.currentTime, 0, 'Unscrolled block timeline');
assert_equals(
inlineScrollTimeline.currentTime, 0, 'Unscrolled inline timeline');
assert_equals(
horizontalScrollTimeline.currentTime, 0,
'Unscrolled horizontal timeline');
assert_equals(
verticalScrollTimeline.currentTime, 0, 'Unscrolled vertical timeline');
// For vertical-lr, both axes start at their 'normal' positions but the X-axis
// is the block direction and the Y-axis is the inline direction. This does
// not affect horizontal/vertical.
scroller.scrollTop = 50;
scroller.scrollLeft = 75;
assert_equals(blockScrollTimeline.currentTime, 75, 'Scrolled block timeline');
assert_equals(
inlineScrollTimeline.currentTime, 50, 'Scrolled inline timeline');
assert_equals(
horizontalScrollTimeline.currentTime, 75, 'Scrolled horizontal timeline');
assert_equals(
verticalScrollTimeline.currentTime, 50, 'Scrolled vertical timeline');
}, 'currentTime handles writing-mode: vertical-lr correctly');
test(function() {
const scrollerOverrides = new Map([['direction', 'rtl']]);
const scroller = setupScrollTimelineTest(scrollerOverrides);
// Set the timeRange such that currentTime maps directly to the value
// scrolled. The contents and scroller are square, so it suffices to compute
// one edge and use it for all the timelines.
const scrollerSize = scroller.scrollHeight - scroller.clientHeight;
const lengthScrollTimeline = new ScrollTimeline({
scrollSource: scroller,
timeRange: scrollerSize,
orientation: 'horizontal',
startScrollOffset: '20px'
});
const percentageScrollTimeline = new ScrollTimeline({
scrollSource: scroller,
timeRange: scrollerSize,
orientation: 'horizontal',
startScrollOffset: '20%'
});
const calcScrollTimeline = new ScrollTimeline({
scrollSource: scroller,
timeRange: scrollerSize,
orientation: 'horizontal',
startScrollOffset: 'calc(20% - 5px)'
});
// Unscrolled, all timelines should read a current time of unresolved, since
// the current offset (0) will be less than the startScrollOffset.
assert_equals(
lengthScrollTimeline.currentTime, null,
'Unscrolled length-based timeline');
assert_equals(
percentageScrollTimeline.currentTime, null,
'Unscrolled percentage-based timeline');
assert_equals(
calcScrollTimeline.currentTime, null, 'Unscrolled calc-based timeline');
// With direction rtl offsets are inverted, such that scrollLeft ==
// scrollerSize is the 'zero' point for currentTime. However the
// startScrollOffset is an absolute distance along the offset, so doesn't
// need adjusting.
// Check the length-based ScrollTimeline.
scroller.scrollLeft = scrollerSize;
assert_equals(
lengthScrollTimeline.currentTime, null,
'Length-based timeline before the startScrollOffset point');
scroller.scrollLeft = scrollerSize - 20;
assert_equals(
lengthScrollTimeline.currentTime, 0,
'Length-based timeline at the startScrollOffset point');
scroller.scrollLeft = scrollerSize - 50;
assert_equals(
lengthScrollTimeline.currentTime,
calculateCurrentTime(50, 20, scrollerSize, scrollerSize),
'Length-based timeline after the startScrollOffset point');
// Check the percentage-based ScrollTimeline.
scroller.scrollLeft = scrollerSize - (0.19 * scrollerSize);
assert_equals(
percentageScrollTimeline.currentTime, null,
'Percentage-based timeline before the startScrollOffset point');
scroller.scrollLeft = scrollerSize - (0.20 * scrollerSize);
assert_equals(
percentageScrollTimeline.currentTime, 0,
'Percentage-based timeline at the startScrollOffset point');
scroller.scrollLeft = scrollerSize - (0.4 * scrollerSize);
assert_equals(
percentageScrollTimeline.currentTime,
calculateCurrentTime(
0.4 * scrollerSize, 0.2 * scrollerSize, scrollerSize, scrollerSize),
'Percentage-based timeline after the startScrollOffset point');
// Check the calc-based ScrollTimeline.
scroller.scrollLeft = scrollerSize - (0.2 * scrollerSize - 10);
assert_equals(
calcScrollTimeline.currentTime, null,
'Calc-based timeline before the startScrollOffset point');
scroller.scrollLeft = scrollerSize - (0.2 * scrollerSize - 5);
assert_equals(
calcScrollTimeline.currentTime, 0,
'Calc-based timeline at the startScrollOffset point');
scroller.scrollLeft = scrollerSize - (0.2 * scrollerSize);
assert_equals(
calcScrollTimeline.currentTime,
calculateCurrentTime(
0.2 * scrollerSize, 0.2 * scrollerSize - 5, scrollerSize,
scrollerSize),
'Calc-based timeline after the startScrollOffset point');
}, 'currentTime handles startScrollOffset with direction: rtl correctly');
test(function() {
const scrollerOverrides = new Map([['direction', 'rtl']]);
const scroller = setupScrollTimelineTest(scrollerOverrides);
// Set the timeRange such that currentTime maps directly to the value
// scrolled. The contents and scroller are square, so it suffices to compute
// one edge and use it for all the timelines.
const scrollerSize = scroller.scrollHeight - scroller.clientHeight;
const lengthScrollTimeline = new ScrollTimeline({
scrollSource: scroller,
timeRange: scrollerSize,
orientation: 'horizontal',
endScrollOffset: (scrollerSize - 20) + 'px'
});
const percentageScrollTimeline = new ScrollTimeline({
scrollSource: scroller,
timeRange: scrollerSize,
orientation: 'horizontal',
endScrollOffset: '80%'
});
const calcScrollTimeline = new ScrollTimeline({
scrollSource: scroller,
timeRange: scrollerSize,
orientation: 'horizontal',
endScrollOffset: 'calc(80% + 5px)'
});
// With direction rtl offsets are inverted, such that scrollLeft ==
// scrollerSize is the 'zero' point for currentTime. However the
// endScrollOffset is an absolute distance along the offset, so doesn't need
// adjusting.
// Check the length-based ScrollTimeline.
scroller.scrollLeft = 0;
assert_equals(
lengthScrollTimeline.currentTime, null,
'Length-based timeline after the endScrollOffset point');
scroller.scrollLeft = 20;
assert_equals(
lengthScrollTimeline.currentTime,
calculateCurrentTime(
scrollerSize - 20, 0, scrollerSize - 20, scrollerSize),
'Length-based timeline at the endScrollOffset point');
scroller.scrollLeft = 50;
assert_equals(
lengthScrollTimeline.currentTime,
calculateCurrentTime(
scrollerSize - 50, 0, scrollerSize - 20, scrollerSize),
'Length-based timeline before the endScrollOffset point');
// Check the percentage-based ScrollTimeline.
scroller.scrollLeft = 0.19 * scrollerSize;
assert_equals(
percentageScrollTimeline.currentTime, null,
'Percentage-based timeline after the endScrollOffset point');
scroller.scrollLeft = 0.20 * scrollerSize;
assert_equals(
percentageScrollTimeline.currentTime,
calculateCurrentTime(
0.8 * scrollerSize, 0, 0.8 * scrollerSize, scrollerSize),
'Percentage-based timeline at the endScrollOffset point');
scroller.scrollLeft = 0.4 * scrollerSize;
assert_equals(
percentageScrollTimeline.currentTime,
calculateCurrentTime(
0.6 * scrollerSize, 0, 0.8 * scrollerSize, scrollerSize),
'Percentage-based timeline before the endScrollOffset point');
// Check the calc-based ScrollTimeline. 80% + 5px
scroller.scrollLeft = 0.2 * scrollerSize - 10;
assert_equals(
calcScrollTimeline.currentTime, null,
'Calc-based timeline after the endScrollOffset point');
scroller.scrollLeft = 0.2 * scrollerSize - 5;
assert_equals(
calcScrollTimeline.currentTime,
calculateCurrentTime(
0.8 * scrollerSize + 5, 0, 0.8 * scrollerSize + 5, scrollerSize),
'Calc-based timeline at the endScrollOffset point');
scroller.scrollLeft = 0.2 * scrollerSize;
assert_equals(
calcScrollTimeline.currentTime,
calculateCurrentTime(
0.8 * scrollerSize, 0, 0.8 * scrollerSize + 5, scrollerSize),
'Calc-based timeline before the endScrollOffset point');
}, 'currentTime handles endScrollOffset with direction: rtl correctly');
</script>
