mirror of
https://github.com/servo/servo.git
synced 2025-08-11 16:35:33 +01:00
Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'
This commit is contained in:
parent
35e95f55a1
commit
58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
|
@ -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>
|
||||
|
|
|
@ -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)'});
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue