Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-17 11:25:35 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444

Browse source
This commit is contained in:
Josh Matthews 2017-04-17 12:06:02 +10:00 • committed by Anthony Ramine
parent 25e8bf69e6
commit 665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
Download patch file Download diff file Expand all files Collapse all files

2
tests/wpt/web-platform-tests/css-timing-1/OWNERS Normal file
View file

@ -0,0 +1,2 @@
@birtles
@BorisChiou

221
tests/wpt/web-platform-tests/css-timing-1/cubic-bezier-timing-functions-output.html Normal file
View file

@ -0,0 +1,221 @@
<!DOCTYPE html>
<meta charset=utf-8>
<meta name="assert"
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">
<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';
function assert_style_left_at(animation, time, easingFunction) {
animation.currentTime = time;
var portion = time / animation.effect.timing.duration;
assert_approx_equals(pxToNum(getComputedStyle(animation.effect.target).left),
easingFunction(portion) * 100,
0.01,
'The left of the animation should be approximately ' +
easingFunction(portion) * 100 + ' at ' + time + 'ms');
}
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate(
// http://cubic-bezier.com/#.5,1,.5,0
[ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
var keyframeEasing = function(x) {
assert_greater_than_equal(x, 0.0,
'This function should be called in [0, 1.0] range');
assert_less_than_equal(x, 1.0,
'This function should be called in [0, 1.0] range');
return cubicBezier(0.5, 1, 0.5, 0)(x);
}
var keyframeEasingExtrapolated = function(x) {
assert_greater_than(x, 1.0,
'This function should be called in (1.0, infinity) range');
// p3x + (p2y - p3y) / (p2x - p3x) * (x - p3x)
return 1.0 + (0 - 1) / (0.5 - 1) * (x - 1.0);
}
var effectEasing = function(x) {
return cubicBezier(0, 1.5, 1, 1.5)(x);
}
// The effect-easing produces values greater than 1 in (0.23368794, 1)
assert_style_left_at(anim, 0, function(x) {
return keyframeEasing(effectEasing(x));
});
assert_style_left_at(anim, 230, function(x) {
return keyframeEasing(effectEasing(x));
});
assert_style_left_at(anim, 240, function(x) {
return keyframeEasingExtrapolated(effectEasing(x));
});
// Near the extreme point of the effect-easing function
assert_style_left_at(anim, 700, function(x) {
return keyframeEasingExtrapolated(effectEasing(x));
});
assert_style_left_at(anim, 990, function(x) {
return keyframeEasingExtrapolated(effectEasing(x));
});
assert_style_left_at(anim, 1000, function(x) {
return keyframeEasing(effectEasing(x));
});
}, 'cubic-bezier easing with input progress greater than 1');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate(
// http://cubic-bezier.com/#0,1.5,1,1.5
[ { left: '0px', easing: 'cubic-bezier(0, 1.5, 1, 1.5)' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
var easing = function(x) {
assert_greater_than_equal(x, 0.0,
'This function should be called in [0, 1.0] range');
assert_less_than_equal(x, 1.0,
'This function should be called in [0, 1.0] range');
return cubicBezier(0, 1.5, 1, 1.5)(x);
}
var easingExtrapolated = function(x) {
assert_greater_than(x, 1.0,
'This function should be called in negative range');
// For cubic-bezier(0, 1.5, 1, 1.5), the tangent at the
// endpoint (x = 1.0) is infinity so we should just return 1.0.
return 1.0;
}
// The effect-easing produces values greater than 1 in (0.23368794, 1)
assert_style_left_at(anim, 0, function(x) {
return easing(easing(x))
});
assert_style_left_at(anim, 230, function(x) {
return easing(easing(x))
});
assert_style_left_at(anim, 240, function(x) {
return easingExtrapolated(easing(x));
});
// Near the extreme point of the effect-easing function
assert_style_left_at(anim, 700, function(x) {
return easingExtrapolated(easing(x));
});
assert_style_left_at(anim, 990, function(x) {
return easingExtrapolated(easing(x));
});
assert_style_left_at(anim, 1000, function(x) {
return easing(easing(x))
});
}, 'cubic-bezier easing with input progress greater than 1 and where the ' +
'tangent on the upper boundary is infinity');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate(
// http://cubic-bezier.com/#.5,1,.5,0
[ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
var keyframeEasing = function(x) {
assert_greater_than_equal(x, 0.0,
'This function should be called in [0, 1.0] range');
assert_less_than_equal(x, 1.0,
'This function should be called in [0, 1.0] range');
return cubicBezier(0.5, 1, 0.5, 0)(x);
}
var keyframeEasingExtrapolated = function(x) {
assert_less_than(x, 0.0,
'This function should be called in negative range');
// p0x + (p1y - p0y) / (p1x - p0x) * (x - p0x)
return (1 / 0.5) * x;
}
var effectEasing = function(x) {
return cubicBezier(0, -0.5, 1, -0.5)(x);
}
// The effect-easing produces negative values in (0, 0.766312060)
assert_style_left_at(anim, 0, function(x) {
return keyframeEasing(effectEasing(x));
});
assert_style_left_at(anim, 10, function(x) {
return keyframeEasingExtrapolated(effectEasing(x));
});
// Near the extreme point of the effect-easing function
assert_style_left_at(anim, 300, function(x) {
return keyframeEasingExtrapolated(effectEasing(x));
});
assert_style_left_at(anim, 750, function(x) {
return keyframeEasingExtrapolated(effectEasing(x));
});
assert_style_left_at(anim, 770, function(x) {
return keyframeEasing(effectEasing(x));
});
assert_style_left_at(anim, 1000, function(x) {
return keyframeEasing(effectEasing(x));
});
}, 'cubic-bezier easing with input progress less than 0');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate(
// http://cubic-bezier.com/#0,-0.5,1,-0.5
[ { left: '0px', easing: 'cubic-bezier(0, -0.5, 1, -0.5)' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
var easing = function(x) {
assert_greater_than_equal(x, 0.0,
'This function should be called in [0, 1.0] range');
assert_less_than_equal(x, 1.0,
'This function should be called in [0, 1.0] range');
return cubicBezier(0, -0.5, 1, -0.5)(x);
}
var easingExtrapolated = function(x) {
assert_less_than(x, 0.0,
'This function should be called in negative range');
// For cubic-bezier(0, -0.5, 1, -0.5), the tangent at the
// endpoint (x = 0.0) is infinity so we should just return 0.0.
return 0.0;
}
// The effect-easing produces negative values in (0, 0.766312060)
assert_style_left_at(anim, 0, function(x) {
return easing(easing(x))
});
assert_style_left_at(anim, 10, function(x) {
return easingExtrapolated(easing(x));
});
// Near the extreme point of the effect-easing function
assert_style_left_at(anim, 300, function(x) {
return easingExtrapolated(easing(x));
});
assert_style_left_at(anim, 750, function(x) {
return easingExtrapolated(easing(x));
});
assert_style_left_at(anim, 770, function(x) {
return easing(easing(x))
});
assert_style_left_at(anim, 1000, function(x) {
return easing(easing(x))
});
}, 'cubic-bezier easing with input progress less than 0 and where the ' +
'tangent on the lower boundary is infinity');
</script>
</body>

152
tests/wpt/web-platform-tests/css-timing-1/frames-timing-functions-output.html Normal file
View file

@ -0,0 +1,152 @@
<!DOCTYPE html>
<meta charset=utf-8>
<meta name="assert"
content="This test checks the output of frame timing functions with different frame numbers" />
<title>Frames timing function output tests</title>
<link rel="help"
href="https://drafts.csswg.org/css-timing/#frames-timing-functions">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="testcommon.js"></script>
<style>
@keyframes anim {
from { left: 0px; }
to { left: 100px; }
}
</style>
<body>
<div id="log"></div>
<script>
"use strict";
test(function(t) {
const div = createDiv(t);
div.style.animation = 'anim 10s frames(2) forwards';
assert_equals(getComputedStyle(div).left, '0px');
}, 'For an input progress of 0.0, the output of a frames timing function is ' +
'the first frame');
test(function(t) {
const div = createDiv(t);
div.style.animation = 'anim 10s frames(2) forwards';
div.style.animationDelay = '-4999ms';
assert_equals(getComputedStyle(div).left, '0px');
div.style.animationDelay = '-5000ms';
assert_equals(getComputedStyle(div).left, '100px');
}, 'At a frame boundary, the output of a frames timing function is the next ' +
'frame');
test(function(t) {
const div = createDiv(t);
div.style.animation = 'anim 10s frames(2) forwards';
div.style.animationDelay = '-10s';
assert_equals(getComputedStyle(div).left, '100px');
}, 'For an input progress of 1.0, the output of a frames timing function is ' +
'the final frame');
test(function(t) {
const div = createDiv(t);
div.style.animation = 'anim 11s frames(11) forwards';
// We have 11 frames in 11s, so the first step happens at 1.0.
div.style.animationDelay = '-999ms';
assert_equals(getComputedStyle(div).left, '0px');
div.style.animationDelay = '-1000ms';
assert_equals(getComputedStyle(div).left, '10px');
}, 'The number of frames is correctly reflected in the frames timing ' +
'function output');
test(function(t) {
const div = createDiv(t);
div.style.transition = 'left 11s frames(11)';
// We have 11 frames in 11s, so the first step happens at 1.0.
div.style.left = '0px';
div.style.transitionDelay = '-999ms';
getComputedStyle(div).left;
div.style.left = '100px';
assert_equals(getComputedStyle(div).left, '0px');
div.style.left = '0px';
div.style.transitionDelay = '-1000ms';
getComputedStyle(div).left;
div.style.left = '100px';
assert_equals(getComputedStyle(div).left, '10px');
}, 'The number of frames is correctly reflected in the frames timing ' +
'function output on CSS Transitions');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'frames(2)' },
{ 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');
}, 'frames 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: 'frames(2)' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, 3, 1, 3)' });
// The bezier funciton produces values:
// Input -> Output
// 0.0 0.0
// 0.114 ~ 0.245 1.5~2.0, so frames(2) is 3.0
// 0.245 ~ 0.6 2.0~2.4, so frames(2) is 4.0
// 0.6 ~ 0.882 2.4~2.0, so frames(2) is 4.0
// 0.882 ~ 0.976 2.0~1.5, so frames(2) is 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');
}, 'frames easing with input progress greater than 1.5');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'frames(2)' },
{ 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;
assert_equals(getComputedStyle(target).left, '-100px');
anim.currentTime = 800;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 1000;
assert_equals(getComputedStyle(target).left, '100px');
}, 'frames easing with input progress less than 0');
</script>
</body>

31
tests/wpt/web-platform-tests/css-timing-1/frames-timing-functions-syntax.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<meta charset=utf-8>
<meta name="assert"
content="This test checks the syntax output of frame timing functions" />
<title>Frames timing function syntax tests</title>
<link rel="help"
href="https://drafts.csswg.org/css-timing/#frames-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) {
const div = createDiv(t);
div.style.animation = 'abc 1s ease-in';
div.style.animationTimingFunction = 'frames(1)';
assert_equals(getComputedStyle(div).animationTimingFunction, 'ease-in');
}, 'The number of frames must be a positive integer greater than 1, or we ' +
'fallback to the previously-set easing');
test(function(t) {
const div = createDiv(t);
div.style.animation = 'abc 1s frames( 2 )';
assert_equals(getComputedStyle(div).animationTimingFunction, 'frames(2)');
}, 'The serialization of frames is \'frames(n)\', n is the number of frames');
</script>
</body>

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

@ -0,0 +1,141 @@
<!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>

65
tests/wpt/web-platform-tests/css-timing-1/testcommon.js Normal file
View file

@ -0,0 +1,65 @@
'use strict';
// Creates a <div> element, appends it to the document body and
// removes the created element during test cleanup.
function createDiv(test, doc) {
return createElement(test, 'div', doc);
}
// Creates an element with the given |tagName|, appends it to the document body
// and removes the created element during test cleanup.
// If |tagName| is null or undefined, creates a <div> element.
function createElement(test, tagName, doc) {
if (!doc) {
doc = document;
}
var element = doc.createElement(tagName || 'div');
doc.body.appendChild(element);
test.add_cleanup(function() {
element.remove();
});
return element;
}
// Convert px unit value to a Number
function pxToNum(str) {
return Number(String(str).match(/^(-?[\d.]+)px$/)[1]);
}
// Cubic bezier with control points (0, 0), (x1, y1), (x2, y2), and (1, 1).
function cubicBezier(x1, y1, x2, y2) {
function xForT(t) {
var omt = 1-t;
return 3 * omt * omt * t * x1 + 3 * omt * t * t * x2 + t * t * t;
}
function yForT(t) {
var omt = 1-t;
return 3 * omt * omt * t * y1 + 3 * omt * t * t * y2 + t * t * t;
}
function tForX(x) {
// Binary subdivision.
var mint = 0, maxt = 1;
for (var i = 0; i < 30; ++i) {
var guesst = (mint + maxt) / 2;
var guessx = xForT(guesst);
if (x < guessx) {
maxt = guesst;
} else {
mint = guesst;
}
}
return (mint + maxt) / 2;
}
return function bezierClosure(x) {
if (x == 0) {
return 0;
}
if (x == 1) {
return 1;
}
return yForT(tForX(x));
}
}