Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-10-04 02:29:12 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 6e9693d2690e0648fb9a1bd902af7cc078f28515

Browse source
This commit is contained in:
WPT Sync Bot 2018-11-03 21:29:40 -04:00
parent 4ec7dedce1
commit 612038c4d6
56 changed files with 1374 additions and 477 deletions
Download patch file Download diff file Expand all files Collapse all files

19
tests/wpt/web-platform-tests/css/CSS2/normal-flow/containing-block-percent-margin-bottom.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#propdef-margin-bottom">
<style>
#container { overflow:hidden; background:blue; }
#container > div { margin-bottom:50%; height:50px; }
</style>
<p>There should be a blue square below.</p>
<div id="container" style="width:456px;" data-expected-width="100" data-expected-height="100">
<div></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
document.body.offsetTop;
document.getElementById("container").style.width = "100px";
checkLayout("#container");
</script>

18
tests/wpt/web-platform-tests/css/CSS2/normal-flow/containing-block-percent-margin-left.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#propdef-margin-left">
<style>
#container > div { margin-left:50%; height:100px; background:blue; }
</style>
<p>There should be a blue square below.</p>
<div id="container" style="width:456px;">
<div data-expected-width="100" data-expected-height="100"></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
document.body.offsetTop;
document.getElementById("container").style.width = "200px";
checkLayout("#container");
</script>

18
tests/wpt/web-platform-tests/css/CSS2/normal-flow/containing-block-percent-margin-right.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#propdef-margin-right">
<style>
#container > div { margin-right:50%; height:100px; background:blue; }
</style>
<p>There should be a blue square below.</p>
<div id="container" style="width:456px;">
<div data-expected-width="100" data-expected-height="100"></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
document.body.offsetTop;
document.getElementById("container").style.width = "200px";
checkLayout("#container");
</script>

19
tests/wpt/web-platform-tests/css/CSS2/normal-flow/containing-block-percent-margin-top.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#propdef-margin-top">
<style>
#container { overflow:hidden; background:blue; }
#container > div { margin-top:50%; height:50px; }
</style>
<p>There should be a blue square below.</p>
<div id="container" style="width:456px;" data-expected-width="100" data-expected-height="100">
<div></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
document.body.offsetTop;
document.getElementById("container").style.width = "100px";
checkLayout("#container");
</script>

18
tests/wpt/web-platform-tests/css/CSS2/normal-flow/containing-block-percent-padding-bottom.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#propdef-padding-bottom">
<style>
#container > div { padding-bottom:10%; width:100px; height:50px; background:blue; }
</style>
<p>There should be a blue square below.</p>
<div id="container" style="width:123px;">
<div data-expected-width="100" data-expected-height="100"></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
document.body.offsetTop;
document.getElementById("container").style.width = "500px";
checkLayout("#container");
</script>

18
tests/wpt/web-platform-tests/css/CSS2/normal-flow/containing-block-percent-padding-left.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#propdef-padding-left">
<style>
#container > div { padding-left:10%; width:50px; height:100px; background:blue; }
</style>
<p>There should be a blue square below.</p>
<div id="container" style="width:123px;">
<div data-expected-width="100" data-expected-height="100"></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
document.body.offsetTop;
document.getElementById("container").style.width = "500px";
checkLayout("#container");
</script>

18
tests/wpt/web-platform-tests/css/CSS2/normal-flow/containing-block-percent-padding-right.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#propdef-padding-right">
<style>
#container > div { padding-right:10%; width:50px; height:100px; background:blue; }
</style>
<p>There should be a blue square below.</p>
<div id="container" style="width:123px;">
<div data-expected-width="100" data-expected-height="100"></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
document.body.offsetTop;
document.getElementById("container").style.width = "500px";
checkLayout("#container");
</script>

18
tests/wpt/web-platform-tests/css/CSS2/normal-flow/containing-block-percent-padding-top.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#propdef-padding-top">
<style>
#container > div { padding-top:10%; width:100px; height:50px; background:blue; }
</style>
<p>There should be a blue square below.</p>
<div id="container" style="width:123px;">
<div data-expected-width="100" data-expected-height="100"></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
document.body.offsetTop;
document.getElementById("container").style.width = "500px";
checkLayout("#container");
</script>

6
tests/wpt/web-platform-tests/css/css-animations/parsing/animation-timing-function-valid.html
View file

@ -23,7 +23,11 @@ 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)");
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>

2
tests/wpt/web-platform-tests/css/css-timing/META.yml → tests/wpt/web-platform-tests/css/css-easing/META.yml
View file

@ -1,4 +1,4 @@
spec: https://drafts.csswg.org/css-timing/
spec: https://drafts.csswg.org/css-easing/
suggested_reviewers:
- birtles
- BorisChiou

2
tests/wpt/web-platform-tests/css/css-timing/cubic-bezier-timing-functions-output.html → tests/wpt/web-platform-tests/css/css-easing/cubic-bezier-timing-functions-output.html
View file

@ -4,7 +4,7 @@
content="This test checks the output of Cubic Bézier functions" />
<title>Tests for the output of Cubic Bézier timing functions</title>
<link rel="help"
href="https://drafts.csswg.org/css-timing/#cubic-bezier-timing-functions">
href="https://drafts.csswg.org/css-easing/#cubic-bezier-timing-functions">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="testcommon.js"></script>

318
tests/wpt/web-platform-tests/css/css-easing/step-timing-functions-output.html Normal file
View file

@ -0,0 +1,318 @@
<!DOCTYPE html>
<meta charset=utf-8>
<meta name="assert"
content="This test checks the output of step timing functions" />
<title>Tests for the output of step timing functions</title>
<link rel="help"
href="https://drafts.csswg.org/css-easing/#step-timing-functions">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="testcommon.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'step-start' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
// The bezier function produces values greater than 1 (but always less than 2)
// in (0.23368794, 1)
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 230;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 250;
assert_equals(getComputedStyle(target).left, '200px');
anim.currentTime = 1000;
assert_equals(getComputedStyle(target).left, '100px');
}, 'step-start easing with input progress greater than 1');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'step-start' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, 3, 1, 3)' });
// The bezier function produces values:
// Input -> Output
// 0.0 0.0
// 0.114 ~ 0.245 1.5~2.0, so current step is 2, jumps is 1 => 2.0
// 0.245 ~ 0.6 2.0~2.4, so current step is 3, jumps is 1 => 3.0
// 0.6 ~ 0.882 2.4~2.0, so current step is 3, jumps is 1 => 3.0
// 0.882 ~ 0.976 2.0~1.5, so current step is 2, jumps is 1 => 2.0
// 1.0 1.0
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 114;
assert_equals(getComputedStyle(target).left, '200px');
anim.currentTime = 500;
assert_equals(getComputedStyle(target).left, '300px');
anim.currentTime = 900;
assert_equals(getComputedStyle(target).left, '200px');
}, 'step-start easing with input progress greater than 2');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'step-start' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
// The bezier function produces negative values (but always greater than -1)
// in (0, 0.766312060)
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 750;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 800;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 1000;
assert_equals(getComputedStyle(target).left, '100px');
}, 'step-start easing with input progress less than 0');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'step-start' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, -2, 1, -2)' });
// The bezier function produces values less than -1 (but always greater than
// -2) in the range (~0.118, ~0.755)
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 100;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 500;
assert_equals(getComputedStyle(target).left, '-100px');
anim.currentTime = 1000;
assert_equals(getComputedStyle(target).left, '100px');
}, 'step-start easing with input progress less than -1');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'step-end' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
// The bezier function produces values greater than 1 (but always less than 2)
// in (0.23368794, 1)
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 230;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 250;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 1000;
assert_equals(getComputedStyle(target).left, '100px');
}, 'step-end easing with input progress greater than 1');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'step-end' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, 3, 1, 3)' });
// The bezier function produces values:
// Input -> Output
// 0.0 0.0
// 0.114 ~ 0.245 1.5~2.0, so current step is 1, jumps is 1 => 1.0
// 0.245 ~ 0.6 2.0~2.4, so current step is 2, jumps is 1 => 2.0
// 0.6 ~ 0.882 2.4~2.0, so current step is 2, jumps is 1 => 2.0
// 0.882 ~ 0.976 2.0~1.5, so current step is 1, jumps is 1 => 1.0
// 1.0 1.0
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 114;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 500;
assert_equals(getComputedStyle(target).left, '200px');
anim.currentTime = 900;
assert_equals(getComputedStyle(target).left, '100px');
}, 'step-end easing with input progress greater than 2');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'step-end' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
// The bezier function produces negative values (but always greater than -1)
// in (0, 0.766312060)
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 750;
assert_equals(getComputedStyle(target).left, '-100px');
anim.currentTime = 800;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 1000;
assert_equals(getComputedStyle(target).left, '100px');
}, 'step-end easing with input progress less than 0');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'steps(1, jump-both)' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
// The bezier function produces values greater than 1 (but always less than 2)
// in (0.23368794, 1)
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '50px');
anim.currentTime = 230;
assert_equals(getComputedStyle(target).left, '50px');
anim.currentTime = 250;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 1000;
assert_equals(getComputedStyle(target).left, '100px');
}, 'steps(1, jump-both) easing with input progress greater than 1');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'steps(1, jump-both)' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, 3, 1, 3)' });
// The bezier function produces values:
// Input -> Output
// 0.0 0.0, so current step is 1, jumps is 2 => 0.5
// 0.114 ~ 0.245 1.5~2.0, so current step is 2, jumps is 2 => 1.0
// 0.245 ~ 0.6 2.0~2.4, so current step is 3, jumps is 2 => 1.5
// 0.6 ~ 0.882 2.4~2.0, so current step is 3, jumps is 2 => 1.5
// 0.882 ~ 0.976 2.0~1.5, so current step is 2, jumps is 2 => 1.0
// 1.0 1.0
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '50px');
anim.currentTime = 114;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 500;
assert_equals(getComputedStyle(target).left, '150px');
anim.currentTime = 900;
assert_equals(getComputedStyle(target).left, '100px');
}, 'steps(1, jump-both) easing with input progress greater than 2');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'steps(1, jump-both)' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
// The bezier function produces negative values (but always greater than -0.5)
// in (0, 0.766312060).
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '50px');
anim.currentTime = 750;
// current step is 0, jumps is 2.
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 800;
assert_equals(getComputedStyle(target).left, '50px');
anim.currentTime = 1000;
assert_equals(getComputedStyle(target).left, '100px');
}, 'steps(1, jump-both) easing with input progress less than 0');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'steps(2, jump-none)' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
// The bezier function produces values between 0.5 and 1 in
// (~0.0442, 0.23368), and values between 1 and 2 in (0.23368794, 1).
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 45;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 230;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 250;
assert_equals(getComputedStyle(target).left, '200px');
anim.currentTime = 1000;
assert_equals(getComputedStyle(target).left, '100px');
}, 'steps(2, jump-none) easing with input progress greater than 1');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'steps(2, jump-none)' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, 3, 1, 3)' });
// The bezier function produces values:
// Input -> Output
// 0.0 0.0, so current step is 0, jumps is 1 => 0.0
// 0.114 ~ 0.245 1.5~2.0, so current step is 3, jumps is 1 => 3.0
// 0.245 ~ 0.6 2.0~2.4, so current step is 4, jumps is 1 => 4.0
// 0.6 ~ 0.882 2.4~2.0, so current step is 4, jumps is 1 => 4.0
// 0.882 ~ 0.976 2.0~1.5, so current step is 3, jumps is 1 => 3.0
// 1.0 1.0
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 114;
assert_equals(getComputedStyle(target).left, '300px');
anim.currentTime = 500;
assert_equals(getComputedStyle(target).left, '400px');
anim.currentTime = 900;
assert_equals(getComputedStyle(target).left, '300px');
}, 'steps(2, jump-none) easing with input progress greater than 2');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'steps(2, jump-none)' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
// The bezier function produces negative values (but always greater than -0.5)
// in (0, 0.766312060).
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 750;
// current step is -1, jumps is 1.
assert_equals(getComputedStyle(target).left, '-100px');
anim.currentTime = 800;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 1000;
assert_equals(getComputedStyle(target).left, '100px');
}, 'steps(2, jump-none) easing with input progress less than 0');
</script>
</body>

34
tests/wpt/web-platform-tests/css/css-easing/step-timing-functions-syntax.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<meta charset=utf-8>
<meta name="assert"
content="This test checks the syntax output of step timing functions" />
<title>Step timing function syntax tests</title>
<link rel="help"
href="https://drafts.csswg.org/css-easing-1/#step-timing-functions">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="testcommon.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<body>
<div id="log"></div>
<script>
"use strict";
test_valid_value("animation-timing-function", "step-start", "steps(1, start)");
test_valid_value("animation-timing-function", "step-end", "steps(1)");
test_valid_value("animation-timing-function", "steps(1, start)");
test_valid_value("animation-timing-function", "steps(1, end)", "steps(1)");
test_valid_value("animation-timing-function", "steps(1, jump-start)");
test_valid_value("animation-timing-function", "steps(1, jump-end)", "steps(1)");
test_valid_value("animation-timing-function", "steps(1, jump-both)");
test_valid_value("animation-timing-function", "steps(2, jump-none)");
test_invalid_value("animation-timing-function", "steps(0, start)");
test_invalid_value("animation-timing-function", "steps(0, end)");
test_invalid_value("animation-timing-function", "steps(0, jump-start)");
test_invalid_value("animation-timing-function", "steps(0, jump-end)");
test_invalid_value("animation-timing-function", "steps(0, jump-both)");
test_invalid_value("animation-timing-function", "steps(1, jump-none)");
</script>
</body>

0
tests/wpt/web-platform-tests/css/css-timing/testcommon.js → tests/wpt/web-platform-tests/css/css-easing/testcommon.js
View file

141
tests/wpt/web-platform-tests/css/css-timing/step-timing-functions-output.html
View file

@ -1,141 +0,0 @@
<!DOCTYPE html>
<meta charset=utf-8>
<meta name="assert"
content="This test checks the output of step timing functions" />
<title>Tests for the output of step timing functions</title>
<link rel="help"
href="https://drafts.csswg.org/css-timing/#step-timing-functions">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="testcommon.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'step-start' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
// The bezier function produces values greater than 1 (but always less than 2)
// in (0.23368794, 1)
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 230;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 250;
assert_equals(getComputedStyle(target).left, '200px');
anim.currentTime = 1000;
assert_equals(getComputedStyle(target).left, '100px');
}, 'step-start easing with input progress greater than 1');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'step-end' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
// The bezier function produces values greater than 1 (but always less than 2)
// in (0.23368794, 1)
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 230;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 250;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 1000;
assert_equals(getComputedStyle(target).left, '100px');
}, 'step-end easing with input progress greater than 1');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'step-end' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, 3, 1, 3)' });
// The bezier function produces values greater than 2 (but always less than 3)
// in the range (~0.245, ~0.882)
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 500;
assert_equals(getComputedStyle(target).left, '200px');
anim.currentTime = 900;
assert_equals(getComputedStyle(target).left, '100px');
}, 'step-end easing with input progress greater than 2');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'step-start' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
// The bezier function produces negative values (but always greater than -1)
// in (0, 0.766312060)
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 750;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 800;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 1000;
assert_equals(getComputedStyle(target).left, '100px');
}, 'step-start easing with input progress less than 0');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'step-start' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, -2, 1, -2)' });
// The bezier function produces values less than -1 (but always greater than
// -2) in the range (~0.118, ~0.755)
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 100;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 500;
assert_equals(getComputedStyle(target).left, '-100px');
anim.currentTime = 1000;
assert_equals(getComputedStyle(target).left, '100px');
}, 'step-start easing with input progress less than -1');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'step-end' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
// The bezier function produces negative values (but always greater than -1)
// in (0, 0.766312060)
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 750;
assert_equals(getComputedStyle(target).left, '-100px');
anim.currentTime = 800;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 1000;
assert_equals(getComputedStyle(target).left, '100px');
}, 'step-end easing with input progress less than 0');
</script>
</body>

2
tests/wpt/web-platform-tests/css/css-transitions/parsing/transition-timing-function-invalid.html
View file

@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>CSS Animations: parsing transition-timing-function with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-transitions/#propdef-transition-timing-function">
<link rel="help" href="https://drafts.csswg.org/css-timing-1/#typedef-timing-function">
<link rel="help" href="https://drafts.csswg.org/css-easing-1/#typedef-timing-function">
<meta name="assert" content="transition-timing-function supports only the grammar '<timing-function> #'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

8
tests/wpt/web-platform-tests/css/css-transitions/parsing/transition-timing-function-valid.html
View file

@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>CSS Transitions: parsing transition-timing-function with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-transitions/#propdef-transition-timing-function">
<link rel="help" href="https://drafts.csswg.org/css-timing-1/#typedef-timing-function">
<link rel="help" href="https://drafts.csswg.org/css-easing-1/#typedef-timing-function">
<meta name="assert" content="transition-timing-function supports the full grammar '<timing-function> #'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
@ -23,7 +23,11 @@ test_valid_value("transition-timing-function", "cubic-bezier(0, -2, 1, 3)");
test_valid_value("transition-timing-function", "cubic-bezier(0, 0.7, 1, 1.3)");
test_valid_value("transition-timing-function", "steps(4, start)");
test_valid_value("transition-timing-function", "steps(2, end)");
test_valid_value("transition-timing-function", "steps(2, end)", "steps(2)");
test_valid_value("transition-timing-function", "steps(2, jump-start)");
test_valid_value("transition-timing-function", "steps(2, jump-end)", "steps(2)");
test_valid_value("transition-timing-function", "steps(2, jump-both)");
test_valid_value("transition-timing-function", "steps(2, jump-none)");
test_valid_value("transition-timing-function", "linear, ease, linear");
</script>

8
tests/wpt/web-platform-tests/css/css-transitions/transition-timing-function-001.html
View file

@ -42,12 +42,20 @@
'steps(3, start)': 'steps(3, start)',
'steps(3, end)': 'steps(3)',
'steps(3)': 'steps(3)',
'steps(3, jump-start)': 'steps(3, jump-start)',
'steps(3, jump-end)': 'steps(3)',
'steps(3, jump-both)': 'steps(3, jump-both)',
'steps(3, jump-none)': 'steps(3, jump-none)',
// invalid
'cubic-bezier(foobar)': defaultValue,
'steps(foobar)': defaultValue,
'steps(3.3, end)': defaultValue,
'steps(3, top)': defaultValue,
'steps(-3, top)': defaultValue,
'steps(0, jump-start)': defaultValue,
'steps(0, jump-end)': defaultValue,
'steps(0, jump-both)': defaultValue,
'steps(1, jump-none)': defaultValue,
// Both x values must be in the range [0, 1]
'cubic-bezier(-0.1, -0.2, -0.3, -0.4)': defaultValue,
'cubic-bezier(1.1, 1.2, 1.3, 1.4)': defaultValue