Update web-platform-tests to revision 89aa3f42131cce5a77268ddaeb2fab8a2e29c2a6

This commit is contained in:
WPT Sync Bot 2019-11-17 10:33:25 +00:00
parent 39963266ae
commit ea00d34098
392 changed files with 5974 additions and 7614 deletions

View file

@ -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;

View file

@ -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>

View file

@ -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();

View file

@ -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 => {