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

Update web-platform-tests to revision 82cecba576456d05c09894749379df1013ab488f

Browse source
This commit is contained in:
WPT Sync Bot 2019-10-30 10:25:42 +00:00
parent de9c84f686
commit 60b62482da
145 changed files with 2705 additions and 367 deletions
Download patch file Download diff file Expand all files Collapse all files

181
tests/wpt/web-platform-tests/web-animations/interfaces/DocumentOrShadowRoot/getAnimations.html Normal file
View file

@ -0,0 +1,181 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>DocumentOrShadowRoot.getAnimations</title>
<link rel="help" href="https://drafts.csswg.org/web-animations-1/#dom-documentorshadowroot-getanimations">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<div id="target"></div>
<script>
'use strict';
const gKeyFrames = { 'marginLeft': ['100px', '200px'] };
test(t => {
assert_equals(document.getAnimations().length, 0,
'getAnimations returns an empty sequence for a document ' +
'with no animations');
}, 'Document.getAnimations() returns an empty sequence for non-animated'
+ ' content');
test(t => {
const div = createDiv(t);
const anim1 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
const anim2 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
assert_equals(document.getAnimations().length, 2,
'getAnimation returns running animations');
anim1.finish();
anim2.finish();
assert_equals(document.getAnimations().length, 0,
'getAnimation only returns running animations');
}, 'Document.getAnimations() returns script-generated animations')
test(t => {
const div = createDiv(t);
const anim1 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
const anim2 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
assert_array_equals(document.getAnimations(),
[ anim1, anim2 ],
'getAnimations() returns running animations');
}, 'Document.getAnimations() returns script-generated animations in the order'
+ ' they were created')
test(t => {
// This element exists but is not a descendent of any document, so isn't
// picked up by getAnimations.
const div = document.createElement('div');
const anim = div.animate(gKeyFrames, 100 * MS_PER_SEC);
assert_equals(document.getAnimations().length, 0);
// Now connect the div; it should appear in the list of animations.
document.body.appendChild(div);
t.add_cleanup(() => { div.remove(); });
assert_equals(document.getAnimations().length, 1);
}, 'Document.getAnimations() does not return a disconnected node');
test(t => {
const effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC);
const anim = new Animation(effect, document.timeline);
anim.play();
assert_equals(document.getAnimations().length, 0,
'document.getAnimations() only returns animations targeting ' +
'elements in this document');
}, 'Document.getAnimations() does not return an animation with a null target');
promise_test(async t => {
const iframe = document.createElement('iframe');
const eventWatcher = new EventWatcher(t, iframe, ['load']);
const event_promise = eventWatcher.wait_for('load');
document.body.appendChild(iframe);
t.add_cleanup(() => { document.body.removeChild(iframe); });
await event_promise;
const div = createDiv(t, iframe.contentDocument)
const effect = new KeyframeEffect(div, null, 100 * MS_PER_SEC);
const anim = new Animation(effect, document.timeline);
anim.play();
// The animation's timeline is from the main document, but the effect's
// target element is part of the iframe document and that is what matters
// for getAnimations.
assert_equals(document.getAnimations().length, 0);
assert_equals(iframe.contentDocument.getAnimations().length, 1);
anim.finish();
}, 'Document.getAnimations() returns animations on elements inside same-origin'
+ ' iframes');
test(t => {
const div = createDiv(t);
const shadow = div.attachShadow({ mode: 'open' });
// Create a tree with the following structure
//
// div
// |
// (ShadowRoot)
// / \
// childA childB
// (*anim2) |
// grandChild
// (*anim1)
//
// This lets us test that:
//
// a) All children of the ShadowRoot are included
// b) Descendants of the children are included
// c) The result is sorted by composite order (since we fire anim1 before
// anim2 despite childA appearing first in tree order)
const childA = createDiv(t);
shadow.append(childA);
const childB = createDiv(t);
shadow.append(childB);
const grandChild = createDiv(t);
childB.append(grandChild);
const anim1 = grandChild.animate(gKeyFrames, 100 * MS_PER_SEC)
const anim2 = childA.animate(gKeyFrames, 100 * MS_PER_SEC)
assert_array_equals(
div.shadowRoot.getAnimations(),
[ anim1, anim2 ],
'getAnimations() called on ShadowRoot returns expected animations'
);
}, 'ShadowRoot.getAnimations() return all animations in the shadow tree');
test(t => {
const div = createDiv(t);
const shadow = div.attachShadow({ mode: 'open' });
const child = createDiv(t);
shadow.append(child);
child.animate(gKeyFrames, 100 * MS_PER_SEC)
assert_array_equals(
document.getAnimations(),
[],
'getAnimations() called on Document does not return animations from shadow'
+ ' trees'
);
}, 'Document.getAnimations() does NOT return animations in shadow trees');
promise_test(async t => {
const div = createDiv(t);
const watcher = EventWatcher(t, div, 'transitionrun');
// Create a covering animation to prevent transitions from firing after
// calling getAnimations().
const coveringAnimation = new Animation(
new KeyframeEffect(div, { opacity: [0, 1] }, 100 * MS_PER_SEC)
);
// Setup transition start point.
div.style.transition = 'opacity 100s';
getComputedStyle(div).opacity;
// Update specified style but don't flush style.
div.style.opacity = '0.5';
// Fetch animations
document.getAnimations();
// Play the covering animation to ensure that only the call to
// getAnimations() has a chance to trigger transitions.
coveringAnimation.play();
// If getAnimations() flushed style, we should get a transitionrun event.
await watcher.wait_for('transitionrun');
}, 'Document.getAnimations() triggers a style change event');
</script>
</body>