/*
* Copyright (C) 2015 Google Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
* met:
*
* * Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* * Redistributions in binary form must reproduce the above
* copyright notice, this list of conditions and the following disclaimer
* in the documentation and/or other materials provided with the
* distribution.
* * Neither the name of Google Inc. nor the names of its
* contributors may be used to endorse or promote products derived from
* this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
* "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
* LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
* A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
* OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
* LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
* DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
* THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
/*
* This script is intended to be used for constructing layout tests which
* exercise the interpolation functionaltiy of the animation system.
* Tests which run using this script should be portable across browsers.
*
* The following functions are exported:
* - assertInterpolation({property, from, to, [method]}, [{at: fraction, is: value}])
* Constructs a test case for each fraction that asserts the expected value
* equals the value produced by interpolation between from and to using
* CSS Animations, CSS Transitions and Web Animations. If the method option is
* specified then only that interpolation method will be used.
* - assertNoInterpolation({property, from, to, [method]})
* This works in the same way as assertInterpolation with expectations auto
* generated according to each interpolation method's handling of values
* that don't interpolate.
* - assertComposition(
* { property, underlying, [accumulateFrom], [accumulateTo],
* [addFrom], [addTo], [replaceFrom], [replaceTo] },
* [{at: fraction, is: value}])
* Similar to assertInterpolation() instead using only the Web Animations API
* to animate composite specified keyframes (accumulate, add or replace) on
* top of an underlying value.
* Exactly one of (accumulateFrom, addFrom, replaceFrom) must be specified.
* Exactly one of (accumulateTo, addTo, replaceTo) must be specified.
* - afterTest(callback)
* Calls callback after all the tests have executed.
*
* The following object is exported:
* - neutralKeyframe
* Can be used as the from/to value to use a neutral keyframe.
*/
'use strict';
(function() {
var interpolationTests = [];
var compositionTests = [];
var cssAnimationsData = {
sharedStyle: null,
nextID: 0,
};
var webAnimationsEnabled = typeof Element.prototype.animate === 'function';
var expectNoInterpolation = {};
var afterTestHook = function() {};
var neutralKeyframe = {};
function isNeutralKeyframe(keyframe) {
return keyframe === neutralKeyframe;
}
var cssAnimationsInterpolation = {
name: 'CSS Animations',
supportsProperty: function() {return true;},
supportsValue: function() {return true;},
setup: function() {},
nonInterpolationExpectations: function(from, to) {
return expectFlip(from, to, 0.5);
},
interpolate: function(property, from, to, at, target) {
var id = cssAnimationsData.nextID++;
if (!cssAnimationsData.sharedStyle) {
cssAnimationsData.sharedStyle = createElement(document.body, 'style');
}
cssAnimationsData.sharedStyle.textContent += '' +
'@keyframes animation' + id + ' {' +
(isNeutralKeyframe(from) ? '' : `from {${property}:${from};}`) +
(isNeutralKeyframe(to) ? '' : `to {${property}:${to};}`) +
'}';
target.style.animationName = 'animation' + id;
target.style.animationDuration = '2e10s';
target.style.animationDelay = '-1e10s';
target.style.animationTimingFunction = createEasing(at);
},
rebaseline: false,
};
var cssTransitionsInterpolation = {
name: 'CSS Transitions',
supportsProperty: function() {return true;},
supportsValue: function() {return true;},
setup: function(property, from, target) {
target.style.setProperty(property, isNeutralKeyframe(from) ? '' : from);
},
nonInterpolationExpectations: function(from, to) {
return expectFlip(from, to, -Infinity);
},
interpolate: function(property, from, to, at, target) {
target.style.transitionDuration = '2e10s';
target.style.transitionDelay = '-1e10s';
target.style.transitionTimingFunction = createEasing(at);
target.style.transitionProperty = property;
target.style.setProperty(property, isNeutralKeyframe(to) ? '' : to);
},
rebaseline: false,
};
var cssTransitionAllInterpolation = {
name: 'CSS Transitions with transition: all',
supportsProperty: function(property) {return property.indexOf('--') !== 0;},
supportsValue: function() {return true;},
setup: function(property, from, target) {
target.style.setProperty(property, isNeutralKeyframe(from) ? '' : from);
},
nonInterpolationExpectations: function(from, to) {
return expectFlip(from, to, -Infinity);
},
interpolate: function(property, from, to, at, target) {
target.style.transitionDuration = '2e10s';
target.style.transitionDelay = '-1e10s';
target.style.transitionTimingFunction = createEasing(at);
target.style.transitionProperty = 'all';
target.style.setProperty(property, isNeutralKeyframe(to) ? '' : to);
},
rebaseline: false,
};
var webAnimationsInterpolation = {
name: 'Web Animations',
supportsProperty: function(property) {return property.indexOf('-webkit-') !== 0;},
supportsValue: function(value) {return value !== '';},
setup: function() {},
nonInterpolationExpectations: function(from, to) {
return expectFlip(from, to, 0.5);
},
interpolate: function(property, from, to, at, target) {
this.interpolateComposite(property, from, 'replace', to, 'replace', at, target);
},
interpolateComposite: function(property, from, fromComposite, to, toComposite, at, target) {
// Convert standard properties to camelCase.
if (!property.startsWith('--')) {
for (var i = property.length - 2; i > 0; --i) {
if (property[i] === '-') {
property = property.substring(0, i) + property[i + 1].toUpperCase() + property.substring(i + 2);
}
}
if (property === 'offset')
property = 'cssOffset';
else if (property === 'float')
property = 'cssFloat';
}
var keyframes = [];
if (!isNeutralKeyframe(from)) {
keyframes.push({
offset: 0,
composite: fromComposite,
[property]: from,
});
}
if (!isNeutralKeyframe(to)) {
keyframes.push({
offset: 1,
composite: toComposite,
[property]: to,
});
}
var animation = target.animate(keyframes, {
fill: 'forwards',
duration: 1,
easing: createEasing(at),
});
animation.pause();
animation.currentTime = 0.5;
},
rebaseline: false,
};
function expectFlip(from, to, flipAt) {
return [-0.3, 0, 0.3, 0.5, 0.6, 1, 1.5].map(function(at) {
return {
at: at,
is: at < flipAt ? from : to
};
});
}
// Constructs a timing function which produces 'y' at x = 0.5
function createEasing(y) {
// FIXME: if 'y' is > 0 and < 1 use a linear timing function and allow
// 'x' to vary. Use a bezier only for values < 0 or > 1.
if (y == 0) {
return 'steps(1, end)';
}
if (y == 1) {
return 'steps(1, start)';
}
if (y == 0.5) {
return 'steps(2, end)';
}
// Approximate using a bezier.
var b = (8 * y - 1) / 6;
return 'cubic-bezier(0, ' + b + ', 1, ' + b + ')';
}
function createElement(parent, tag, text) {
var element = document.createElement(tag || 'div');
element.textContent = text || '';
parent.appendChild(element);
return element;
}
function loadScript(url) {
return new Promise(function(resolve) {
var script = document.createElement('script');
script.src = url;
script.onload = resolve;
document.head.appendChild(script);
});
}
function toCamelCase(property) {
var i = property.length;
while ((i = property.lastIndexOf('-', i - 1)) !== -1) {
property = property.substring(0, i) + property[i + 1].toUpperCase() + property.substring(i + 2);
}
return property;
}
function createTargetContainer(parent, className) {
var targetContainer = createElement(parent);
targetContainer.classList.add('container');
var template = document.querySelector('#target-template');
if (template) {
targetContainer.appendChild(template.content.cloneNode(true));
}
var target = targetContainer.querySelector('.target') || targetContainer;
target.classList.add('target', className);
target.parentElement.classList.add('parent');
targetContainer.target = target;
return targetContainer;
}
function roundNumbers(value) {
return value.
// Round numbers to two decimal places.
replace(/-?\d*\.\d+(e-?\d+)?/g, function(n) {
return (parseFloat(n).toFixed(2)).
replace(/\.\d+/, function(m) {
return m.replace(/0+$/, '');
}).
replace(/\.$/, '').
replace(/^-0$/, '0');
});
}
var anchor = document.createElement('a');
function sanitizeUrls(value) {
var matches = value.match(/url\("([^#][^\)]*)"\)/g);
if (matches !== null) {
for (var i = 0; i < matches.length; ++i) {
var url = /url\("([^#][^\)]*)"\)/g.exec(matches[i])[1];
anchor.href = url;
anchor.pathname = '...' + anchor.pathname.substring(anchor.pathname.lastIndexOf('/'));
value = value.replace(matches[i], 'url(' + anchor.href + ')');
}
}
return value;
}
function normalizeValue(value) {
return roundNumbers(sanitizeUrls(value)).
// Place whitespace between tokens.
replace(/([\w\d.]+|[^\s])/g, '$1 ').
replace(/\s+/g, ' ');
}
function assertNoInterpolation(options) {
assertInterpolation(options, expectNoInterpolation);
}
function assertInterpolation(options, expectations) {
interpolationTests.push({options, expectations});
}
function assertComposition(options, expectations) {
compositionTests.push({options, expectations});
}
function stringify(text) {
if (!text.includes("'")) {
return `'${text}'`;
}
return `"${text.replace('"', '\\"')}"`;
}
function keyframeText(keyframe) {
return isNeutralKeyframe(keyframe) ? 'neutral' : `[${keyframe}]`;
}
function keyframeCode(keyframe) {
return isNeutralKeyframe(keyframe) ? 'neutralKeyframe' : `${stringify(keyframe)}`;
}
function createInterpolationTestTargets(interpolationMethod, interpolationMethodContainer, interpolationTest, rebaselineContainer) {
var property = interpolationTest.options.property;
var from = interpolationTest.options.from;
var to = interpolationTest.options.to;
if ((interpolationTest.options.method && interpolationTest.options.method != interpolationMethod.name)
|| !interpolationMethod.supportsProperty(property)
|| !interpolationMethod.supportsValue(from)
|| !interpolationMethod.supportsValue(to)) {
return;
}
if (interpolationMethod.rebaseline) {
var rebaseline = createElement(rebaselineContainer, 'pre');
rebaseline.appendChild(document.createTextNode(`\
assertInterpolation({
property: '${property}',
from: ${keyframeCode(from)},
to: ${keyframeCode(to)},
}, [\n`));
var rebaselineExpectation;
rebaseline.appendChild(rebaselineExpectation = document.createTextNode(''));
rebaseline.appendChild(document.createTextNode(']);\n\n'));
}
var testText = `${interpolationMethod.name}: property <${property}> from ${keyframeText(from)} to ${keyframeText(to)}`;
var testContainer = createElement(interpolationMethodContainer, 'div', testText);
createElement(testContainer, 'br');
var expectations = interpolationTest.expectations;
if (expectations === expectNoInterpolation) {
expectations = interpolationMethod.nonInterpolationExpectations(from, to);
}
return expectations.map(function(expectation) {
var actualTargetContainer = createTargetContainer(testContainer, 'actual');
var expectedTargetContainer = createTargetContainer(testContainer, 'expected');
if (!isNeutralKeyframe(expectation.is)) {
expectedTargetContainer.target.style.setProperty(property, expectation.is);
}
var target = actualTargetContainer.target;
interpolationMethod.setup(property, from, target);
target.interpolate = function() {
interpolationMethod.interpolate(property, from, to, expectation.at, target);
};
target.measure = function() {
var actualValue = getComputedStyle(target).getPropertyValue(property);
test(function() {
assert_equals(
normalizeValue(actualValue),
normalizeValue(getComputedStyle(expectedTargetContainer.target).getPropertyValue(property)));
}, `${testText} at (${expectation.at}) is [${sanitizeUrls(actualValue)}]`);
if (rebaselineExpectation) {
rebaselineExpectation.textContent += ` {at: ${expectation.at}, is: ${stringify(actualValue)}},\n`;
}
};
return target;
});
}
function createCompositionTestTargets(compositionContainer, compositionTest, rebaselineContainer) {
var options = compositionTest.options;
var property = options.property;
var underlying = options.underlying;
var from = options.accumulateFrom || options.addFrom || options.replaceFrom;
var to = options.accumulateTo || options.addTo || options.replaceTo;
var fromComposite = 'accumulateFrom' in options ? 'accumulate' : 'addFrom' in options ? 'add' : 'replace';
var toComposite = 'accumulateTo' in options ? 'accumulate' : 'addTo' in options ? 'add' : 'replace';
const invalidFrom = 'addFrom' in options === 'replaceFrom' in options
&& 'addFrom' in options === 'accumulateFrom' in options;
const invalidTo = 'addTo' in options === 'replaceTo' in options
&& 'addTo' in options === 'accumulateTo' in options;
if (invalidFrom || invalidTo) {
test(function() {
assert_false(invalidFrom, 'Exactly one of accumulateFrom, addFrom, or replaceFrom must be specified');
assert_false(invalidTo, 'Exactly one of accumulateTo, addTo, or replaceTo must be specified');
}, `Composition tests must have valid setup`);
}
validateTestInputs(property, from, to, underlying);
if (webAnimationsInterpolation.rebaseline) {
var rebaseline = createElement(rebaselineContainer, 'pre');
rebaseline.appendChild(document.createTextNode(`\
assertComposition({
property: '${property}',
underlying: '${stringify(underlying)}',
${fromComposite}From: '${stringify(from)}',
${toComposite}To: '${stringify(to)}',
}, [\n`));
var rebaselineExpectation;
rebaseline.appendChild(rebaselineExpectation = document.createTextNode(''));
rebaseline.appendChild(document.createTextNode(']);\n\n'));
}
var testText = `Compositing: property <${property}> underlying [${underlying}] from ${fromComposite} [${from}] to ${toComposite} [${to}]`;
var testContainer = createElement(compositionContainer, 'div', testText);
createElement(testContainer, 'br');
return compositionTest.expectations.map(function(expectation) {
var actualTargetContainer = createTargetContainer(testContainer, 'actual');
var expectedTargetContainer = createTargetContainer(testContainer, 'expected');
expectedTargetContainer.target.style.setProperty(property, expectation.is);
var target = actualTargetContainer.target;
target.style.setProperty(property, underlying);
target.interpolate = function() {
webAnimationsInterpolation.interpolateComposite(property, from, fromComposite, to, toComposite, expectation.at, target);
};
target.measure = function() {
var actualValue = getComputedStyle(target).getPropertyValue(property);
test(function() {
assert_equals(
normalizeValue(actualValue),
normalizeValue(getComputedStyle(expectedTargetContainer.target).getPropertyValue(property)));
}, `${testText} at (${expectation.at}) is [${sanitizeUrls(actualValue)}]`);
if (rebaselineExpectation) {
rebaselineExpectation.textContent += ` {at: ${expectation.at}, is: ${stringify(actualValue)}},\n`;
}
};
return target;
});
}
function validateTestInputs(property, from, to, underlying) {
if (from && from !== neutralKeyframe && !CSS.supports(property, from)) {
test(function() {
assert_unreached('from value not supported');
}, `${property} supports [${from}]`);
}
if (to && to !== neutralKeyframe && !CSS.supports(property, to)) {
test(function() {
assert_unreached('to value not supported');
}, `${property} supports [${to}]`);
}
if (typeof underlying !== 'undefined' && !CSS.supports(property, underlying)) {
test(function() {
assert_unreached('underlying value not supported');
}, `${property} supports [${underlying}]`);
}
}
function createTestTargets(interpolationMethods, interpolationTests, compositionTests, container, rebaselineContainer) {
var targets = [];
for (var interpolationTest of interpolationTests) {
validateTestInputs(interpolationTest.options.property, interpolationTest.options.from, interpolationTest.options.to);
}
for (var interpolationMethod of interpolationMethods) {
var interpolationMethodContainer = createElement(container);
for (var interpolationTest of interpolationTests) {
[].push.apply(targets, createInterpolationTestTargets(interpolationMethod, interpolationMethodContainer, interpolationTest, rebaselineContainer));
}
}
var compositionContainer = createElement(container);
for (var compositionTest of compositionTests) {
[].push.apply(targets, createCompositionTestTargets(compositionContainer, compositionTest, rebaselineContainer));
}
return targets;
}
function runTests() {
var interpolationMethods = [
cssTransitionsInterpolation,
cssTransitionAllInterpolation,
cssAnimationsInterpolation,
];
if (webAnimationsEnabled) {
interpolationMethods.push(webAnimationsInterpolation);
}
var rebaselineContainer = createElement(document.body);
var container = createElement(document.body);
var targets = createTestTargets(interpolationMethods, interpolationTests, compositionTests, container, rebaselineContainer);
getComputedStyle(document.documentElement).left; // Force a style recalc for transitions.
// Separate interpolation and measurement into different phases to avoid O(n^2) of the number of targets.
for (var target of targets) {
target.interpolate();
}
for (var target of targets) {
target.measure();
}
if (window.testRunner) {
container.remove();
}
afterTestHook();
}
function afterTest(f) {
afterTestHook = f;
}
loadScript('../../resources/testharness.js').then(function() {
return loadScript('../../resources/testharnessreport.js');
}).then(function() {
var asyncHandle = async_test('This test uses interpolation-test.js.')
requestAnimationFrame(function() {
runTests();
asyncHandle.done()
});
});
window.assertInterpolation = assertInterpolation;
window.assertNoInterpolation = assertNoInterpolation;
window.assertComposition = assertComposition;
window.afterTest = afterTest;
window.neutralKeyframe = neutralKeyframe;
})();
Codebase Browser
chromium