Skip to content

GitLab

T
tangled
Commit 1dc6175a authored by Anders Hartvoll Ruud's avatar Anders Hartvoll Ruud Committed by Commit Bot
Browse files
Options

[scroll-animations] Add WPT for animation-timeline with multiple values 

Fixed: 1114808
Change-Id: I75c1afb4158703af75fe53d4b59155730e289e0b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2513601Reviewed-by: default avatarKevin Ellis <kevers@chromium.org>
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/master@{#823546}
parent eec7bff8
Hide whitespace changes
Inline Side-by-side
Showing with 95 additions and 0 deletions
third_party/blink/web_tests/external/wpt/scroll-animations/css/animation-timeline-multiple.html 0 → 100644
View file @ 1dc6175a
<!DOCTYPE html>
<title>animation-timeline with multiple timelines</title>
<link rel="help" src="https://drafts.csswg.org/css-animations-2/#animation-timeline">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<style>
#scrollers {
overflow: hidden;
height: 0px;
}
#scrollers > div {
overflow: scroll;
width: 100px;
height: 100px;
}
#scrollers > div > div {
height: 200px;
}
@keyframes top {
from { top: 100px; }
to { top: 200px; }
}
@keyframes bottom {
from { bottom: 100px; }
to { bottom: 200px; }
}
@keyframes left {
from { left: 100px; }
to { left: 200px; }
}
@keyframes right {
from { right: 100px; }
to { right: 200px; }
}
@scroll-timeline top_timeline {
source: selector(#scroller1);
time-range: 10s;
start: 0px;
end: 100px;
}
@scroll-timeline bottom_timeline {
source: selector(#scroller1);
time-range: 10s;
start: 0px;
end: 80px;
}
@scroll-timeline left_timeline {
source: selector(#scroller2);
time-range: 10s;
start: 0px;
end: 100px;
}
@scroll-timeline right_timeline {
source: selector(#scroller2);
time-range: 10s;
start: 20px;
end: 60px;
}
#element {
animation-name: top, bottom, left, right;
animation-duration: 10s;
animation-timing-function: linear;
animation-timeline: top_timeline, bottom_timeline, left_timeline, right_timeline;
}
/* Ensure stable expectations if feature is not supported */
@supports not (animation-timeline:foo) {
#element { animation-play-state: paused; }
}
</style>
<div id=scrollers>
<div id=scroller1><div></div></div>
<div id=scroller2><div></div></div>
</div>
<div id=element></div>
<script>
// Force layout of scrollers.
scroller1.offsetTop;
scroller2.offsetTop;
scroller1.scrollTop = 20;
scroller2.scrollTop = 40;
promise_test(async (t) => {
await waitForNextFrame();
assert_equals(getComputedStyle(element).top, '120px');
assert_equals(getComputedStyle(element).bottom, '125px');
assert_equals(getComputedStyle(element).left, '140px');
assert_equals(getComputedStyle(element).right, '150px');
}, 'animation-timeline works with multiple timelines');
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment