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

Bug 1709721 [wpt PR 28851] - Let inherited_time be zero for new CSS animations with no timeline, a=testonly 

Automatic update from web-platform-tests
Let inherited_time be zero for new CSS animations with no timeline

There is currently an inconsistency between CSS animations and JS
animations: creating a JS animation with a null-timeline causes
current time to be held at zero, but the same does not happen in
the equivalent case for CSS animations. Instead, new CSS animations
without a timeline effectively have *no* current time.

This inconsistency is possible because of how we use InertEffect
in the first frame to "simulate" what the real Animation would have
done, and in this case that simulation is wrong.

Bug: 1074052
Change-Id: I3ef7de3eb3ea7812cd45d7dca41db59d42310a15
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2874659
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/master@{#880042}

--

wpt-commits: debbb947add04239ac11e1bf9ee870082c8b952d
wpt-pr: 28851
This commit is contained in:
Anders Hartvoll Ruud 2021-05-08 10:02:41 +00:00 коммит произвёл moz-wptsync-bot
Родитель be5b118e5b
Коммит 3c4362134a
2 изменённых файлов: 24 добавлений и 23 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

29
testing/web-platform/tests/scroll-animations/css/animation-timeline-none.html
Просмотреть файл

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<link rel="help" src="https://drafts.csswg.org/css-animations-2/#typedef-timeline-name"> <link rel="help" src="https://drafts.csswg.org/css-animations-2/#animation-timeline">
<link rel="help" src="https://drafts.csswg.org/web-animations/#playing-an-animation-section">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script> <script src="/web-animations/testcommon.js"></script>
@ -9,11 +10,10 @@
to { width: 200px; } to { width: 200px; }
} }
.test, #ref { .test {
width: 0px; width: 0px;
animation-name: expand; animation-name: expand;
animation-duration: 10s; animation-duration: 1s;
animation-play-state: paused;
} }
#element_timeline_none { #element_timeline_none {
@ -26,21 +26,16 @@
</style> </style>
<div class=test id=element_timeline_none></div> <div class=test id=element_timeline_none></div>
<div class=test id=element_unknown_timeline></div> <div class=test id=element_unknown_timeline></div>
<div id=ref></div>
<script> <script>
promise_test(async (t) => { promise_test(async (t) => {
assert_equals(getComputedStyle(element_timeline_none).width, '0px'); assert_equals(getComputedStyle(element_timeline_none).width, '100px');
assert_equals(getComputedStyle(ref).width, '100px'); await waitForAnimationFrames(3);
await waitForNextFrame(); assert_equals(getComputedStyle(element_timeline_none).width, '100px');
assert_equals(getComputedStyle(element_timeline_none).width, '0px'); }, 'Animation with animation-timeline:none holds current time at zero');
assert_equals(getComputedStyle(ref).width, '100px');
}, 'Animation with animation-timeline:none has no effect value');
promise_test(async (t) => { promise_test(async (t) => {
assert_equals(getComputedStyle(element_unknown_timeline).width, '0px'); assert_equals(getComputedStyle(element_unknown_timeline).width, '100px');
assert_equals(getComputedStyle(ref).width, '100px'); await waitForAnimationFrames(3);
await waitForNextFrame(); assert_equals(getComputedStyle(element_unknown_timeline).width, '100px');
assert_equals(getComputedStyle(element_unknown_timeline).width, '0px'); }, 'Animation with unknown timeline name holds current time at zero');
assert_equals(getComputedStyle(ref).width, '100px');
}, 'Animation with unknown timeline name has no effect value');
</script> </script>

18
testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-dynamic.tentative.html
Просмотреть файл

@ -197,7 +197,8 @@
let element = insertElement(); let element = insertElement();
insertSheet('#element { animation-timeline: timeline; }'); insertSheet('#element { animation-timeline: timeline; }');
await assert_width(element, '0px'); // Unknown animation-timeline, current time held at zero.
await assert_width(element, '100px');
insertScrollTimeline({source: 'selector(#scroller1)'}); insertScrollTimeline({source: 'selector(#scroller1)'});
await assert_width(element, '120px'); await assert_width(element, '120px');
@ -210,7 +211,8 @@
let element = insertElement(); let element = insertElement();
insertSheet('#element { animation-timeline: timeline; }'); insertSheet('#element { animation-timeline: timeline; }');
await assert_width(element, '0px'); // Unknown animation-timeline, current time held at zero.
await assert_width(element, '100px');
insertScrollTimeline({timeRange: '1e10s'}); insertScrollTimeline({timeRange: '1e10s'});
await assert_width(element, '120px'); await assert_width(element, '120px');
@ -223,7 +225,8 @@
let element = insertElement(); let element = insertElement();
insertSheet('#element { animation-timeline: timeline; }'); insertSheet('#element { animation-timeline: timeline; }');
await assert_width(element, '0px'); // Unknown animation-timeline, current time held at zero.
await assert_width(element, '100px');
insertScrollTimeline({start: '0px'}); insertScrollTimeline({start: '0px'});
await assert_width(element, '120px'); await assert_width(element, '120px');
@ -236,7 +239,8 @@
let element = insertElement(); let element = insertElement();
insertSheet('#element { animation-timeline: timeline; }'); insertSheet('#element { animation-timeline: timeline; }');
await assert_width(element, '0px'); // Unknown animation-timeline, current time held at zero.
await assert_width(element, '100px');
insertScrollTimeline({end: '100px'}); insertScrollTimeline({end: '100px'});
await assert_width(element, '120px'); await assert_width(element, '120px');
@ -250,7 +254,8 @@
let reverse = insertSheet('#element { animation-direction: reverse; }'); let reverse = insertSheet('#element { animation-direction: reverse; }');
insertSheet('#element { animation-timeline: timeline; }'); insertSheet('#element { animation-timeline: timeline; }');
await assert_width(element, '0px'); // Unknown animation-timeline, current time held at zero.
await assert_width(element, '200px');
// Note: #scroller1 is at 20%. // Note: #scroller1 is at 20%.
insertScrollTimeline({source: 'selector(#scroller1)'}); insertScrollTimeline({source: 'selector(#scroller1)'});
@ -268,7 +273,8 @@
let element = insertElement(); let element = insertElement();
insertSheet('#element { animation-timeline: timeline; }'); insertSheet('#element { animation-timeline: timeline; }');
await assert_width(element, '0px'); // Unknown animation-timeline, current time held at zero.
await assert_width(element, '100px');
// Note: #scroller1 is at 20%. // Note: #scroller1 is at 20%.
insertScrollTimeline({source: 'selector(#scroller1)'}); insertScrollTimeline({source: 'selector(#scroller1)'});