056c388f85
Automatic update from web-platform-tests Initial implementation of progress based ScrollTimelines This work is the first step in implementing upcoming spec change in: https://github.com/w3c/csswg-drafts/issues/4862 Converted AnimationTimeline::currentTime() to CSSNumberish Added AnimationTimeline::duration Bug: 1140602 Change-Id: I5c9b8b7130b91faae5f172493ba5f55d77b4bdd6 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2476900 Commit-Queue: Jordan Taylor <jortaylo@microsoft.com> Reviewed-by: Robert Flack <flackr@chromium.org> Cr-Commit-Position: refs/heads/master@{#826533} -- wpt-commits: d494b8ec23759c6bfb747bee1ff3a1b3d67f5177 wpt-pr: 26142
65 lines
2.0 KiB
JavaScript
65 lines
2.0 KiB
JavaScript
function createScroller(test) {
|
|
var scroller = createDiv(test);
|
|
scroller.innerHTML = "<div class='contents'></div>";
|
|
scroller.classList.add('scroller');
|
|
// Trigger layout run.
|
|
scroller.scrollTop;
|
|
return scroller;
|
|
}
|
|
|
|
function createScrollerWithStartAndEnd(test, orientationClass = 'vertical') {
|
|
var scroller = createDiv(test);
|
|
scroller.innerHTML =
|
|
`<div class='contents'>
|
|
<div id='start'></div>
|
|
<div id='end'></div>
|
|
</div>`;
|
|
scroller.classList.add('scroller');
|
|
scroller.classList.add(orientationClass);
|
|
|
|
return scroller;
|
|
}
|
|
|
|
function createScrollTimeline(test, options) {
|
|
options = options || {
|
|
scrollSource: createScroller(test),
|
|
timeRange: 1000
|
|
}
|
|
return new ScrollTimeline(options);
|
|
}
|
|
|
|
function createScrollTimelineWithOffsets(test, startOffset, endOffset) {
|
|
return createScrollTimeline(test, {
|
|
scrollSource: createScroller(test),
|
|
orientation: "vertical",
|
|
startScrollOffset: startOffset,
|
|
endScrollOffset: endOffset,
|
|
timeRange: 1000
|
|
});
|
|
}
|
|
|
|
function createScrollLinkedAnimation(test, timeline) {
|
|
if (timeline === undefined)
|
|
timeline = createScrollTimeline(test);
|
|
const DURATION = 1000; // ms
|
|
const KEYFRAMES = { opacity: [0, 1] };
|
|
return new Animation(
|
|
new KeyframeEffect(createDiv(test), KEYFRAMES, DURATION), timeline);
|
|
}
|
|
|
|
function assert_approx_equals_or_null(actual, expected, tolerance, name){
|
|
if (actual === null || expected === null){
|
|
assert_equals(actual, expected, name);
|
|
}
|
|
else {
|
|
assert_approx_equals(actual, expected, tolerance, name);
|
|
}
|
|
}
|
|
|
|
// actual should be a CSSUnitValue and expected should be a double value 0-100
|
|
function assert_percent_css_unit_value_approx_equals(actual, expected, tolerance, name){
|
|
assert_true(actual instanceof CSSUnitValue, "'actual' must be of type CSSUnitValue");
|
|
assert_equals(typeof expected, "number", "'expected' should be a number (0-100)");
|
|
assert_equals(actual.unit, "percent", "'actual' unit type must be 'percent'");
|
|
assert_approx_equals(actual.value, expected, tolerance, name);
|
|
} |