Skip to content

GitLab

T
tangled
Commit 2ad15546 authored by haozhe's avatar haozhe Committed by Commit Bot
Browse files
Options

Make interpolation-testcommon.js support composition 

Port font-variation-settings-composition

Add composition test ability to external/wpt.
The Chrome passes all tests.
Firefox has a bug which give the output in reverse order.


Bug: 1034538
Change-Id: Ib71fc2518008144f7002eee95bff57fe90e05cce
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1965910Reviewed-by: default avatarXida Chen <xidachen@chromium.org>
Commit-Queue: Hao Sheng <haozhes@chromium.org>
Cr-Commit-Position: refs/heads/master@{#725575}
parent a0cb0e37
Hide whitespace changes
Inline Side-by-side
Showing with 179 additions and 90 deletions
third_party/blink/web_tests/animations/composition/font-variation-settings-composition.html deleted 100644 → 0
View file @ a0cb0e37
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
assertComposition({
property: 'font-variation-settings',
underlying: '"'test' 50"',
addFrom: '"'test' 100"',
addTo: '"'test' 200"',
}, [
{at: -0.3, is: "'test' 120"},
{at: 0, is: "'test' 150"},
{at: 0.5, is: "'test' 200"},
{at: 1, is: "'test' 250"},
{at: 1.5, is: "'test' 300"},
]);
assertComposition({
property: 'font-variation-settings',
underlying: '"'test' 50"',
addFrom: '"'test' 100"',
replaceTo: '"'test' 200"',
}, [
{at: -0.3, is: "'test' 135"},
{at: 0, is: "'test' 150"},
{at: 0.5, is: "'test' 175"},
{at: 1, is: "'test' 200"},
{at: 1.5, is: "'test' 225"},
]);
assertComposition({
property: 'font-variation-settings',
underlying: '"'test' 100"',
addFrom: ''normal'',
replaceTo: '"'test' 200"',
}, [
{at: -0.3, is: 'normal'},
{at: 0, is: 'normal'},
{at: 0.5, is: "'test' 200"},
{at: 1, is: "'test' 200"},
{at: 1.5, is: "'test' 200"},
]);
assertComposition({
property: 'font-variation-settings',
underlying: '"'test' 100"',
addFrom: ''normal'',
addTo: '"'test' 200"',
}, [
{at: -0.3, is: 'normal'},
{at: 0, is: 'normal'},
{at: 0.5, is: "'test' 300"},
{at: 1, is: "'test' 300"},
{at: 1.5, is: "'test' 300"},
]);
assertComposition({
property: 'font-variation-settings',
underlying: '"'aaaa' 100, 'bbbb' 200"',
addFrom: '"'aaaa' 20, 'bbbb' 50"',
addTo: '"'aaaa' 30, 'bbbb' 100"',
}, [
{at: -0.3, is: "'aaaa' 117, 'bbbb' 235"},
{at: 0, is: "'aaaa' 120, 'bbbb' 250"},
{at: 0.5, is: "'aaaa' 125, 'bbbb' 275"},
{at: 1, is: "'aaaa' 230, 'bbbb' 300"},
{at: 1.5, is: "'aaaa' 235, 'bbbb' 325"},
]);
assertComposition({
property: 'font-variation-settings',
underlying: '"'test' 100"',
addFrom: '"'aaaa' 20, 'bbbb' 50"',
addTo: '"'aaaa' 30, 'bbbb' 100"',
}, [
{at: -0.3, is: "'aaaa' 17, 'bbbb' 35"},
{at: 0, is: "'aaaa' 20, 'bbbb' 50"},
{at: 0.5, is: "'aaaa' 25, 'bbbb' 75"},
{at: 1, is: "'aaaa' 30, 'bbbb' 100"},
{at: 1.5, is: "'aaaa' 35, 'bbbb' 125"},
]);
</script>
</body>
third_party/blink/web_tests/external/wpt/css/css-fonts/animations/font-variation-settings-composition.html 0 → 100644
View file @ 2ad15546
<!DOCTYPE html>
<meta charset="UTF-8">
<title>font-variation-settings composition</title>
<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-variation-settings">
<meta name="assert" content="font-variation-settings supports animation pairwise by 'like' properties">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body></body>
<script>
test_composition({
property: 'font-variation-settings',
underlying: "'test' 50",
addFrom: "'test' 100",
addTo: "'test' 200",
}, [
{at: -0.3, expect: "'test' 120"},
{at: 0, expect: "'test' 150"},
{at: 0.5, expect: "'test' 200"},
{at: 1, expect: "'test' 250"},
{at: 1.5, expect: "'test' 300"},
]);
test_composition({
property: 'font-variation-settings',
underlying: "'test' 50",
addFrom: "'test' 100",
replaceTo: "'test' 200",
}, [
{at: -0.3, expect: "'test' 135"},
{at: 0, expect: "'test' 150"},
{at: 0.5, expect: "'test' 175"},
{at: 1, expect: "'test' 200"},
{at: 1.5, expect: "'test' 225"},
]);
test_composition({
property: 'font-variation-settings',
underlying: "'test' 100",
addFrom: 'normal',
replaceTo: "'test' 200",
}, [
{at: -0.3, expect: 'normal'},
{at: 0, expect: 'normal'},
{at: 0.5, expect: "'test' 200"},
{at: 1, expect: "'test' 200"},
{at: 1.5, expect: "'test' 200"},
]);
test_composition({
property: 'font-variation-settings',
underlying: "'test' 100",
addFrom: 'normal',
addTo: "'test' 200",
}, [
{at: -0.3, expect: 'normal'},
{at: 0, expect: 'normal'},
{at: 0.5, expect: "'test' 300"},
{at: 1, expect: "'test' 300"},
{at: 1.5, expect: "'test' 300"},
]);
test_composition({
property: 'font-variation-settings',
underlying: "'aaaa' 100, 'bbbb' 200",
addFrom: "'aaaa' 20, 'bbbb' 50",
addTo: "'aaaa' 30, 'bbbb' 100",
}, [
{at: -0.3, expect: "'aaaa' 117, 'bbbb' 235"},
{at: 0, expect: "'aaaa' 120, 'bbbb' 250"},
{at: 0.5, expect: "'aaaa' 125, 'bbbb' 275"},
{at: 1, expect: "'aaaa' 130, 'bbbb' 300"},
{at: 1.5, expect: "'aaaa' 135, 'bbbb' 325"},
]);
test_composition({
property: 'font-variation-settings',
underlying: "'test' 100",
addFrom: "'aaaa' 20, 'bbbb' 50",
addTo: "'aaaa' 30, 'bbbb' 100",
}, [
{at: -0.3, expect: "'aaaa' 17, 'bbbb' 35"},
{at: 0, expect: "'aaaa' 20, 'bbbb' 50"},
{at: 0.5, expect: "'aaaa' 25, 'bbbb' 75"},
{at: 1, expect: "'aaaa' 30, 'bbbb' 100"},
{at: 1.5, expect: "'aaaa' 35, 'bbbb' 125"},
]);
</script>
</body>
third_party/blink/web_tests/external/wpt/css/support/interpolation-testcommon.js
View file @ 2ad15546
'use strict';
(function() {
var interpolationTests = [];
var compositionTests = [];
var cssAnimationsData = {
sharedStyle: null,
nextID: 0,
......@@ -301,7 +302,75 @@
});
}
function createTestTargets(interpolationMethods, interpolationTests, container) {
function createCompositionTestTargets(compositionContainer, compositionTest) {
var options = compositionTest.options;
var property = options.property;
var underlying = options.underlying;
var comparisonFunction = options.comparisonFunction;
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`);
}
var testText = `Compositing: property <${property}> underlying [${underlying}] from ${fromComposite} [${from}] to ${toComposite} [${to}]`;
var testContainer = createElement(compositionContainer, 'div');
createElement(testContainer);
// Setup a standard equality function if an override is not provided.
if (!comparisonFunction) {
comparisonFunction = (actual, expected) => {
assert_equals(normalizeValue(actual), normalizeValue(expected));
};
}
return compositionTest.expectations.map(function(expectation) {
var actualTargetContainer = createTargetContainer(testContainer, 'actual');
var expectedTargetContainer = createTargetContainer(testContainer, 'expected');
var expectedStr = expectation.option || expectation.expect;
if (!isNeutralKeyframe(expectedStr)) {
expectedTargetContainer.target.style.setProperty(property, expectedStr);
}
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 expectedValue = getComputedStyle(expectedTargetContainer.target).getPropertyValue(property);
test(function() {
if (from && from !== neutralKeyframe) {
assert_true(CSS.supports(property, from), '\'from\' value should be supported');
}
if (to && to !== neutralKeyframe) {
assert_true(CSS.supports(property, to), '\'to\' value should be supported');
}
if (typeof underlying !== 'undefined') {
assert_true(CSS.supports(property, underlying), '\'underlying\' value should be supported');
}
comparisonFunction(
getComputedStyle(target).getPropertyValue(property),
expectedValue);
}, `${testText} at (${expectation.at}) should be [${sanitizeUrls(expectedStr)}]`);
};
return target;
});
}
function createTestTargets(interpolationMethods, interpolationTests, compositionTests, container) {
var targets = [];
for (var interpolationMethod of interpolationMethods) {
var interpolationMethodContainer = createElement(container);
......@@ -309,15 +378,17 @@
[].push.apply(targets, createInterpolationTestTargets(interpolationMethod, interpolationMethodContainer, interpolationTest));
}
}
var compositionContainer = createElement(container);
for (var compositionTest of compositionTests) {
[].push.apply(targets, createCompositionTestTargets(compositionContainer, compositionTest));
}
return targets;
}
function test_no_interpolation(options) {
test_interpolation(options, expectNoInterpolation);
}
function test_interpolation(options, expectations) {
interpolationTests.push({options, expectations});
function create_tests() {
var interpolationMethods = [
cssTransitionsInterpolation,
cssTransitionAllInterpolation,
......@@ -325,7 +396,7 @@
webAnimationsInterpolation,
];
var container = createElement(document.body);
var targets = createTestTargets(interpolationMethods, interpolationTests, container);
var targets = createTestTargets(interpolationMethods, interpolationTests, compositionTests, container);
// Separate interpolation and measurement into different phases to avoid O(n^2) of the number of targets.
for (var target of targets) {
target.interpolate();
......@@ -334,10 +405,20 @@
target.measure();
}
container.remove();
interpolationTests = [];
}
function test_interpolation(options, expectations) {
interpolationTests.push({options, expectations});
create_tests();
interpolationTests = [];
}
function test_composition(options, expectations) {
compositionTests.push({options, expectations});
create_tests();
compositionTests = [];
}
window.test_interpolation = test_interpolation;
window.test_no_interpolation = test_no_interpolation;
window.test_composition = test_composition;
window.neutralKeyframe = neutralKeyframe;
})();
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment