161 lines
4.7 KiB
HTML
161 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="UTF-8">
|
|
<title>font-variation-settings interpolation</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>
|
|
|
|
<style>
|
|
.parent {
|
|
font-variation-settings: "test" 30;
|
|
}
|
|
.target {
|
|
font-variation-settings: "test" 10;
|
|
}
|
|
</style>
|
|
|
|
<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"},
|
|
{at: 0.3, expect: "'test' 13"},
|
|
{at: 0.7, expect: "'test' 17"},
|
|
{at: 1, expect: "'test' 20"},
|
|
{at: 1.5, expect: "'test' 25"},
|
|
]);
|
|
|
|
test_no_interpolation({
|
|
property: 'font-variation-settings',
|
|
from: 'initial',
|
|
to: "'test' 50",
|
|
});
|
|
|
|
test_interpolation({
|
|
property: 'font-variation-settings',
|
|
from: 'inherit',
|
|
to: "'test' 20",
|
|
comparisonFunction: compareFontVariationSettings,
|
|
}, [
|
|
{at: -0.5, expect: "'test' 35"},
|
|
{at: 0, expect: "'test' 30"},
|
|
{at: 0.3, expect: "'test' 27"},
|
|
{at: 0.7, expect: "'test' 23"},
|
|
{at: 1, expect: "'test' 20"},
|
|
{at: 1.5, expect: "'test' 15"},
|
|
]);
|
|
|
|
test_interpolation({
|
|
property: 'font-variation-settings',
|
|
from: 'unset',
|
|
to: "'test' 20",
|
|
comparisonFunction: compareFontVariationSettings,
|
|
}, [
|
|
{at: -0.5, expect: "'test' 35"},
|
|
{at: 0, expect: "'test' 30"},
|
|
{at: 0.3, expect: "'test' 27"},
|
|
{at: 0.7, expect: "'test' 23"},
|
|
{at: 1, expect: "'test' 20"},
|
|
{at: 1.5, expect: "'test' 15"},
|
|
]);
|
|
|
|
test_no_interpolation({
|
|
property: 'font-variation-settings',
|
|
from: "'test' 20",
|
|
to: "normal",
|
|
});
|
|
|
|
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"},
|
|
{at: 0.3, expect: "'test' 23"},
|
|
{at: 0.7, expect: "'test' 27"},
|
|
{at: 1, expect: "'test' 30"},
|
|
{at: 1.5, expect: "'test' 35"},
|
|
]);
|
|
|
|
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"},
|
|
{at: 0.3, expect: "'aaaa' 3, 'bbbb' 13, 'cccc' 23"},
|
|
{at: 0.7, expect: "'aaaa' 7, 'bbbb' 17, 'cccc' 27"},
|
|
{at: 1, expect: "'aaaa' 10, 'bbbb' 20, 'cccc' 30"},
|
|
{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",
|
|
to: "'aaaa' 10, 'bbbb' 20, 'cccc' 30",
|
|
});
|
|
|
|
test_no_interpolation({
|
|
property: 'font-variation-settings',
|
|
from: "'aaaa' 10, 'bbbb' 20, 'cccc' 30",
|
|
to: "'aaaa' 0, 'bbbb' 10",
|
|
});
|
|
|
|
test_no_interpolation({
|
|
property: 'font-variation-settings',
|
|
from: "'aaaa' 0, 'bbbb' 10, 'cccc' 20",
|
|
to: "'dddd' 10, 'eeee' 20, 'ffff' 30",
|
|
});
|
|
|
|
// crbug.com/910118: Test that ApplyStandardPropertyValue doesn't overflow.
|
|
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>
|