mirror of
https://github.com/servo/servo.git
synced 2025-08-13 17:35:36 +01:00
Update web-platform-tests to revision 89aa3f42131cce5a77268ddaeb2fab8a2e29c2a6
This commit is contained in:
parent
39963266ae
commit
ea00d34098
392 changed files with 5974 additions and 7614 deletions
|
@ -410,15 +410,6 @@ const gCSSProperties = {
|
|||
{ type: 'discrete', options: [ [ 'auto', '1px' ] ] }
|
||||
]
|
||||
},
|
||||
'content': {
|
||||
// https://drafts.csswg.org/css-content-3/#propdef-content
|
||||
types: [
|
||||
{ type: 'discrete', options: [ [ '"a"', '"b"' ] ] }
|
||||
],
|
||||
setup: t => {
|
||||
return getPseudoElement(t, 'before');
|
||||
}
|
||||
},
|
||||
'counter-increment': {
|
||||
// https://drafts.csswg.org/css-lists-3/#propdef-counter-increment
|
||||
types: [
|
||||
|
@ -1432,13 +1423,11 @@ const gCSSProperties = {
|
|||
};
|
||||
|
||||
function testAnimationSamples(animation, idlName, testSamples) {
|
||||
const type = animation.effect.target.type;
|
||||
const target = animation.effect.target.constructor.name === 'CSSPseudoElement'
|
||||
? animation.effect.target.element
|
||||
: animation.effect.target;
|
||||
const pseudoType = animation.effect.pseudoElement;
|
||||
const target = animation.effect.target;
|
||||
for (const testSample of testSamples) {
|
||||
animation.currentTime = testSample.time;
|
||||
assert_equals(getComputedStyle(target, type)[idlName],
|
||||
assert_equals(getComputedStyle(target, pseudoType)[idlName],
|
||||
testSample.expected,
|
||||
`The value should be ${testSample.expected}` +
|
||||
` at ${testSample.time}ms`);
|
||||
|
@ -1453,10 +1442,8 @@ function toOrderedArray(string) {
|
|||
// don't specify an order for serializing computed values.
|
||||
// This test is for such the property.
|
||||
function testAnimationSamplesWithAnyOrder(animation, idlName, testSamples) {
|
||||
const type = animation.effect.target.type;
|
||||
const target = animation.effect.target.constructor.name === 'CSSPseudoElement'
|
||||
? animation.effect.target.element
|
||||
: animation.effect.target;
|
||||
const type = animation.effect.pseudoElement;
|
||||
const target = animation.effect.target;
|
||||
for (const testSample of testSamples) {
|
||||
animation.currentTime = testSample.time;
|
||||
|
||||
|
|
|
@ -10,6 +10,11 @@
|
|||
<script src="../../resources/keyframe-tests.js"></script>
|
||||
<script src="../../resources/timing-utils.js"></script>
|
||||
<script src="../../resources/timing-tests.js"></script>
|
||||
<style>
|
||||
.pseudo::before {content: '';}
|
||||
.pseudo::after {content: '';}
|
||||
.pseudo::marker {content: '';}
|
||||
</style>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<iframe width="10" height="10" id="iframe"></iframe>
|
||||
|
@ -235,34 +240,59 @@ promise_test(async t => {
|
|||
assert_false(gotTransition, 'A transition should NOT have been triggered');
|
||||
}, 'Element.animate() does NOT trigger a style change event');
|
||||
|
||||
// Tests on CSSPseudoElement
|
||||
// Tests on pseudo-elements
|
||||
|
||||
test(t => {
|
||||
const pseudoTarget = getPseudoElement(t, 'before');
|
||||
const anim = pseudoTarget.animate(null);
|
||||
const div = createDiv(t);
|
||||
div.classList.add('pseudo');
|
||||
const anim = div.animate(null, {pseudoElement: '::before'});
|
||||
assert_class_string(anim, 'Animation', 'The returned object is an Animation');
|
||||
}, 'CSSPseudoElement.animate() creates an Animation object');
|
||||
}, 'animate() with pseudoElement parameter creates an Animation object');
|
||||
|
||||
test(t => {
|
||||
const pseudoTarget = getPseudoElement(t, 'marker');
|
||||
const anim = pseudoTarget.animate(null);
|
||||
const div = createDiv(t);
|
||||
div.classList.add('pseudo');
|
||||
div.style.display = 'list-item';
|
||||
const anim = div.animate(null, {pseudoElement: '::marker'});
|
||||
assert_class_string(anim, 'Animation', 'The returned object is an Animation for ::marker');
|
||||
}, 'CSSPseudoElement.animate() creates an Animation object for ::marker');
|
||||
}, 'animate() with pseudoElement parameter creates an Animation object for ::marker');
|
||||
|
||||
test(t => {
|
||||
const pseudoTarget = getPseudoElement(t, 'before');
|
||||
const anim = pseudoTarget.animate(null);
|
||||
assert_equals(anim.effect.target, pseudoTarget,
|
||||
'The returned Animation targets to the correct object');
|
||||
}, 'CSSPseudoElement.animate() creates an Animation object targeting ' +
|
||||
'to the correct CSSPseudoElement object');
|
||||
const div = createDiv(t);
|
||||
div.classList.add('pseudo');
|
||||
div.textContent = 'foo';
|
||||
const anim = div.animate(null, {pseudoElement: '::first-line'});
|
||||
assert_class_string(anim, 'Animation', 'The returned object is an Animation for ::first-line');
|
||||
}, 'animate() with pseudoElement parameter creates an Animation object for ::first-line');
|
||||
|
||||
test(t => {
|
||||
const pseudoTarget = getPseudoElement(t, 'marker');
|
||||
const anim = pseudoTarget.animate(null);
|
||||
assert_equals(anim.effect.target, pseudoTarget,
|
||||
'The returned Animation targets to the correct object for ::marker');
|
||||
}, 'CSSPseudoElement.animate() creates an Animation object targeting ' +
|
||||
'to the correct CSSPseudoElement object for ::marker');
|
||||
const div = createDiv(t);
|
||||
div.classList.add('pseudo');
|
||||
const anim = div.animate(null, {pseudoElement: '::before'});
|
||||
assert_equals(anim.effect.pseudoElement, '::before',
|
||||
'The returned Animation targets to the correct selector');
|
||||
}, 'animate() with pseudoElement an Animation object targeting ' +
|
||||
'to the correct pseudo-element');
|
||||
|
||||
test(t => {
|
||||
const div = createDiv(t);
|
||||
div.classList.add('pseudo');
|
||||
div.style.display = 'list-item';
|
||||
const anim = div.animate(null, {pseudoElement: '::marker'});
|
||||
assert_equals(anim.effect.pseudoElement, '::marker',
|
||||
'The returned Animation targets to the correct selector');
|
||||
}, 'animate() with pseudoElement an Animation object targeting ' +
|
||||
'to the correct pseudo-element for ::marker');
|
||||
|
||||
test(t => {
|
||||
const div = createDiv(t);
|
||||
div.classList.add('pseudo');
|
||||
div.textContent = 'foo';
|
||||
const anim = div.animate(null, {pseudoElement: '::first-line'});
|
||||
assert_equals(anim.effect.pseudoElement, '::first-line',
|
||||
'The returned Animation targets to the correct selector');
|
||||
}, 'animate() with pseudoElement an Animation object targeting ' +
|
||||
'to the correct pseudo-element for ::first-line');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
@ -5,6 +5,11 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<style>
|
||||
.pseudo::before {content: '';}
|
||||
.pseudo::after {content: '';}
|
||||
.pseudo::marker {content: '';}
|
||||
</style>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
|
@ -263,10 +268,12 @@ promise_test(async t => {
|
|||
}, 'Does NOT trigger mutation observers when the change to style is redundant');
|
||||
|
||||
test(t => {
|
||||
const pseudo = getPseudoElement(t, 'before');
|
||||
const animation = pseudo.animate(
|
||||
|
||||
const div = createDiv(t);
|
||||
div.classList.add('pseudo');
|
||||
const animation = div.animate(
|
||||
{ opacity: 0 },
|
||||
{ duration: 1, fill: 'forwards' }
|
||||
{ duration: 1, fill: 'forwards', pseudoElement: '::before' }
|
||||
);
|
||||
|
||||
assert_throws('NoModificationAllowedError', () => {
|
||||
|
@ -372,13 +379,14 @@ test(t => {
|
|||
}, 'Throws if the target effect is disconnected');
|
||||
|
||||
test(t => {
|
||||
const pseudo = getPseudoElement(t, 'before');
|
||||
const animation = pseudo.animate(
|
||||
const div = createDiv(t);
|
||||
div.classList.add('pseudo');
|
||||
const animation = div.animate(
|
||||
{ opacity: 0 },
|
||||
{ duration: 1, fill: 'forwards' }
|
||||
{ duration: 1, fill: 'forwards', pseudoElement: '::before' }
|
||||
);
|
||||
|
||||
pseudo.element.remove();
|
||||
div.remove();
|
||||
|
||||
assert_throws('NoModificationAllowedError', () => {
|
||||
animation.commitStyles();
|
||||
|
|
|
@ -87,23 +87,6 @@ function createStyle(test, rules, doc) {
|
|||
});
|
||||
}
|
||||
|
||||
// Create a pseudo element
|
||||
function getPseudoElement(test, type) {
|
||||
createStyle(test, { '@keyframes anim': '',
|
||||
[`.pseudo::${type}`]: 'animation: anim 10s; ' +
|
||||
'content: \'\';' });
|
||||
const div = createDiv(test);
|
||||
if (type == 'marker') {
|
||||
div.style.display = 'list-item';
|
||||
}
|
||||
div.classList.add('pseudo');
|
||||
const anims = document.getAnimations();
|
||||
assert_true(anims.length >= 1);
|
||||
const anim = anims[anims.length - 1];
|
||||
anim.cancel();
|
||||
return anim.effect.target;
|
||||
}
|
||||
|
||||
// Cubic bezier with control points (0, 0), (x1, y1), (x2, y2), and (1, 1).
|
||||
function cubicBezier(x1, y1, x2, y2) {
|
||||
const xForT = t => {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue