mirror of
https://github.com/servo/servo.git
synced 2025-08-11 08:25:32 +01:00
Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'
This commit is contained in:
WPT Sync Bot
parent
ace9b32b1c
commit
df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
|
|
@ -0,0 +1,120 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<meta name="assert" content="This test checks the output of linear timing functions" />
|
||||
<title>Tests for the output of linear timing functions</title>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/6533">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/util.js"></script>
|
||||
<script src="testcommon.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
function assert_style_left_at(animation, time, expected_y) {
|
||||
animation.currentTime = time;
|
||||
assert_approx_equals(pxToNum(getComputedStyle(animation.effect.target).left),
|
||||
expected_y * 100,
|
||||
0.01,
|
||||
'The left of the animation should be approximately ' +
|
||||
expected_y * 100 + ' at ' + time + 'ms');
|
||||
}
|
||||
|
||||
function assert_animations_equal_at(actual_animation, expected_animation, time) {
|
||||
actual_animation.currentTime = time;
|
||||
var actual_left = pxToNum(getComputedStyle(actual_animation.effect.target).left);
|
||||
expected_animation.currentTime = time;
|
||||
var expected_left = pxToNum(getComputedStyle(expected_animation.effect.target).left);
|
||||
assert_approx_equals(actual_left,
|
||||
expected_left,
|
||||
0.01,
|
||||
'The left of the animation should be approximately ' +
|
||||
expected_left + ' at ' + time + 'ms');
|
||||
}
|
||||
|
||||
function create_animated_div(t, easing_function) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
return target.animate(
|
||||
[ { left: '0px' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: easing_function });
|
||||
}
|
||||
|
||||
test(function(t) {
|
||||
var anim = create_animated_div(t, 'linear(0, 1.5, 1)');
|
||||
|
||||
assert_style_left_at(anim, 0, 0.0);
|
||||
assert_style_left_at(anim, 250, 0.75);
|
||||
assert_style_left_at(anim, 500, 1.5);
|
||||
assert_style_left_at(anim, 750, 1.25);
|
||||
assert_style_left_at(anim, 1000, 1.00);
|
||||
}, 'linear function easing with output greater than 1');
|
||||
|
||||
test(function(t) {
|
||||
var anim = create_animated_div(t, 'linear(1, -0.5, 0)');
|
||||
|
||||
assert_style_left_at(anim, 0, 1.0);
|
||||
assert_style_left_at(anim, 250, 0.25);
|
||||
assert_style_left_at(anim, 500, -0.5);
|
||||
assert_style_left_at(anim, 750, -0.25);
|
||||
assert_style_left_at(anim, 1000, 0.00);
|
||||
}, 'linear function easing with output less than 1');
|
||||
|
||||
test(function(t) {
|
||||
var anim = create_animated_div(t, 'linear()');
|
||||
var equiv = create_animated_div(t, 'linear');
|
||||
|
||||
assert_animations_equal_at(anim, equiv, 0);
|
||||
assert_animations_equal_at(anim, equiv, 250);
|
||||
assert_animations_equal_at(anim, equiv, 750);
|
||||
assert_animations_equal_at(anim, equiv, 1000);
|
||||
}, 'linear function easing, linear equivalent');
|
||||
|
||||
test(function(t) {
|
||||
var anim = create_animated_div(t, 'linear(0.5)');
|
||||
|
||||
assert_style_left_at(anim, 0, 0.5);
|
||||
assert_style_left_at(anim, 250, 0.5);
|
||||
assert_style_left_at(anim, 500, 0.5);
|
||||
assert_style_left_at(anim, 750, 0.5);
|
||||
assert_style_left_at(anim, 1000, 0.5);
|
||||
}, 'linear function easing, constant');
|
||||
|
||||
test(function(t) {
|
||||
var anim = create_animated_div(t, 'linear(0.2 0% 20%, 0.4 20% 40%, 0.6 40% 60%, 0.8 60% 80%, 1.0 80% 100%)');
|
||||
var equiv = create_animated_div(t, 'steps(5, jump-start)');
|
||||
|
||||
assert_animations_equal_at(anim, equiv, 0);
|
||||
assert_animations_equal_at(anim, equiv, 200);
|
||||
assert_animations_equal_at(anim, equiv, 400);
|
||||
assert_animations_equal_at(anim, equiv, 600);
|
||||
assert_animations_equal_at(anim, equiv, 800);
|
||||
assert_animations_equal_at(anim, equiv, 1000);
|
||||
}, 'linear function easing, steps equivalent');
|
||||
|
||||
test(function(t) {
|
||||
var anim = create_animated_div(t, 'linear(0, 0.1 -10%, 1)');
|
||||
var equiv = create_animated_div(t, 'linear(0, 0.1 0%, 1)');
|
||||
|
||||
assert_animations_equal_at(anim, equiv, 0);
|
||||
assert_animations_equal_at(anim, equiv, 100);
|
||||
assert_animations_equal_at(anim, equiv, 550);
|
||||
assert_animations_equal_at(anim, equiv, 1000);
|
||||
}, 'linear function easing, input value being unspecified in the first entry implies zero');
|
||||
|
||||
test(function(t) {
|
||||
var anim = create_animated_div(t, 'linear(0, 0.9 110%, 1)');
|
||||
var equiv = create_animated_div(t, 'linear(0, 0.9 110%, 1 110%)');
|
||||
|
||||
assert_animations_equal_at(anim, equiv, 0);
|
||||
assert_animations_equal_at(anim, equiv, 450);
|
||||
assert_animations_equal_at(anim, equiv, 900);
|
||||
assert_animations_equal_at(anim, equiv, 950);
|
||||
assert_animations_equal_at(anim, equiv, 1000);
|
||||
}, 'linear function easing, input value being unspecified in the last entry implies max input value');
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Easing: getComputedStyle().animationTimingFunction with linear(...)</title>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/6533">
|
||||
<meta name="assert" content="animation-timing-function: linear(...) parsing tests">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_valid_value("animation-timing-function", "linear()");
|
||||
test_valid_value("animation-timing-function", "linear(0)");
|
||||
test_valid_value("animation-timing-function", "linear(0, 1)");
|
||||
test_valid_value("animation-timing-function", "linear(0 0% 100%)", "linear(0 0%, 0 100%)");
|
||||
test_valid_value("animation-timing-function", "linear(0% 100% 0)", "linear(0 0%, 0 100%)");
|
||||
test_valid_value("animation-timing-function", "linear(0 0% 50%, 1 50% 100%)", "linear(0 0%, 0 50%, 1 50%, 1 100%)");
|
||||
test_valid_value("animation-timing-function", "linear(0, 0.5 25% 75%, 1 100% 100%)", "linear(0, 0.5 25%, 0.5 75%, 1 100%, 1 100%)");
|
||||
test_valid_value("animation-timing-function", "linear(0, 1.3, 1, 0.92, 1, 0.99, 1, 1.004, 0.998, 1 100% 100%)", "linear(0, 1.3, 1, 0.92, 1, 0.99, 1, 1.004, 0.998, 1 100%, 1 100%)");
|
||||
|
||||
test_invalid_value("animation-timing-function", "linear(100%)");
|
||||
test_invalid_value("animation-timing-function", "linear(0% 1 50%)");
|
||||
|
||||
test_computed_value("animation-timing-function", "linear()");
|
||||
test_computed_value("animation-timing-function", "linear(0)", "linear(0 0%)");
|
||||
test_computed_value("animation-timing-function", "linear(0, 1)", "linear(0 0%, 1 100%)");
|
||||
test_computed_value("animation-timing-function", "linear(0 0% 100%)", "linear(0 0%, 0 100%)");
|
||||
test_computed_value("animation-timing-function", "linear(0% 100% 0)", "linear(0 0%, 0 100%)");
|
||||
test_computed_value("animation-timing-function", "linear(0 0% 50%, 1 50% 100%)", "linear(0 0%, 0 50%, 1 50%, 1 100%)");
|
||||
test_computed_value("animation-timing-function", "linear(0, 0.5 25% 75%, 1 100% 100%)", "linear(0 0%, 0.5 25%, 0.5 75%, 1 100%, 1 100%)");
|
||||
test_computed_value("animation-timing-function", "linear(0, 1.3, 1, 0.92, 1, 0.99, 1, 0.998, 1 100% 100%)", "linear(0 0%, 1.3 12.5%, 1 25%, 0.92 37.5%, 1 50%, 0.99 62.5%, 1 75%, 0.998 87.5%, 1 100%, 1 100%)");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Easing: getComputedStyle().animationTimingFunction</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-easing/#timing-functions">
|
||||
<meta name="assert" content="animation-timing-function computed value is a computed <easing-function> list.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("animation-timing-function", "linear");
|
||||
|
||||
test_computed_value("animation-timing-function", "ease");
|
||||
test_computed_value("animation-timing-function", "ease-in");
|
||||
test_computed_value("animation-timing-function", "ease-out");
|
||||
test_computed_value("animation-timing-function", "ease-in-out");
|
||||
test_computed_value("animation-timing-function", "cubic-bezier(0.1, 0.2, 0.8, 0.9)");
|
||||
test_computed_value("animation-timing-function", "cubic-bezier(0, -2, 1, 3)");
|
||||
test_computed_value("animation-timing-function", "cubic-bezier(0, 0.7, 1, 1.3)");
|
||||
|
||||
|
||||
test_computed_value("animation-timing-function", "steps(4, start)");
|
||||
test_computed_value("animation-timing-function", "steps(2, end)", "steps(2)");
|
||||
test_computed_value("animation-timing-function", "steps(2, jump-start)");
|
||||
test_computed_value("animation-timing-function", "steps(2, jump-end)", "steps(2)");
|
||||
test_computed_value("animation-timing-function", "steps(2, jump-both)");
|
||||
test_computed_value("animation-timing-function", "steps(2, jump-none)");
|
||||
|
||||
test_computed_value("animation-timing-function", "linear, ease, linear");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Easing: parsing animation-timing-function with invalid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-easing/#timing-functions">
|
||||
<meta name="assert" content="animation-timing-function supports only the grammar '<timing-function> #'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_invalid_value("animation-timing-function", "auto");
|
||||
test_invalid_value("animation-timing-function", "ease-in ease-out");
|
||||
test_invalid_value("animation-timing-function", "cubic-bezier(1, 2, 3)");
|
||||
test_invalid_value("animation-timing-function", "cubic-bezier(1, 2, 3, infinite)");
|
||||
test_invalid_value("animation-timing-function", "cubic-bezier(1, 2, 3, 4, 5)");
|
||||
test_invalid_value("animation-timing-function", "cubic-bezier(-0.1, 0.1, 0.5, 0.9)");
|
||||
test_invalid_value("animation-timing-function", "cubic-bezier(0.5, 0.1, 1.1, 0.9)");
|
||||
|
||||
test_invalid_value("animation-timing-function", "initial, cubic-bezier(0, -2, 1, 3)");
|
||||
test_invalid_value("animation-timing-function", "cubic-bezier(0, -2, 1, 3), initial");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Easing: parsing animation-timing-function with valid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-easing/#timing-functions">
|
||||
<meta name="assert" content="animation-timing-function supports the full grammar '<timing-function> #'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_valid_value("animation-timing-function", "linear");
|
||||
|
||||
test_valid_value("animation-timing-function", "ease");
|
||||
test_valid_value("animation-timing-function", "ease-in");
|
||||
test_valid_value("animation-timing-function", "ease-out");
|
||||
test_valid_value("animation-timing-function", "ease-in-out");
|
||||
test_valid_value("animation-timing-function", "cubic-bezier(0.1, 0.2, 0.8, 0.9)");
|
||||
test_valid_value("animation-timing-function", "cubic-bezier(0, -2, 1, 3)");
|
||||
test_valid_value("animation-timing-function", "cubic-bezier(0, 0.7, 1, 1.3)");
|
||||
|
||||
|
||||
test_valid_value("animation-timing-function", "steps(4, start)");
|
||||
test_valid_value("animation-timing-function", "steps(2, end)", "steps(2)");
|
||||
test_valid_value("animation-timing-function", "steps(2, jump-start)");
|
||||
test_valid_value("animation-timing-function", "steps(2, jump-end)", "steps(2)");
|
||||
test_valid_value("animation-timing-function", "steps(2, jump-both)");
|
||||
test_valid_value("animation-timing-function", "steps(2, jump-none)");
|
||||
|
||||
test_valid_value("animation-timing-function", "linear, ease, linear");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue