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

Update web-platform-tests to revision b'f0b66362cc5dec54d81e0a56458b48f310a2eba9'

Browse source
This commit is contained in:
WPT Sync Bot 2023-04-16 01:26:13 +00:00
parent 766917ef4f
commit 75286b8eab
467 changed files with 8309 additions and 3209 deletions
Download patch file Download diff file Expand all files Collapse all files

146
tests/wpt/web-platform-tests/css/css-animations/display-none-dont-cancel.tentative.html Normal file
View file

@ -0,0 +1,146 @@
<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<link rel=help href="https://drafts.csswg.org/css-display-4/#display-animation">
<link rel=help href="https://github.com/w3c/csswg-drafts/issues/6429">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/css-animations/support/testcommon.js"></script>
<div id=target1>hello</div>
<style>
@keyframes display1 {
0% { display: none; }
100% { display: inline; }
}
.animate1 {
animation: display1 1s infinite;
}
</style>
<script>
promise_test(async () => {
let numAnimationstartFired = 0;
target1.addEventListener('animationstart', () => numAnimationstartFired++);
await waitForAnimationFrames(1);
target1.classList.add('animate1');
await waitForAnimationFrames(2);
assert_equals(getComputedStyle(target1).display, 'inline',
'The display should be inline during the animation.');
assert_equals(numAnimationstartFired, 1,
'Only one animation should start.');
}, 'display:none animating to display:inline should be inline for the whole animation.');
</script>
<div id=target2>hello</div>
<style>
@keyframes display2 {
0% { display: var(--none-value); }
100% { display: inline; }
}
.animate2 {
animation: display2 1s infinite;
}
#target2 {
--none-value: none;
}
</style>
<script>
promise_test(async () => {
let numAnimationstartFired = 0;
target2.addEventListener('animationstart', () => numAnimationstartFired++);
await waitForAnimationFrames(1);
target2.classList.add('animate2');
await waitForAnimationFrames(2);
assert_equals(getComputedStyle(target2).display, 'inline',
'The display should be inline during the animation.');
assert_equals(numAnimationstartFired, 1,
'Only one animation should start.');
}, 'A CSS variable of display:none animating to display:inline should be inline for the whole animation.');
</script>
<div id=target3>hello</div>
<style>
@keyframes display3 {
0% { display: none; }
100% { display: none; }
}
.animate3 {
animation: display3 1s infinite;
}
</style>
<script>
promise_test(async () => {
let numAnimationstartFired = 0;
target3.addEventListener('animationstart', () => numAnimationstartFired++);
await waitForAnimationFrames(1);
target3.classList.add('animate3');
await waitForAnimationFrames(2);
assert_equals(getComputedStyle(target3).display, 'none',
'The display should be none and the animation should keep running.');
assert_equals(numAnimationstartFired, 1,
'Only one animation should start.');
}, 'Animating from display:none to display:none should not cancel the animation.');
</script>
<div id=target4>hello</div>
<style>
@keyframes display4 {
0% { display: var(--none-value); }
100% { display: var(--none-value); }
}
.animate4 {
animation: display4 1s infinite;
}
#target4 {
--none-value: none;
}
</style>
<script>
promise_test(async () => {
let numAnimationstartFired = 0;
target4.addEventListener('animationstart', () => numAnimationstartFired++);
await waitForAnimationFrames(1);
target4.classList.add('animate4');
await waitForAnimationFrames(2);
assert_equals(getComputedStyle(target4).display, 'none',
'The display should be none and the animation should keep running.');
assert_equals(numAnimationstartFired, 1,
'Only one animation should start.');
}, 'Animating from display:none to display:none with an intermediate variable should not cancel the animation.');
</script>
<div id=target5>hello</div>
<style>
@keyframes display5 {
0% { --display: none; }
100% { --display: none; }
}
.animate5 {
animation: display5 1s infinite;
}
#target5 {
display: var(--display, block);
}
</style>
<script>
promise_test(async () => {
let numAnimationstartFired = 0;
target5.addEventListener('animationstart', () => numAnimationstartFired++);
await waitForAnimationFrames(1);
target5.classList.add('animate5');
await waitForAnimationFrames(2);
assert_equals(getComputedStyle(target5).display, 'none',
'The display should be none and the animation should keep running.');
assert_equals(numAnimationstartFired, 1,
'Only one animation should start.');
}, 'Animating a variable of "none" which gets set to display elsewhere should not cancel the animation.');
</script>