Skip to content

GitLab

T
tangled
Commit 28f1aff3 authored by Stephen McGruer's avatar Stephen McGruer Committed by Commit Bot
Browse files
Options

Fix font-variation-settings interpolation test 

font-variation-settings is a map, not an array, so the order is
irrelevant when comparing the actual and expected values. Add the
ability to supply a custom comparison function to
interpolation-testcommon.js to support properties like this.

This also exposed one test which incorrectly asserted no interpolation
when there should be interpolation.

Bug: 900581
Change-Id: I6c336e010c9c3642b14c945b3d7ae828f94b3f99
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1764801
Commit-Queue: Stephen McGruer <smcgruer@chromium.org>
Reviewed-by: default avatarXida Chen <xidachen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#689924}
parent 189abdb0
Expand all Show whitespace changes
Inline Side-by-side
Showing with 348 additions and 17 deletions
third_party/blink/web_tests/external/wpt/css/css-fonts/animations/font-variation-settings-interpolation.html
View file @ 28f1aff3
......@@ -20,10 +20,24 @@
<body></body>
<script>
// Because font-variation-settings is specced as a map rather than a list
// (https://github.com/w3c/csswg-drafts/issues/1959), browsers are allowed to
// reorder the output as they see fit.
function compareFontVariationSettings(actual, expected) {
// This is not perfect, but should serve as a reasonable comparison. We split
// the inputs into arrays and trim each characteristic, then sort the array
// and compare them.
const actual_arr = actual.split(',').map(x => x.trim()).sort();
const expected_arr = expected.split(',').map(x => x.trim()).sort();
assert_array_equals(actual_arr, expected_arr);
}
test_interpolation({
property: 'font-variation-settings',
from: neutralKeyframe,
to: '"test" 20',
comparisonFunction: compareFontVariationSettings,
}, [
{at: -0.5, expect: "'test' 5"},
{at: 0, expect: "'test' 10"},
......@@ -43,6 +57,7 @@ test_interpolation({
property: 'font-variation-settings',
from: 'inherit',
to: "'test' 20",
comparisonFunction: compareFontVariationSettings,
}, [
{at: -0.5, expect: "'test' 35"},
{at: 0, expect: "'test' 30"},
......@@ -56,6 +71,7 @@ test_interpolation({
property: 'font-variation-settings',
from: 'unset',
to: "'test' 20",
comparisonFunction: compareFontVariationSettings,
}, [
{at: -0.5, expect: "'test' 35"},
{at: 0, expect: "'test' 30"},
......@@ -75,6 +91,7 @@ test_interpolation({
property: 'font-variation-settings',
from: "'test' 20",
to: "'test' 30",
comparisonFunction: compareFontVariationSettings,
}, [
{at: -0.5, expect: "'test' 15"},
{at: 0, expect: "'test' 20"},
......@@ -88,6 +105,7 @@ test_interpolation({
property: 'font-variation-settings',
from: "'aaaa' 0, 'bbbb' 10, 'cccc' 20",
to: "'aaaa' 10, 'bbbb' 20, 'cccc' 30",
comparisonFunction: compareFontVariationSettings,
}, [
{at: -0.5, expect: "'aaaa' -5, 'bbbb' 5, 'cccc' 15"},
{at: 0, expect: "'aaaa' 0, 'bbbb' 10, 'cccc' 20"},
......@@ -97,6 +115,21 @@ test_interpolation({
{at: 1.5, expect: "'aaaa' 15, 'bbbb' 25, 'cccc' 35"},
]);
// font-variation-settings is a map, so any order works.
test_interpolation({
property: 'font-variation-settings',
from: "'aaaa' 0, 'bbbb' 10, 'cccc' 20",
to: "'cccc' 10, 'bbbb' 20, 'aaaa' 30",
comparisonFunction: compareFontVariationSettings,
}, [
{at: -0.5, expect: "'aaaa' -15, 'bbbb' 5, 'cccc' 25"},
{at: 0, expect: "'aaaa' 0, 'bbbb' 10, 'cccc' 20"},
{at: 0.3, expect: "'aaaa' 9, 'bbbb' 13, 'cccc' 17"},
{at: 0.7, expect: "'aaaa' 21, 'bbbb' 17, 'cccc' 13"},
{at: 1, expect: "'aaaa' 30, 'bbbb' 20, 'cccc' 10"},
{at: 1.5, expect: "'aaaa' 45, 'bbbb' 25, 'cccc' 5"},
]);
test_no_interpolation({
property: 'font-variation-settings',
from: "'aaaa' 0, 'bbbb' 10",
......@@ -109,12 +142,6 @@ test_no_interpolation({
to: "'aaaa' 0, 'bbbb' 10",
});
test_no_interpolation({
property: 'font-variation-settings',
from: "'aaaa' 0, 'bbbb' 10, 'cccc' 20",
to: "'cccc' 10, 'bbbb' 20, 'aaaa' 30",
});
test_no_interpolation({
property: 'font-variation-settings',
from: "'aaaa' 0, 'bbbb' 10, 'cccc' 20",
......@@ -126,7 +153,9 @@ test_interpolation({
property: 'font-variation-settings',
from: "'aaaa' 30, 'bbbb' 20",
to: "'aaaa' 20, 'bbbb' 30",
comparisonFunction: compareFontVariationSettings,
}, [
{at: 3.40282e+38, expect: "'aaaa' -3.40282e+38, 'bbbb' 3.40282e+38"},
]);
</script>
third_party/blink/web_tests/external/wpt/css/support/interpolation-testcommon.js
View file @ 28f1aff3
......@@ -11,14 +11,12 @@
return keyframe === neutralKeyframe;
}
// For all the CSS interpolation methods, we set the animation duration very
// very long so that any advancement in time that does happen is irrelevant
// in terms of the progress value. In particular, the animation duration is
// 2e9s which is ~63 years.
// We then set the delay to be *negative* half the duration, so we are
// immediately at the halfway point of the animation. Finally, we using an
// easing function that maps halfway (0.5) to whatever progress we actually
// want.
// For the CSS interpolation methods, we set the animation duration long
// enough that any advancement in time during the test is irrelevant in terms
// of the progress. We then set the delay to be negative half the duration, so
// we are immediately at the halfway point of the animation. Finally, we use
// an easing function that maps halfway to whatever progress we actually want.
var cssAnimationsInterpolation = {
name: 'CSS Animations',
supportsProperty: function() {return true;},
......@@ -233,12 +231,15 @@
var property = interpolationTest.options.property;
var from = interpolationTest.options.from;
var to = interpolationTest.options.to;
var comparisonFunction = interpolationTest.options.comparisonFunction;
if ((interpolationTest.options.method && interpolationTest.options.method != interpolationMethod.name)
|| !interpolationMethod.supportsProperty(property)
|| !interpolationMethod.supportsValue(from)
|| !interpolationMethod.supportsValue(to)) {
return;
}
var testText = `${interpolationMethod.name}: property <${property}> from ${keyframeText(from)} to ${keyframeText(to)}`;
var testContainer = createElement(interpolationMethodContainer, 'div');
createElement(testContainer);
......@@ -246,6 +247,14 @@
if (expectations === expectNoInterpolation) {
expectations = interpolationMethod.nonInterpolationExpectations(from, to);
}
// Setup a standard equality function if an override is not provided.
if (!comparisonFunction) {
comparisonFunction = (actual, expected) => {
assert_equals(normalizeValue(actual), normalizeValue(expected));
};
}
return expectations.map(function(expectation) {
var actualTargetContainer = createTargetContainer(testContainer, 'actual');
var expectedTargetContainer = createTargetContainer(testContainer, 'expected');
......@@ -270,9 +279,9 @@
assert_true(CSS.supports(property, underlying), '\'underlying\' value should be supported');
}
assert_equals(
normalizeValue(getComputedStyle(target).getPropertyValue(property)),
normalizeValue(expectedValue));
comparisonFunction(
getComputedStyle(target).getPropertyValue(property),
expectedValue);
}, `${testText} at (${expectation.at}) should be [${sanitizeUrls(expectedValue)}]`);
};
return target;
......@@ -314,6 +323,7 @@
container.remove();
interpolationTests = [];
}
window.test_interpolation = test_interpolation;
window.test_no_interpolation = test_no_interpolation;
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