Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-12-04 11:26:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1774246 [wpt PR 34433] - Fix at-scroll-timeline-responsiveness-from-endpoint.html, a=testonly

Browse Source 
Automatic update from web-platform-tests
Fix at-scroll-timeline-responsiveness-from-endpoint.html

Change-Id: I4a0d127e0b384834dba2e3a4950ee1c29caf80b7

Bug: 1336290
Change-Id: I4a0d127e0b384834dba2e3a4950ee1c29caf80b7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3705324
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1014908}

--

wpt-commits: 9c89c597c36c7efaf8e9fb8eac907758ee7e9ab1
wpt-pr: 34433
This commit is contained in:
Kevin Ellis 2022-06-21 09:57:00 +00:00 committed by moz-wptsync-bot
parent 90e334c1f9
commit 9e13f8f176
1 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-responsiveness-from-endpoint.html
View File

@ -6,6 +6,8 @@
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/css-animations/support/testcommon.js"></script>
<script src="/scroll-animations/scroll-timelines/testcommon.js"></script>
<style>
@keyframes anim {
from { width: 100px; }
@ -15,7 +17,6 @@
@scroll-timeline timeline {
source: auto;
orientation: auto;
scroll-offsets: none;
}
.fill-vh {
@ -28,21 +29,32 @@
<script>
'use strict';
test(t => {
promise_test(async 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;
scroller.scrollTop = 0;
await waitForNextFrame();
div.style.animation = 'anim 100s linear timeline';
assert_equals(getComputedStyle(div).width, '100px');
const anim = div.getAnimations()[0];
await anim.ready;
assert_percents_equal(anim.timeline.currentTime, 0,
'Timeline time when animation is ready');
assert_equals(getComputedStyle(div).width, '100px',
'Width at animation start');
await waitForNextFrame();
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
scroller.scrollTop = maxScroll;
assert_equals(getComputedStyle(div).width, '200px');
await waitForNextFrame();
assert_equals(getComputedStyle(div).width, '200px',
'Width at scroll limit');
document.scrollingElement.scrollTop = 0;
assert_equals(getComputedStyle(div).width, '100px');
await waitForNextFrame();
assert_equals(getComputedStyle(div).width, '100px',
'Width after reset to scroll top');
}, 'Test that the scroll animation is still responsive after moving from 100%');
</script>