mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
Update web-platform-tests to revision b'8a99353217938b6f1da31a9a108da3d501cee58b'
This commit is contained in:
WPT Sync Bot
parent
62ec0f1ec7
commit
92be0baf34
211 changed files with 5373 additions and 2272 deletions
|
|
@ -33,16 +33,16 @@
|
|||
}
|
||||
|
||||
#top_scroller {
|
||||
scroll-timeline: block top_timeline;
|
||||
scroll-timeline: top_timeline block;
|
||||
}
|
||||
#bottom_scroller {
|
||||
scroll-timeline: inline bottom_timeline;
|
||||
scroll-timeline: bottom_timeline inline;
|
||||
}
|
||||
#left_scroller {
|
||||
scroll-timeline: block left_timeline;
|
||||
scroll-timeline: left_timeline block;
|
||||
}
|
||||
#right_scroller {
|
||||
scroll-timeline: inline right_timeline;
|
||||
scroll-timeline: right_timeline inline;
|
||||
}
|
||||
|
||||
#element {
|
||||
|
|
|
|||
|
|
@ -22,23 +22,23 @@
|
|||
scroll-timeline: timeline_initial_axis;
|
||||
}
|
||||
#timeline_vertical {
|
||||
scroll-timeline: vertical timeline_vertical;
|
||||
scroll-timeline: timeline_vertical vertical;
|
||||
}
|
||||
#timeline_horizontal {
|
||||
scroll-timeline: horizontal timeline_horizontal;
|
||||
scroll-timeline: timeline_horizontal horizontal;
|
||||
}
|
||||
#timeline_block_in_horizontal {
|
||||
scroll-timeline: block timeline_block_in_horizontal;
|
||||
scroll-timeline: timeline_block_in_horizontal block;
|
||||
}
|
||||
#timeline_inline_in_horizontal {
|
||||
scroll-timeline: inline timeline_inline_in_horizontal;
|
||||
scroll-timeline: timeline_inline_in_horizontal inline;
|
||||
}
|
||||
#timeline_block_in_vertical {
|
||||
scroll-timeline: block timeline_block_in_vertical;
|
||||
scroll-timeline: timeline_block_in_vertical block;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#timeline_inline_in_vertical {
|
||||
scroll-timeline: inline timeline_inline_in_vertical;
|
||||
scroll-timeline: timeline_inline_in_vertical inline;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#container > div {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<title>scroll-timelime-name and tree-scoped references</title>
|
||||
<title>scroll-timeline-name and tree-scoped references</title>
|
||||
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#scroll-timelines-named">
|
||||
<link rel="help" src="https://drafts.csswg.org/css-scoping-1/#shadow-names">
|
||||
<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/8135">
|
||||
<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/8192">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/web-animations/testcommon.js"></script>
|
||||
|
|
@ -59,8 +60,8 @@
|
|||
assert_equals(target.getAnimations().length, 1);
|
||||
let anim = target.getAnimations()[0];
|
||||
assert_not_equals(anim.timeline, null);
|
||||
assert_equals(anim.timeline.axis, 'horizontal');
|
||||
}, 'Outer animation can not see scroll timeline defined by :host');
|
||||
assert_equals(anim.timeline.axis, 'vertical');
|
||||
}, 'Outer animation can see scroll timeline defined by :host');
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -97,8 +98,8 @@
|
|||
assert_equals(target.getAnimations().length, 1);
|
||||
let anim = target.getAnimations()[0];
|
||||
assert_not_equals(anim.timeline, null);
|
||||
assert_equals(anim.timeline.axis, 'horizontal');
|
||||
}, 'Outer animation can not see scroll timeline defined by ::slotted');
|
||||
assert_equals(anim.timeline.axis, 'vertical');
|
||||
}, 'Outer animation can see scroll timeline defined by ::slotted');
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -142,3 +143,43 @@
|
|||
assert_equals(anim.timeline.axis, 'horizontal');
|
||||
}, 'Inner animation can see scroll timeline defined by ::part');
|
||||
</script>
|
||||
|
||||
|
||||
<template id=scroll_timeline_shadow>
|
||||
<style>
|
||||
.target {
|
||||
animation: anim 10s linear;
|
||||
animation-timeline: timeline;
|
||||
}
|
||||
.host {
|
||||
scroll-timeline: timeline horizontal;
|
||||
}
|
||||
</style>
|
||||
<div class=scroller>
|
||||
<div class=host>
|
||||
<template shadowroot=open>
|
||||
<style>
|
||||
div {
|
||||
scroll-timeline: timeline vertical;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<div class=target></div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
</style>
|
||||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, scroll_timeline_shadow);
|
||||
let target = main.querySelector('.target');
|
||||
assert_equals(target.getAnimations().length, 1);
|
||||
let anim = target.getAnimations()[0];
|
||||
assert_not_equals(anim.timeline, null);
|
||||
assert_equals(anim.timeline.axis, 'vertical');
|
||||
}, 'Slotted element can see scroll timeline within the shadow');
|
||||
</script>
|
||||
|
|
@ -8,12 +8,12 @@
|
|||
<script src="/css/support/shorthand-testcommon.js"></script>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_valid_value('scroll-timeline', 'block none', 'block');
|
||||
test_valid_value('scroll-timeline', 'none inline', 'inline');
|
||||
test_valid_value('scroll-timeline', 'horizontal abc');
|
||||
test_valid_value('scroll-timeline', 'inline abc');
|
||||
test_valid_value('scroll-timeline', 'inline aBc');
|
||||
test_valid_value('scroll-timeline', 'vertical none', 'vertical');
|
||||
test_valid_value('scroll-timeline', 'none block', 'none');
|
||||
test_valid_value('scroll-timeline', 'none inline');
|
||||
test_valid_value('scroll-timeline', 'abc horizontal');
|
||||
test_valid_value('scroll-timeline', 'abc inline');
|
||||
test_valid_value('scroll-timeline', 'aBc inline');
|
||||
test_valid_value('scroll-timeline', 'none vertical');
|
||||
test_valid_value('scroll-timeline', 'inline inline');
|
||||
test_valid_value('scroll-timeline', 'abc');
|
||||
test_valid_value('scroll-timeline', 'inline');
|
||||
|
|
@ -21,21 +21,21 @@ test_valid_value('scroll-timeline', 'inline');
|
|||
test_invalid_value('scroll-timeline', '');
|
||||
test_invalid_value('scroll-timeline', 'abc abc');
|
||||
|
||||
test_computed_value('scroll-timeline', 'block none', 'block');
|
||||
test_computed_value('scroll-timeline', 'abc inline', 'inline abc');
|
||||
test_computed_value('scroll-timeline', 'none vertical', 'vertical');
|
||||
test_computed_value('scroll-timeline', 'horizontal abc');
|
||||
test_computed_value('scroll-timeline', 'none block', 'none');
|
||||
test_computed_value('scroll-timeline', 'abc inline');
|
||||
test_computed_value('scroll-timeline', 'none vertical', 'none vertical');
|
||||
test_computed_value('scroll-timeline', 'abc horizontal');
|
||||
test_computed_value('scroll-timeline', 'vertical vertical');
|
||||
test_computed_value('scroll-timeline', 'abc');
|
||||
|
||||
test_shorthand_value('scroll-timeline', 'vertical abc',
|
||||
test_shorthand_value('scroll-timeline', 'abc vertical',
|
||||
{
|
||||
'scroll-timeline-axis': 'vertical',
|
||||
'scroll-timeline-name': 'abc',
|
||||
'scroll-timeline-axis': 'vertical',
|
||||
});
|
||||
test_shorthand_value('scroll-timeline', 'horizontal inline',
|
||||
test_shorthand_value('scroll-timeline', 'inline horizontal',
|
||||
{
|
||||
'scroll-timeline-axis': 'horizontal',
|
||||
'scroll-timeline-name': 'inline',
|
||||
'scroll-timeline-axis': 'horizontal',
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<title>view-timelime-name and tree-scoped references</title>
|
||||
<title>view-timeline-name and and shadow trees</title>
|
||||
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timelines-named">
|
||||
<link rel="help" src="https://drafts.csswg.org/css-scoping-1/#shadow-names">
|
||||
<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/8135">
|
||||
<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/8192">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/web-animations/testcommon.js"></script>
|
||||
|
|
@ -60,8 +61,8 @@
|
|||
assert_equals(target.getAnimations().length, 1);
|
||||
let anim = target.getAnimations()[0];
|
||||
assert_not_equals(anim.timeline, null);
|
||||
assert_equals(anim.timeline.axis, 'horizontal');
|
||||
}, 'Outer animation can not see view timeline defined by :host');
|
||||
assert_equals(anim.timeline.axis, 'vertical');
|
||||
}, 'Outer animation can see view timeline defined by :host');
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -98,8 +99,8 @@
|
|||
assert_equals(target.getAnimations().length, 1);
|
||||
let anim = target.getAnimations()[0];
|
||||
assert_not_equals(anim.timeline, null);
|
||||
assert_equals(anim.timeline.axis, 'horizontal');
|
||||
}, 'Outer animation can not see view timeline defined by ::slotted');
|
||||
assert_equals(anim.timeline.axis, 'vertical');
|
||||
}, 'Outer animation can see view timeline defined by ::slotted');
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -143,3 +144,43 @@
|
|||
assert_equals(anim.timeline.axis, 'horizontal');
|
||||
}, 'Inner animation can see view timeline defined by ::part');
|
||||
</script>
|
||||
|
||||
|
||||
<template id=view_timeline_shadow>
|
||||
<style>
|
||||
.target {
|
||||
animation: anim 10s linear;
|
||||
animation-timeline: timeline;
|
||||
}
|
||||
.host {
|
||||
view-timeline: timeline horizontal;
|
||||
}
|
||||
</style>
|
||||
<div class=scroller>
|
||||
<div class=host>
|
||||
<template shadowroot=open>
|
||||
<style>
|
||||
div {
|
||||
view-timeline: timeline vertical;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<div class=target></div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
</style>
|
||||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, view_timeline_shadow);
|
||||
let target = main.querySelector('.target');
|
||||
assert_equals(target.getAnimations().length, 1);
|
||||
let anim = target.getAnimations()[0];
|
||||
assert_not_equals(anim.timeline, null);
|
||||
assert_equals(anim.timeline.axis, 'vertical');
|
||||
}, 'Slotted element can see view timeline within the shadow');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Animations using named timeline ranges</title>
|
||||
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#named-timeline-range">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/web-animations/testcommon.js"></script>
|
||||
<script src="support/testcommon.js"></script>
|
||||
<style>
|
||||
@keyframes anim {
|
||||
from { z-index: 0; background-color: skyblue;}
|
||||
to { z-index: 100; background-color: coral; }
|
||||
}
|
||||
#scroller {
|
||||
border: 10px solid lightgray;
|
||||
overflow-y: scroll;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#target {
|
||||
margin: 800px 0px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<main id=main>
|
||||
</main>
|
||||
<template>
|
||||
<div id=scroller>
|
||||
<div id=target></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
setup(assert_implements_animation_timeline);
|
||||
|
||||
function inflate(t, template) {
|
||||
t.add_cleanup(() => main.replaceChildren());
|
||||
main.append(template.content.cloneNode(true));
|
||||
}
|
||||
async function scrollTop(e, value) {
|
||||
e.scrollTop = value;
|
||||
await waitForNextFrame();
|
||||
}
|
||||
async function waitForAnimationReady(target) {
|
||||
await waitForNextFrame();
|
||||
await Promise.all(target.getAnimations().map(x => x.promise));
|
||||
}
|
||||
async function assertValueAt(scroller, target, args) {
|
||||
await waitForAnimationReady(target);
|
||||
await scrollTop(scroller, args.scrollTop);
|
||||
assert_equals(getComputedStyle(target).zIndex, args.expected.toString());
|
||||
}
|
||||
function test_animation_delay(options) {
|
||||
promise_test(async (t) => {
|
||||
inflate(t, document.querySelector('template'));
|
||||
let scroller = main.querySelector('#scroller');
|
||||
let target = main.querySelector('#target');
|
||||
|
||||
target.style.viewTimeline = 't1 block';
|
||||
// TODO(crbug.com/1375998): Create the timeline in a separate frame to
|
||||
// work around a bug.
|
||||
await waitForNextFrame();
|
||||
|
||||
target.style.animation = 'anim auto linear';
|
||||
target.style.animationTimeline = 't1';
|
||||
target.style.animationRangeStart = options.rangeStart;
|
||||
target.style.animationRangeEnd = options.rangeEnd;
|
||||
|
||||
// Accommodates floating point precision errors at the endpoints.
|
||||
target.style.animationFillMode = 'both';
|
||||
|
||||
// 0%
|
||||
await assertValueAt(scroller, target,
|
||||
{ scrollTop: options.startOffset, expected: 0 });
|
||||
// 50%
|
||||
await assertValueAt(scroller, target,
|
||||
{ scrollTop: (options.startOffset + options.endOffset) / 2, expected: 50 });
|
||||
// 100%
|
||||
await assertValueAt(scroller, target,
|
||||
{ scrollTop: options.endOffset, expected: 100 });
|
||||
|
||||
// Test before/after phases (need to clear the fill mode for that).
|
||||
target.style.animationFillMode = 'initial';
|
||||
await assertValueAt(scroller, target,
|
||||
{ scrollTop: options.startOffset - 10, expected: -1 });
|
||||
await assertValueAt(scroller, target,
|
||||
{ scrollTop: options.endOffset + 10, expected: -1 });
|
||||
// Check 50% again without fill mode.
|
||||
await assertValueAt(scroller, target,
|
||||
{ scrollTop: (options.startOffset + options.endOffset) / 2, expected: 50 });
|
||||
|
||||
}, `Animation with ranges [${options.rangeStart}, ${options.rangeEnd}]`);
|
||||
}
|
||||
|
||||
test_animation_delay({
|
||||
rangeStart: 'initial',
|
||||
rangeEnd: 'initial',
|
||||
startOffset: 600,
|
||||
endOffset: 900
|
||||
});
|
||||
|
||||
test_animation_delay({
|
||||
rangeStart: 'cover 0%',
|
||||
rangeEnd: 'cover 100%',
|
||||
startOffset: 600,
|
||||
endOffset: 900
|
||||
});
|
||||
|
||||
test_animation_delay({
|
||||
rangeStart: 'contain 0%',
|
||||
rangeEnd: 'contain 100%',
|
||||
startOffset: 700,
|
||||
endOffset: 800
|
||||
});
|
||||
|
||||
|
||||
test_animation_delay({
|
||||
rangeStart: 'enter 0%',
|
||||
rangeEnd: 'enter 100%',
|
||||
startOffset: 600,
|
||||
endOffset: 700
|
||||
});
|
||||
|
||||
test_animation_delay({
|
||||
rangeStart: 'exit 0%',
|
||||
rangeEnd: 'exit 100%',
|
||||
startOffset: 800,
|
||||
endOffset: 900
|
||||
});
|
||||
|
||||
test_animation_delay({
|
||||
rangeStart: 'contain -50%',
|
||||
rangeEnd: 'enter 200%',
|
||||
startOffset: 650,
|
||||
endOffset: 800
|
||||
});
|
||||
|
||||
test_animation_delay({
|
||||
rangeStart: 'enter 0%',
|
||||
rangeEnd: 'exit 100%',
|
||||
startOffset: 600,
|
||||
endOffset: 900
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue