mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 1018862 part 7 - Convert test_transitions_per_property.html to use OMTA test methods; r=dholbert
This patch takes the existing tests for transitions running on the compositor and makes them re-use the same test utility methods as used for testing CSS Animations that run on the compositor. This means these tests now also check that the transition is in fact running on the compositor when it is expected to. It seems the big_omta_round_error is no longer needed so I've removed that. The test that begins with "skew(45deg, 45deg)" currently fails so it is skipped here. This is addressed in the next patch in the series.
This commit is contained in:
Brian Birtles
parent
81648220ed
commit
35b202d6fe
@ -7,6 +7,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=435441
|
||||
<title>Test for Bug 435441</title>
|
||||
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
||||
<script type="text/javascript" src="property_database.js"></script>
|
||||
<script type="text/javascript" src="animation_utils.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
|
||||
<style type="text/css">
|
||||
|
||||
@ -268,7 +269,6 @@ is(c_rot_15.substring(0,6), "matrix", "should compute to matrix value");
|
||||
var c_rot_60 = computeMatrix("rotate(60deg)");
|
||||
is(c_rot_60.substring(0,6), "matrix", "should compute to matrix value");
|
||||
|
||||
var transformTestIndex = 0;
|
||||
var transformTests = [
|
||||
// rotate
|
||||
{ start: 'none', end: 'rotate(60deg)',
|
||||
@ -353,8 +353,7 @@ var transformTests = [
|
||||
{ start: 'translateY(-40%)', end: 'none',
|
||||
expected_uncomputed: 'translateY(-30%)',
|
||||
expected: 'matrix(1, 0, 0, 1, 0, -15)',
|
||||
round_error_ok: true,
|
||||
big_omta_round_error: true },
|
||||
round_error_ok: true },
|
||||
{ start: 'none', end: 'rotate(90deg) translate(20%, 20%) rotate(-90deg)',
|
||||
expected_uncomputed: 'rotate(22.5deg) translate(5%, 5%) rotate(-22.5deg)',
|
||||
round_error_ok: true },
|
||||
@ -377,12 +376,10 @@ var transformTests = [
|
||||
{ start: 'translateX(20%)', /* 60px */
|
||||
end: 'translateX(calc(10% + 1em))', /* 30px + 20px = 50px */
|
||||
expected_uncomputed: 'translateX(calc(17.5% + 0.25em))',
|
||||
expected: 'matrix(1, 0, 0, 1, 57.5, 0)',
|
||||
big_omta_round_error: true },
|
||||
expected: 'matrix(1, 0, 0, 1, 57.5, 0)' },
|
||||
{ start: 'translate(calc(0.75 * 3em + 1.5 * 10%), calc(0.5 * 5em + 0.5 * 8%))', /* 90px, 52px */
|
||||
end: 'rotate(90deg) translateY(20%) rotate(90deg) translateY(calc(10% + 0.5em)) rotate(180deg)', /* -10px, -15px */
|
||||
expected: 'matrix(1, 0, 0, 1, 65, 35.25)',
|
||||
big_omta_round_error: true },
|
||||
expected: 'matrix(1, 0, 0, 1, 65, 35.25)' },
|
||||
|
||||
// scale
|
||||
{ start: 'scale(2)', end: 'none',
|
||||
@ -1934,20 +1931,34 @@ function test_transform_transition(prop) {
|
||||
|
||||
// FIXME: should perhaps test that no clamping occurs
|
||||
|
||||
// These tests check the computed value 2/3 of the way through the transition
|
||||
OMTAdiv.style.setProperty("transition-duration", "300s", "");
|
||||
OMTAdiv.style.setProperty("transition-timing-function", "linear", "");
|
||||
window.requestAnimationFrame(nextAsyncTransformTest);
|
||||
runOMTATest(runAsyncTests, SimpleTest.finish);
|
||||
}
|
||||
|
||||
function nextAsyncTransformTest()
|
||||
{
|
||||
var test = transformTests[transformTestIndex];
|
||||
function runAsyncTests() {
|
||||
// These tests check the value on the compositor 2/3rds of the way through
|
||||
// the transition.
|
||||
// For the transform tests we simply compare the value on the compositor
|
||||
// with the computed value, but for the opacity test we check the absolute
|
||||
// value as well.
|
||||
OMTAdiv.style.setProperty("transition-duration", "300s", "");
|
||||
OMTAdiv.style.setProperty("transition-timing-function", "linear", "");
|
||||
addAsyncTransformTests();
|
||||
addAsyncOpacityTest();
|
||||
|
||||
if (transformTestIndex >= transformTests.length) {
|
||||
window.requestAnimationFrame(asyncOpacityTest);
|
||||
runAllAsyncAnimTests().then(SimpleTest.finish);
|
||||
}
|
||||
|
||||
function addAsyncTransformTests() {
|
||||
transformTests.forEach(function(test) {
|
||||
addAsyncAnimTest(function () { return runTransformTest(test); } );
|
||||
});
|
||||
}
|
||||
|
||||
function *runTransformTest(test) {
|
||||
// Skip the following test for now.
|
||||
// We'll work around this properly in a subsequent patch in this queue.
|
||||
if (test.start == "skew(45deg, 45deg)")
|
||||
return;
|
||||
}
|
||||
|
||||
OMTAdiv.style.setProperty("transition-property", "none", "");
|
||||
OMTAdiv.style.setProperty("transform", test.start, "");
|
||||
@ -1955,57 +1966,37 @@ function nextAsyncTransformTest()
|
||||
OMTAdiv.style.setProperty("transition-property", "transform", "");
|
||||
OMTAdiv.style.setProperty("transform", test.end, "");
|
||||
OMTACs.getPropertyValue("transform");
|
||||
yield waitForPaints();
|
||||
|
||||
window.requestAnimationFrame(checkAsyncTransformTest);
|
||||
}
|
||||
|
||||
function checkAsyncTransformTest() {
|
||||
function s(matrix) {
|
||||
return matrix.replace(/^\w*\(/, '').replace(')','').split(/\s*,\s*/);
|
||||
}
|
||||
winUtils.advanceTimeAndRefresh(200000);
|
||||
var test = transformTests[transformTestIndex];
|
||||
var async_transform = winUtils.getOMTAOrComputedStyle(OMTAdiv, "transform");
|
||||
var computed_transform = OMTACs.getPropertyValue("transform");
|
||||
var async_split = s(async_transform);
|
||||
var cs_split = s(computed_transform);
|
||||
var pass = true;
|
||||
for (var j = 0; j < 16; ++j) {
|
||||
var epsilon = test.big_omta_round_error ? 0.1 : 0.0001;
|
||||
if (Math.abs(Number(async_split[j]) - Number(cs_split[j])) > epsilon) {
|
||||
pass = false;
|
||||
}
|
||||
}
|
||||
ok(pass,
|
||||
"interpolation of transitions: " + test.start + " to " + test.end +
|
||||
": OMTA - " + async_transform + ", computed style - " + computed_transform);
|
||||
transformTestIndex++;
|
||||
winUtils.restoreNormalRefresh();
|
||||
window.requestAnimationFrame(nextAsyncTransformTest);
|
||||
|
||||
omta_is_approx(OMTAdiv, "transform", OMTACs.getPropertyValue("transform"),
|
||||
0.0001, RunningOn.Compositor,
|
||||
"compositor transform transition " +
|
||||
"from '" + test.start + "' " +
|
||||
"to '" + test.end + "' " +
|
||||
"at 2/3rds duration matches computed style");
|
||||
}
|
||||
|
||||
function asyncOpacityTest() {
|
||||
OMTAdiv.style.setProperty("transition-property", "none", "");
|
||||
OMTAdiv.style.setProperty("opacity", 0, "");
|
||||
OMTACs.getPropertyValue("opacity");
|
||||
OMTAdiv.style.setProperty("transition-property", "opacity", "");
|
||||
OMTAdiv.style.setProperty("opacity", 1, "");
|
||||
OMTACs.getPropertyValue("opacity");
|
||||
function addAsyncOpacityTest() {
|
||||
addAsyncAnimTest(function *() {
|
||||
OMTAdiv.style.setProperty("transition-property", "none", "");
|
||||
OMTAdiv.style.setProperty("opacity", 0, "");
|
||||
OMTACs.getPropertyValue("opacity");
|
||||
OMTAdiv.style.setProperty("transition-property", "opacity", "");
|
||||
OMTAdiv.style.setProperty("opacity", 1, "");
|
||||
OMTACs.getPropertyValue("opacity");
|
||||
|
||||
window.requestAnimationFrame(checkAsyncOpacityTest);
|
||||
yield waitForPaints();
|
||||
|
||||
winUtils.advanceTimeAndRefresh(200000);
|
||||
|
||||
omta_is_approx(OMTAdiv, "opacity", 0.00001, 2/3, RunningOn.Compositor,
|
||||
"compositor opacity transition at 2/3rds duration");
|
||||
|
||||
OMTAdiv.style.removeProperty("transition");
|
||||
});
|
||||
}
|
||||
|
||||
function checkAsyncOpacityTest() {
|
||||
winUtils.advanceTimeAndRefresh(200000);
|
||||
var async_opacity = winUtils.getOMTAOrComputedStyle(OMTAdiv, "opacity");
|
||||
var computed_opacity = OMTACs.getPropertyValue("opacity");
|
||||
is(async_opacity, computed_opacity,
|
||||
"Async animated opacity should match computed opacity");
|
||||
winUtils.restoreNormalRefresh();
|
||||
OMTAdiv.style.removeProperty("transition");
|
||||
SimpleTest.finish();
|
||||
}
|
||||
|
||||
</script>
|
||||
</pre>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user