mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1746101 - Avoid making animations get removed after moving from 100% endpoint. r=hiro 

Let's use the infinite iteration count and the alternative play direction
for now, so the scroll-linked animations will never be removed (and its play
state is always running) even if it reaches to the max scroll position.

Note:
1. We don't resolve finished promise at 100% now because it's unclear
   whether we should resolve it for scroll animations or not.
2. This is not a perfect solution. We are planning to use the specified
   timing in the future, so users can do more things on them, after the
   spec defines them well.

Differential Revision: https://phabricator.services.mozilla.com/D132751
This commit is contained in:
Boris Chiou 2021-12-15 09:54:42 +00:00
Родитель 66a0be0cd7
Коммит 318c1fdcc9
2 изменённых файлов: 52 добавлений и 2 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

5
dom/animation/ScrollTimeline.cpp
Просмотреть файл

@ -56,8 +56,9 @@ ScrollTimeline::ScrollTimeline(Document* aDocument, const Scroller& aScroller)
// Use default values except for |mDuration| and |mFill|.
// Use a fixed duration defined in SCROLL_TIMELINE_DURATIONMILLISEC, and use
// FillMode::Both to make sure the animation is in effect at 100%.
sTiming = TimingParams(SCROLL_TIMELINE_DURATION_MILLISEC, 0.0, 1.0,
PlaybackDirection::Normal, FillMode::Both);
sTiming = TimingParams(SCROLL_TIMELINE_DURATION_MILLISEC, 0.0,
std::numeric_limits<float>::infinity(),
PlaybackDirection::Alternate, FillMode::Both);
RegisterWithScrollSource();
}

49
testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-responsiveness-from-endpoint.html Normal file
Просмотреть файл

@ -0,0 +1,49 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>The default scroll-timeline at rule with animation moving from end point</title>
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-at-rule">
<link rel="help" href="https://drafts.csswg.org/web-animations/#update-an-animations-finished-state">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/css-animations/support/testcommon.js"></script>
<style>
@keyframes anim {
from { width: 100px; }
to { width: 200px; }
}
@scroll-timeline timeline {
source: auto;
orientation: auto;
scroll-offsets: none;
}
.fill-vh {
width: 100px;
height: 100vh;
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
test(t => {
const div = addDiv(t, { style: 'width: 50px; height: 100px;' });
const filling = addDiv(t, { class: 'fill-vh' });
const scroller = document.scrollingElement;
getComputedStyle(document.scrollingElement).height;
div.style.animation = 'anim 100s linear timeline';
assert_equals(getComputedStyle(div).width, '100px');
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
scroller.scrollTop = maxScroll;
assert_equals(getComputedStyle(div).width, '200px');
document.scrollingElement.scrollTop = 0;
assert_equals(getComputedStyle(div).width, '100px');
}, 'Test that the scroll animation is still responsive after moving from 100%');
</script>
</body>