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

Update web-platform-tests to revision b'8a99353217938b6f1da31a9a108da3d501cee58b'

Browse source
This commit is contained in:
WPT Sync Bot 2023-01-20 01:38:13 +00:00
parent 62ec0f1ec7
commit 92be0baf34
211 changed files with 5373 additions and 2272 deletions
Download patch file Download diff file Expand all files Collapse all files

185
tests/wpt/web-platform-tests/scroll-animations/css/scroll-timeline-name-shadow.html Normal file
View file

@ -0,0 +1,185 @@
<!DOCTYPE html>
<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://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>
<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
<main id=main></main>
<script>
function inflate(t, template) {
t.add_cleanup(() => main.replaceChildren());
main.append(template.content.cloneNode(true));
main.offsetTop;
}
setup(() => {
polyfill_declarative_shadow_dom(document);
});
</script>
<style>
@keyframes anim {
from { z-index: 100; }
to { z-index: 100; }
}
</style>
<template id=scroll_timeline_host>
<style>
.target {
animation: anim 10s linear;
animation-timeline: timeline;
}
main > .scroller {
scroll-timeline: timeline horizontal;
}
</style>
<div class=scroller>
<div class=scroller>
<template shadowroot=open>
<style>
:host {
scroll-timeline: timeline vertical;
}
</style>
<slot></slot>
</template>
<div class=target></div>
</div>
</div>
<style>
</style>
</template>
<script>
promise_test(async (t) => {
inflate(t, scroll_timeline_host);
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');
}, 'Outer animation can see scroll timeline defined by :host');
</script>
<template id=scroll_timeline_slotted>
<style>
.target {
animation: anim 10s linear;
animation-timeline: timeline;
}
.host {
scroll-timeline: timeline horizontal;
}
</style>
<div class=host>
<template shadowroot=open>
<style>
::slotted(.scroller) {
scroll-timeline: timeline vertical;
}
</style>
<slot></slot>
</template>
<div class=scroller>
<div class=target></div>
</div>
</div>
<style>
</style>
</template>
<script>
promise_test(async (t) => {
inflate(t, scroll_timeline_slotted);
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');
}, 'Outer animation can see scroll timeline defined by ::slotted');
</script>
<template id=scroll_timeline_part>
<style>
.host {
scroll-timeline: timeline vertical;
}
.host::part(foo) {
scroll-timeline: timeline horizontal;
}
</style>
<div class=host>
<template shadowroot=open>
<style>
/* Not using 'anim' at document scope, due to https://crbug.com/1334534 */
@keyframes anim2 {
from { z-index: 100; background-color: green; }
to { z-index: 100; background-color: green; }
}
.target {
animation: anim2 10s linear;
animation-timeline: timeline;
}
</style>
<div part=foo>
<div class=target></div>
</div>
</template>
</div>
<style>
</style>
</template>
<script>
promise_test(async (t) => {
inflate(t, scroll_timeline_part);
let target = main.querySelector('.host').shadowRoot.querySelector('.target');
assert_equals(target.getAnimations().length, 1);
let anim = target.getAnimations()[0];
assert_not_equals(anim.timeline, null);
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>