mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Update web-platform-tests to revision a4482f355e2848f4623cf46f521cb9b3bca56129
This commit is contained in:
parent
33a74a4f4e
commit
10cafa3df2
86 changed files with 1024 additions and 172 deletions
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Cascade: 'revert' keyword in keyframe animations</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-cascade/#default">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
@keyframes test {
|
||||
from { margin-top: 0px; }
|
||||
50% { margin-top: revert; }
|
||||
to { margin-top: 0px; }
|
||||
}
|
||||
#h1 {
|
||||
margin-top: 0px;
|
||||
animation: test linear 1000s -500s;
|
||||
}
|
||||
</style>
|
||||
<h1 id=h1></h1>
|
||||
<h1 id=ref></h1>
|
||||
<script>
|
||||
test(function() {
|
||||
let actual = getComputedStyle(h1).marginTop;
|
||||
let expected = getComputedStyle(ref).marginTop;
|
||||
// This test assumes that the UA style sheet sets a non-0px value on
|
||||
// <h1> elements:
|
||||
assert_not_equals(expected, '0px');
|
||||
assert_equals(actual, expected);
|
||||
}, 'The revert keyword works with @keyframes');
|
||||
</script>
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Cascade: 'revert' in keyframe animations on identical elements</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-cascade/#default">
|
||||
<link rel="help" href="https://crbug.com/1065387">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
@keyframes test {
|
||||
from { margin-top: revert; }
|
||||
to { margin-top: 100px; }
|
||||
}
|
||||
.anim {
|
||||
margin-top: 0px;
|
||||
animation: test linear 1s paused;
|
||||
}
|
||||
</style>
|
||||
<h1 class="anim"></h1>
|
||||
<h1 class="anim"></h1>
|
||||
<h1 class="anim"></h1>
|
||||
<h1 id=ref></h1>
|
||||
<script>
|
||||
test(function() {
|
||||
// This querySelectorAll includes #ref, but that's OK.
|
||||
let targets = document.querySelectorAll('h1');
|
||||
for (let t of targets) {
|
||||
let actual = getComputedStyle(t).marginTop;
|
||||
let expected = getComputedStyle(ref).marginTop;
|
||||
// This test assumes that the UA style sheet sets a non-0px value on
|
||||
// <h1> elements:
|
||||
assert_not_equals(expected, '0px');
|
||||
assert_equals(actual, expected);
|
||||
}
|
||||
}, 'A @keyframe animation with revert works when applied to multiple identical elements');
|
||||
</script>
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Cascade: 'revert' in final keyframe of web animation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-cascade/#default">
|
||||
<link rel="help" href="https://crbug.com/1065387">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<h1 id=h1></h1>
|
||||
<h1 id=ref></h1>
|
||||
<script>
|
||||
test(function() {
|
||||
let expected_lower = parseInt(getComputedStyle(ref).marginTop);
|
||||
let expected_upper = expected_lower * 2;
|
||||
|
||||
h1.animate([
|
||||
{ marginTop: `${expected_lower * 4}px` },
|
||||
{ marginTop: `${expected_lower * 3}px` },
|
||||
{ marginTop: `${expected_lower * 2}px` },
|
||||
{ marginTop: 'revert' },
|
||||
], {
|
||||
duration: 4000,
|
||||
delay: -3500,
|
||||
}).pause();
|
||||
|
||||
let actual = parseInt(getComputedStyle(h1).marginTop);
|
||||
|
||||
// This test assumes that the UA style sheet sets a non-0px value on
|
||||
// <h1> elements:
|
||||
assert_not_equals(expected_lower, 0);
|
||||
assert_not_equals(expected_upper, 0);
|
||||
assert_between_exclusive(actual, expected_lower, expected_upper);
|
||||
}, 'The revert keyword works in the final frame of a web animation');
|
||||
</script>
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Cascade: 'revert' in implicit keyframes</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-cascade/#default">
|
||||
<link rel="help" href="https://crbug.com/1065387">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<h1 id=h1></h1>
|
||||
<h1 id=ref></h1>
|
||||
<script>
|
||||
test(function() {
|
||||
let expected_lower = parseInt(getComputedStyle(ref).marginTop);
|
||||
let expected_upper = expected_lower * 2;
|
||||
h1.style = `margin-top: ${expected_lower * 1000}px; margin-top: revert;`;
|
||||
|
||||
h1.animate([
|
||||
{ marginTop: `${expected_upper}px` },
|
||||
], {
|
||||
duration: 1000,
|
||||
delay: -500,
|
||||
}).pause();
|
||||
|
||||
let actual = parseInt(getComputedStyle(h1).marginTop);
|
||||
|
||||
// This test assumes that the UA style sheet sets a non-0px value on
|
||||
// <h1> elements:
|
||||
assert_not_equals(expected_lower, 0);
|
||||
assert_not_equals(expected_upper, 0);
|
||||
assert_between_exclusive(actual, expected_lower, expected_upper);
|
||||
}, 'The revert keyword works in implicit keyframes');
|
||||
</script>
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Cascade: 'revert' appearing in setKeyframes</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-cascade/#default">
|
||||
<link rel="help" href="https://drafts.csswg.org/web-animations-1/#dom-keyframeeffect-setkeyframes">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<h1 id=h1></h1>
|
||||
<script>
|
||||
test(function() {
|
||||
let original = parseInt(getComputedStyle(h1).marginTop);
|
||||
|
||||
// This test assumes that the UA style sheet sets a non-0px value on
|
||||
// <h1> elements:
|
||||
assert_not_equals(original, 0);
|
||||
|
||||
let animation = h1.animate([
|
||||
{ marginTop: `${original*4}px` },
|
||||
{ marginTop: `${original*8}px` },
|
||||
], {
|
||||
duration: 1000000,
|
||||
delay: -500000,
|
||||
easing: 'steps(2, end)'
|
||||
});
|
||||
|
||||
let animated = parseInt(getComputedStyle(h1).marginTop);
|
||||
assert_equals(animated, original*6);
|
||||
|
||||
animation.effect.setKeyframes([
|
||||
{ marginTop: 'revert' },
|
||||
{ marginTop: `${original*3}px` },
|
||||
]);
|
||||
|
||||
let animated_revert = parseInt(getComputedStyle(h1).marginTop);
|
||||
assert_equals(animated_revert, original*2);
|
||||
}, 'The revert works when appearing in setKeyframes');
|
||||
</script>
|
Loading…
Add table
Add a link
Reference in a new issue