Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-27 08:08:19 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 9ca57e052ba1b19fa3dd46c6aa656e8d529469a8

Browse source
This commit is contained in:
WPT Sync Bot 2020-09-12 08:20:19 +00:00
parent 68cb8f3d59
commit 75d6484415
1377 changed files with 31062 additions and 16983 deletions
Download patch file Download diff file Expand all files Collapse all files

53
tests/wpt/web-platform-tests/scroll-animations/css/animation-shorthand.html Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-shorthand">
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<script src="/css/support/shorthand-testcommon.js"></script>
<div id="target"></div>
<script>
test_valid_value('animation',
'1s linear 1s 2 reverse forwards paused anim');
test_valid_value('animation',
'1s linear 1s 2 reverse forwards paused anim timeline');
test_valid_value('animation',
'1s linear 1s 2 reverse forwards paused anim none');
test_valid_value('animation',
'1s linear 1s 2 reverse forwards paused anim "initial"');
test_valid_value('animation',
'1s linear 1s 2 reverse forwards paused anim auto',
'1s linear 1s 2 reverse forwards paused anim');
test_invalid_value('animation',
'1s linear 1s 2 reverse forwards paused anim initial');
test_invalid_value('animation',
'1s linear 1s 2 reverse forwards paused anim 2000');
test_computed_value('animation',
'1s linear 1s 2 reverse forwards paused anim');
test_computed_value('animation',
'1s linear 1s 2 reverse forwards paused anim timeline');
test_computed_value('animation',
'1s linear 1s 2 reverse forwards paused anim none');
test_computed_value('animation',
'1s linear 1s 2 reverse forwards paused anim auto',
'1s linear 1s 2 reverse forwards paused anim');
test_shorthand_value('animation',
`1s linear 1s 2 reverse forwards paused anim1 timeline,
1s linear 1s 2 reverse forwards paused anim2 none,
1s linear 1s 2 reverse forwards paused anim3 auto`,
{
'animation-duration': '1s, 1s, 1s',
'animation-timing-function': 'linear, linear, linear',
'animation-delay': '1s, 1s, 1s',
'animation-iteration-count': '2, 2, 2',
'animation-direction': 'reverse, reverse, reverse',
'animation-fill-mode': 'forwards, forwards, forwards',
'animation-play-state': 'paused, paused, paused',
'animation-name': 'anim1, anim2, anim3',
'animation-timeline': 'timeline, none, auto'
});
</script>

5
tests/wpt/web-platform-tests/scroll-animations/css/animation-timeline-in-keyframe.html
View file

@ -7,11 +7,10 @@
<style>
@keyframes test {
from { width: 100px; animation-timeline: foo; }
to { width: 100px: animation-timeline: foo; }
to { width: 100px; animation-timeline: foo; }
}
#target {
width: 50px;
animation-timeline: bar;
animation-name: test;
animation-duration: 1s;
animation-play-state: paused;
@ -23,6 +22,6 @@ test(() => {
let style = getComputedStyle(document.getElementById('target'));
// Checking 'width' verifies that the animation is applied at all.
assert_equals(style.width, '100px');
assert_equals(style.animationTimeline, 'bar');
assert_equals(style.animationTimeline, 'auto');
}, 'The animation-timeline property may not be used in keyframes');
</script>

46
tests/wpt/web-platform-tests/scroll-animations/css/animation-timeline-none.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<link rel="help" src="https://drafts.csswg.org/css-animations-2/#typedef-timeline-name">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<style>
@keyframes expand {
from { width: 100px; }
to { width: 200px; }
}
.test, #ref {
width: 0px;
animation-name: expand;
animation-duration: 10s;
animation-play-state: paused;
}
#element_timeline_none {
animation-timeline: none;
}
#element_unknown_timeline {
animation-timeline: unknown_timeline;
}
</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');
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');
</script>

241
tests/wpt/web-platform-tests/scroll-animations/css/at-scroll-timeline-element-offsets.html Normal file
View file

