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

Update web-platform-tests to revision ddf26e73d3f23ef896efc7977d06707e74f46941

Browse source
This commit is contained in:
WPT Sync Bot 2020-02-29 08:21:32 +00:00
parent 60ee61bb8b
commit 953f6f0527
68 changed files with 1763 additions and 371 deletions
Download patch file Download diff file Expand all files Collapse all files

151
tests/wpt/web-platform-tests/css/css-animations/Document-getAnimations.tentative.html
View file

@ -262,83 +262,88 @@ test(t => {
'returned');
}, 'CSS Animations canceled and restarted via the API are returned');
test(t => {
// Create two divs with the following arrangement:
//
// parent
// (::marker,)
// ::before,
// ::after
// |
// child
function pseudoTest(description, testMarkerPseudos) {
test(t => {
// Create two divs with the following arrangement:
//
// parent
// (::marker,) // Optionally
// ::before,
// ::after
// |
// child
addStyle(t, {
'#parent::after': "content: ''; animation: animLeft 100s;",
'#parent::before': "content: ''; animation: animRight 100s;",
});
const supportsMarkerPseudos = CSS.supports('selector(::marker)');
if (supportsMarkerPseudos) {
addStyle(t, {
'#parent': 'display: list-item;',
'#parent::marker': "content: ''; animation: animLeft 100s;",
'#parent::after': "content: ''; animation: animLeft 100s;",
'#parent::before': "content: ''; animation: animRight 100s;",
});
}
const parent = addDiv(t, { id: 'parent' });
const child = addDiv(t);
parent.appendChild(child);
for (const div of [parent, child]) {
div.setAttribute('style', 'animation: animBottom 100s');
}
const expectedAnimations = [
[parent, undefined],
[parent, '::marker'],
[parent, '::before'],
[parent, '::after'],
[child, undefined],
];
if (!supportsMarkerPseudos) {
expectedAnimations.splice(1, 1);
}
const animations = document.getAnimations();
assert_equals(
animations.length,
expectedAnimations.length,
'CSS animations on both pseudo-elements and elements are returned'
);
for (const [index, expected] of expectedAnimations.entries()) {
const [element, pseudo] = expected;
const actual = animations[index];
if (pseudo) {
assert_equals(
actual.effect.target,
element,
`Animation #${index + 1} has expected target`
);
assert_equals(
actual.effect.pseudoElement,
pseudo,
`Animation #${index + 1} has expected pseudo type`
);
} else {
assert_equals(
actual.effect.target,
element,
`Animation #${index + 1} has expected target`
);
assert_equals(
actual.effect.pseudoElement,
null,
`Animation #${index + 1} has null pseudo type`
);
if (testMarkerPseudos) {
addStyle(t, {
'#parent': 'display: list-item;',
'#parent::marker': "content: ''; animation: animLeft 100s;",
});
}
}
}, 'CSS Animations targetting (pseudo-)elements should have correct order '
+ 'after sorting');
const parent = addDiv(t, { id: 'parent' });
const child = addDiv(t);
parent.appendChild(child);
for (const div of [parent, child]) {
div.setAttribute('style', 'animation: animBottom 100s');
}
const expectedAnimations = [
[parent, undefined],
[parent, '::marker'],
[parent, '::before'],
[parent, '::after'],
[child, undefined],
];
if (!testMarkerPseudos) {
expectedAnimations.splice(1, 1);
}
const animations = document.getAnimations();
assert_equals(
animations.length,
expectedAnimations.length,
'CSS animations on both pseudo-elements and elements are returned'
);
for (const [index, expected] of expectedAnimations.entries()) {
const [element, pseudo] = expected;
const actual = animations[index];
if (pseudo) {
assert_equals(
actual.effect.target,
element,
`Animation #${index + 1} has expected target`
);
assert_equals(
actual.effect.pseudoElement,
pseudo,
`Animation #${index + 1} has expected pseudo type`
);
} else {
assert_equals(
actual.effect.target,
element,
`Animation #${index + 1} has expected target`
);
assert_equals(
actual.effect.pseudoElement,
null,
`Animation #${index + 1} has null pseudo type`
);
}
}
}, description);
}
pseudoTest('CSS Animations targetting (pseudo-)elements should have correct '
+ 'order after sorting', false);
pseudoTest('CSS Animations targetting (pseudo-)elements should have correct '
+ 'order after sorting (::marker)', true);
</script>

102
tests/wpt/web-platform-tests/css/css-animations/event-order.tentative.html
View file

@ -129,62 +129,68 @@ promise_test(async t => {
['animationend', div2, 200]);
}, 'Same events are ordered by elements');
promise_test(async t => {
// Setup a hierarchy as follows:
//
// parent
// |
// (::marker, ::before, ::after)
// |
// child
const parentDiv = addDiv(t, { style: 'animation: anim 100s' });
function pseudoTest(description, testMarkerPseudos) {
promise_test(async t => {
// Setup a hierarchy as follows:
//
// parent
// |
// (::marker, ::before, ::after) // ::marker optional
// |
// child
const parentDiv = addDiv(t, { style: 'animation: anim 100s' });
parentDiv.id = 'parent-div';
addStyle(t, {
'#parent-div::after': "content: ''; animation: anim 100s",
'#parent-div::before': "content: ''; animation: anim 100s",
});
if (CSS.supports('selector(::marker)')) {
parentDiv.style.display = 'list-item';
parentDiv.id = 'parent-div';
addStyle(t, {
'#parent-div::marker': "content: ''; animation: color-anim 100s",
'#parent-div::after': "content: ''; animation: anim 100s",
'#parent-div::before': "content: ''; animation: anim 100s",
});
}
const childDiv = addDiv(t, { style: 'animation: anim 100s' });
parentDiv.append(childDiv);
// Setup event handlers
let events = [];
for (const name of ['start', 'iteration', 'end', 'cancel']) {
parentDiv['onanimation' + name] = evt => {
events.push({
type: evt.type,
target: evt.target,
pseudoElement: evt.pseudoElement,
elapsedTime: evt.elapsedTime,
if (testMarkerPseudos) {
parentDiv.style.display = 'list-item';
addStyle(t, {
'#parent-div::marker': "content: ''; animation: color-anim 100s",
});
};
}
}
// Wait a couple of frames for the events to be dispatched
await waitForFrame();
await waitForFrame();
const childDiv = addDiv(t, { style: 'animation: anim 100s' });
parentDiv.append(childDiv);
const expectedEvents = [
['animationstart', parentDiv, 0],
['animationstart', parentDiv, '::marker', 0],
['animationstart', parentDiv, '::before', 0],
['animationstart', parentDiv, '::after', 0],
['animationstart', childDiv, 0],
];
if (!CSS.supports('selector(::marker)')) {
expectedEvents.splice(1, 1);
}
// Setup event handlers
let events = [];
for (const name of ['start', 'iteration', 'end', 'cancel']) {
parentDiv['onanimation' + name] = evt => {
events.push({
type: evt.type,
target: evt.target,
pseudoElement: evt.pseudoElement,
elapsedTime: evt.elapsedTime,
});
};
}
checkEvents(events, ...expectedEvents);
}, 'Same events on pseudo-elements follow the prescribed order');
// Wait a couple of frames for the events to be dispatched
await waitForFrame();
await waitForFrame();
const expectedEvents = [
['animationstart', parentDiv, 0],
['animationstart', parentDiv, '::marker', 0],
['animationstart', parentDiv, '::before', 0],
['animationstart', parentDiv, '::after', 0],
['animationstart', childDiv, 0],
];
if (!testMarkerPseudos) {
expectedEvents.splice(1, 1);
}
checkEvents(events, ...expectedEvents);
}, description);
}
pseudoTest('Same events on pseudo-elements follow the prescribed order', false);
pseudoTest('Same events on pseudo-elements follow the prescribed order ' +
'(::marker)', true);
promise_test(async t => {
let events = [];