Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'

This commit is contained in:
WPT Sync Bot 2021-09-07 11:16:33 +00:00 committed by cybai
parent 35e95f55a1
commit 58e8ee674b
9438 changed files with 266112 additions and 106976 deletions

View file

@ -1,5 +1,6 @@
<!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/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
@ -9,11 +10,10 @@
to { width: 200px; }
}
.test, #ref {
.test {
width: 0px;
animation-name: expand;
animation-duration: 10s;
animation-play-state: paused;
animation-duration: 1s;
}
#element_timeline_none {
@ -26,21 +26,16 @@
</style>
<div class=test id=element_timeline_none></div>
<div class=test id=element_unknown_timeline></div>
<div id=ref></div>
<script>
promise_test(async (t) => {
assert_equals(getComputedStyle(element_timeline_none).width, '0px');
assert_equals(getComputedStyle(ref).width, '100px');
await waitForNextFrame();
assert_equals(getComputedStyle(element_timeline_none).width, '0px');
assert_equals(getComputedStyle(ref).width, '100px');
}, 'Animation with animation-timeline:none has no effect value');
assert_equals(getComputedStyle(element_timeline_none).width, '100px');
await waitForAnimationFrames(3);
assert_equals(getComputedStyle(element_timeline_none).width, '100px');
}, 'Animation with animation-timeline:none holds current time at zero');
promise_test(async (t) => {
assert_equals(getComputedStyle(element_unknown_timeline).width, '0px');
assert_equals(getComputedStyle(ref).width, '100px');
await waitForNextFrame();
assert_equals(getComputedStyle(element_unknown_timeline).width, '0px');
assert_equals(getComputedStyle(ref).width, '100px');
}, 'Animation with unknown timeline name has no effect value');
assert_equals(getComputedStyle(element_unknown_timeline).width, '100px');
await waitForAnimationFrames(3);
assert_equals(getComputedStyle(element_unknown_timeline).width, '100px');
}, 'Animation with unknown timeline name holds current time at zero');
</script>

View file

@ -197,7 +197,8 @@
let element = insertElement();
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)'});
await assert_width(element, '120px');
@ -210,7 +211,8 @@
let element = insertElement();
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'});
await assert_width(element, '120px');
@ -223,7 +225,8 @@
let element = insertElement();
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'});
await assert_width(element, '120px');
@ -236,7 +239,8 @@
let element = insertElement();
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'});
await assert_width(element, '120px');
@ -250,7 +254,8 @@
let reverse = insertSheet('#element { animation-direction: reverse; }');
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%.
insertScrollTimeline({source: 'selector(#scroller1)'});
@ -268,7 +273,8 @@
let element = insertElement();
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%.
insertScrollTimeline({source: 'selector(#scroller1)'});

View file

@ -103,8 +103,7 @@
let timeline4 = new ScrollTimeline({
scrollSource: scroller4,
timeRange: 1e13,
startScrollOffset: CSS.px(0),
endScrollOffset: CSS.px(100)
scrollOffsets: [CSS.px(0), CSS.px(100)]
});
element.getAnimations()[0].timeline = timeline4;

View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<title>CSS Animation using progress based timeline</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; }
}
@scroll-timeline top_timeline {
source: selector(#scroller1);
start: 0px;
end: 100px;
}
#element {
animation-name: top;
animation-duration: 10s;
animation-timing-function: linear;
animation-timeline: top_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>
<div id=element></div>
<script>
// Force layout of scrollers.
scroller1.offsetTop;
scroller1.scrollTop = 20;
promise_test(async (t) => {
await waitForNextFrame();
assert_equals(getComputedStyle(element).top, '120px');
}, 'progress based animation timeline works');
</script>