@ -0,0 +1,241 @@
<!DOCTYPE html>
<title>@scroll-timeline: Element-based offsets</title>
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-at-rule">
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#element-based-offset-section">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<style>
#scroller {
overflow: scroll;
width: 100px;
height: 100px;
}
.filler {
height: 150px;
background-color: darkgray;
}
.offset {
height: 50px;
background-color: green;
}
@keyframes expand {
from { width: 100px; }
to { width: 200px; }
}
@scroll-timeline timeline_start_start {
source: selector(#scroller);
time-range: 10s;
start: selector(#offset1);
end: selector(#offset2);
}
@scroll-timeline timeline_end_end {
source: selector(#scroller);
time-range: 10s;
start: selector(#offset1) end;
end: selector(#offset2) end;
}
@scroll-timeline timeline_end_start {
source: selector(#scroller);
time-range: 10s;
start: selector(#offset1) end;
end: selector(#offset2) start;
}
@scroll-timeline timeline_end_1_end {
source: selector(#scroller);
time-range: 10s;
start: selector(#offset1) end 1;
end: selector(#offset2) end;
}
@scroll-timeline timeline_end_start_05 {
source: selector(#scroller);
time-range: 10s;
start: selector(#offset1) end;
end: selector(#offset2) 0.5;
}
@scroll-timeline timeline_start_400px {
source: selector(#scroller);
time-range: 10s;
start: selector(#offset1);
end: 400px;
}
@scroll-timeline timeline_50px_end {
source: selector(#scroller);
time-range: 10s;
start: 50px;
end: selector(#offset2) end;
}
@scroll-timeline timeline_outside {
source: selector(#scroller);
time-range: 10s;
start: selector(#offset_outside);
end: auto;
}
@scroll-timeline timeline_display_none {
source: selector(#scroller);
time-range: 10s;
start: selector(#offset_display_none);
end: auto;
}
#container > div {
width: 0px;
animation-name: expand;
animation-duration: 10s;
animation-timing-function: linear;
}
/* Ensure stable expectations if feature is not supported */
@supports not (animation-timeline:foo) {
#container > div { animation-play-state: paused; }
}
#element_start_start { animation-timeline: timeline_start_start; }
#element_end_end { animation-timeline: timeline_end_end; }
#element_end_start { animation-timeline: timeline_end_start; }
#element_end_1_end { animation-timeline: timeline_end_1_end; }
#element_end_start_05 { animation-timeline: timeline_end_start_05; }
#element_start_400px { animation-timeline: timeline_start_400px; }
#element_50px_end { animation-timeline: timeline_50px_end; }
#element_outside { animation-timeline: timeline_outside; }
#element_display_none { animation-timeline: timeline_display_none; }
</style>
<div id=scroller>
<div id=contents>
<div class=filler></div>
<div class=offset id=offset1></div>
<div class=filler></div>
<div class=offset id=offset2></div>
<div class=filler></div>
</div>
</div>
<div id=offset_outside></div>
<div id=offset_display_none style="display:none"></div>
<div id=container>
<div id=element_start_start></div>
<div id=element_end_end></div>
<div id=element_end_start></div>
<div id=element_end_1_end></div>
<div id=element_end_start_05></div>
<div id=element_start_400px></div>
<div id=element_50px_end></div>
<div id=element_outside></div>
<div id=element_display_none></div>
</div>
<script>
// The contents of the scroller looks approximately like this:
//
// +-------+
// | |
// | 150px | filler
// | |
// +-------+
// +-------+
// | 50px | #offset1
// +-------+
// +-------+
// | |
// | 150px | filler
// | |
// +-------+
// +-------+
// | 50px | #offset2
// +-------+
// +-------+
// | |
// | 150px | filler
// | |
// +-------+
//
// The height of the scrollport is 100px.
// Scrolls top to 'offset', waits for a frame, then call the provided
// assertions function.
function test_scroll(element, offset, assertions, description) {
promise_test(async (t) => {
scroller.scrollTop = offset;
await waitForNextFrame();
assertions();
}, `${description} [${element.id}]`);
}
// Tests that the computed value of 'width' on element is the expected value
// after scrolling top to the specifed offset.
function test_width_at_scroll_top(element, offset, expected) {
test_scroll(element, offset, () => {
assert_equals(getComputedStyle(element).width, expected);
}, `Scroll at offset ${offset} updates animation correctly`);
}
// [200, 400]
test_width_at_scroll_top(element_start_start, 0, '0px');
test_width_at_scroll_top(element_start_start, 199, '0px');
test_width_at_scroll_top(element_start_start, 200, '100px');
test_width_at_scroll_top(element_start_start, 300, '150px');
test_width_at_scroll_top(element_start_start, 398, '199px');
test_width_at_scroll_top(element_start_start, 400, '0px');
// [50, 250]
test_width_at_scroll_top(element_end_end, 0, '0px');
test_width_at_scroll_top(element_end_end, 49, '0px');
test_width_at_scroll_top(element_end_end, 50, '100px');
test_width_at_scroll_top(element_end_end, 150, '150px');
test_width_at_scroll_top(element_end_end, 248, '199px');
test_width_at_scroll_top(element_end_end, 250, '0px');
// [50, 400]
test_width_at_scroll_top(element_end_start, 0, '0px');
test_width_at_scroll_top(element_end_start, 49, '0px');
test_width_at_scroll_top(element_end_start, 50, '100px');
test_width_at_scroll_top(element_end_start, 225, '150px');
test_width_at_scroll_top(element_end_start, 393, '198px');
test_width_at_scroll_top(element_end_start, 400, '0px');
// [100, 250]
test_width_at_scroll_top(element_end_1_end, 0, '0px');
test_width_at_scroll_top(element_end_1_end, 99, '0px');
test_width_at_scroll_top(element_end_1_end, 100, '100px');
test_width_at_scroll_top(element_end_1_end, 175, '150px');
test_width_at_scroll_top(element_end_1_end, 247, '198px');
test_width_at_scroll_top(element_end_1_end, 250, '0px');
// [50, 375]
test_width_at_scroll_top(element_end_start_05, 0, '0px');
test_width_at_scroll_top(element_end_start_05, 49, '0px');
test_width_at_scroll_top(element_end_start_05, 50, '100px');
test_width_at_scroll_top(element_end_start_05, 206, '148px');
test_width_at_scroll_top(element_end_start_05, 362, '196px');
test_width_at_scroll_top(element_end_start_05, 375, '0px');
// [200, 300]
test_width_at_scroll_top(element_start_400px, 0, '0px');
test_width_at_scroll_top(element_start_400px, 199, '0px');
test_width_at_scroll_top(element_start_400px, 200, '100px');
test_width_at_scroll_top(element_start_400px, 300, '150px');
test_width_at_scroll_top(element_start_400px, 398, '199px');
test_width_at_scroll_top(element_start_400px, 400, '0px');
// [50, 250]
test_width_at_scroll_top(element_50px_end, 0, '0px');
test_width_at_scroll_top(element_50px_end, 49, '0px');
test_width_at_scroll_top(element_50px_end, 50, '100px');
test_width_at_scroll_top(element_50px_end, 150, '150px');
test_width_at_scroll_top(element_50px_end, 248, '199px');
test_width_at_scroll_top(element_50px_end, 250, '0px');
// Offset not a decendant of scroller (=> no effect value)
test_width_at_scroll_top(element_outside, 0, '0px');
test_width_at_scroll_top(element_outside, 100, '0px');
test_width_at_scroll_top(element_outside, 200, '0px');
test_width_at_scroll_top(element_outside, 300, '0px');
test_width_at_scroll_top(element_outside, 400, '0px');
test_width_at_scroll_top(element_outside, 450, '0px');
// Target of element-based offset has no layout box (=> no effect value)
test_width_at_scroll_top(element_display_none, 0, '0px');
test_width_at_scroll_top(element_display_none, 100, '0px');
test_width_at_scroll_top(element_display_none, 200, '0px');
test_width_at_scroll_top(element_display_none, 300, '0px');
test_width_at_scroll_top(element_display_none, 400, '0px');
test_width_at_scroll_top(element_display_none, 450, '0px');
</script>

4
tests/wpt/web-platform-tests/scroll-animations/css/at-scroll-timeline-orientation.html
View file

@ -55,7 +55,9 @@
}
#container > div {
width: 0px;
animation: expand 10s linear;
animation-name: expand;
animation-duration: 10s;
animation-timing-function: linear;
}
/* Ensure stable expectations if feature is not supported */
@supports not (animation-timeline:foo) {

4
tests/wpt/web-platform-tests/scroll-animations/css/at-scroll-timeline-source.html
View file

@ -64,7 +64,9 @@
}
#container > div {
width: 0px;
animation: expand 10s linear;
animation-name: expand;
animation-duration: 10s;
animation-timing-function: linear;
}
/* Ensure stable expectations if feature is not supported */
@supports not (animation-timeline:foo) {

4
tests/wpt/web-platform-tests/scroll-animations/css/at-scroll-timeline-start-end.html
View file

@ -61,7 +61,9 @@
}
#container > div {
width: 0px;
animation: expand 10s linear;
animation-name: expand;
animation-duration: 10s;
animation-timing-function: linear;
}
/* Ensure stable expectations if feature is not supported */
@supports not (animation-timeline:foo) {

4
tests/wpt/web-platform-tests/scroll-animations/css/at-scroll-timeline-time-range.html
View file

@ -37,7 +37,9 @@
}
#container > div {
width: 0px;
animation: expand 10s linear;
animation-name: expand;
animation-duration: 10s;
animation-timing-function: linear;
}
/* Ensure stable expectations if feature is not supported */
@supports not (animation-timeline:foo) {

14
tests/wpt/web-platform-tests/scroll-animations/css/scroll-timeline-cssom.tentative.html
View file

@ -163,7 +163,19 @@ test_offsets('', 'auto');
test_offsets('red', 'auto');
test_offsets('#fff', 'auto');
test_offsets('unset', 'auto');
test_offsets('selector(#foo)', 'auto');
test_offsets('unknown(#foo)', 'auto');
test_offsets('start', 'auto');
test_offsets('end', 'auto');
test_offsets('3', 'auto');
test_offsets('selector(#foo)');
test_offsets(' selector(#foo)', 'selector(#foo)');
test_offsets('selector(#foo) start');
test_offsets('selector(#foo) start 3');
test_offsets('selector(#foo) 3');
test_offsets('selector(#foo) 3.5');
test_offsets('selector(#foo) end');
test_offsets('selector(#foo) end 3');
test_offsets('selector(#foo) 3 end', 'selector(#foo) end 3');
// CSSScrollTimelineRule.timeRange