193 lines
6.4 KiB
HTML
193 lines
6.4 KiB
HTML
<!doctype html>
|
|
<meta charset=utf-8>
|
|
<script src="../testcommon.js"></script>
|
|
<body>
|
|
<script>
|
|
"use strict";
|
|
|
|
// Tests that we correctly extract the underlying value when the animation
|
|
// type is 'discrete'.
|
|
const discreteTests = [
|
|
{
|
|
stylesheet: {
|
|
"@keyframes keyframes":
|
|
"from { align-content: flex-start; } to { align-content: flex-end; } "
|
|
},
|
|
expectedKeyframes: [
|
|
{ computedOffset: 0, alignContent: "flex-start" },
|
|
{ computedOffset: 1, alignContent: "flex-end" }
|
|
],
|
|
explanation: "Test for fully-specified keyframes"
|
|
},
|
|
{
|
|
stylesheet: {
|
|
"@keyframes keyframes": "from { align-content: flex-start; }"
|
|
},
|
|
// The value of 100% should be 'stretch',
|
|
// but we are not supporting underlying value.
|
|
// https://bugzilla.mozilla.org/show_bug.cgi?id=1295401
|
|
expectedKeyframes: [
|
|
{ computedOffset: 0, alignContent: "flex-start" },
|
|
{ computedOffset: 1, alignContent: "unset" }
|
|
],
|
|
explanation: "Test for 0% keyframe only"
|
|
},
|
|
{
|
|
stylesheet: {
|
|
"@keyframes keyframes": "to { align-content: flex-end; }"
|
|
},
|
|
// The value of 0% should be 'stretch',
|
|
// but we are not supporting underlying value.
|
|
// https://bugzilla.mozilla.org/show_bug.cgi?id=1295401
|
|
expectedKeyframes: [
|
|
{ computedOffset: 0, alignContent: "unset" },
|
|
{ computedOffset: 1, alignContent: "flex-end" }
|
|
],
|
|
explanation: "Test for 100% keyframe only"
|
|
},
|
|
{
|
|
stylesheet: {
|
|
"@keyframes keyframes": "50% { align-content: center; }",
|
|
"#target": "align-content: space-between;"
|
|
},
|
|
expectedKeyframes: [
|
|
{ computedOffset: 0, alignContent: "space-between" },
|
|
{ computedOffset: 0.5, alignContent: "center" },
|
|
{ computedOffset: 1, alignContent: "space-between" }
|
|
],
|
|
explanation: "Test for no 0%/100% keyframes " +
|
|
"and specified style on target element"
|
|
},
|
|
{
|
|
stylesheet: {
|
|
"@keyframes keyframes": "50% { align-content: center; }"
|
|
},
|
|
attributes: {
|
|
style: "align-content: space-between"
|
|
},
|
|
expectedKeyframes: [
|
|
{ computedOffset: 0, alignContent: "space-between" },
|
|
{ computedOffset: 0.5, alignContent: "center" },
|
|
{ computedOffset: 1, alignContent: "space-between" }
|
|
],
|
|
explanation: "Test for no 0%/100% keyframes " +
|
|
"and specified style on target element using style attribute"
|
|
},
|
|
{
|
|
stylesheet: {
|
|
"@keyframes keyframes": "50% { align-content: center; }",
|
|
"#target": "align-content: inherit;"
|
|
},
|
|
// The value of 0%/100% should be 'stretch',
|
|
// but we are not supporting underlying value.
|
|
// https://bugzilla.mozilla.org/show_bug.cgi?id=1295401
|
|
expectedKeyframes: [
|
|
{ computedOffset: 0, alignContent: "inherit" },
|
|
{ computedOffset: 0.5, alignContent: "center" },
|
|
{ computedOffset: 1, alignContent: "inherit" }
|
|
],
|
|
explanation: "Test for no 0%/100% keyframes " +
|
|
"and 'inherit' specified on target element"
|
|
},
|
|
{
|
|
stylesheet: {
|
|
"@keyframes keyframes": "50% { align-content: center; }",
|
|
".target": "align-content: space-between;"
|
|
},
|
|
attributes: {
|
|
class: "target"
|
|
},
|
|
expectedKeyframes: [
|
|
{ computedOffset: 0, alignContent: "space-between" },
|
|
{ computedOffset: 0.5, alignContent: "center" },
|
|
{ computedOffset: 1, alignContent: "space-between" }
|
|
],
|
|
explanation: "Test for no 0%/100% keyframes " +
|
|
"and specified style on target element using class selector"
|
|
},
|
|
{
|
|
stylesheet: {
|
|
"@keyframes keyframes": "50% { align-content: center; }",
|
|
"div": "align-content: space-between;"
|
|
},
|
|
expectedKeyframes: [
|
|
{ computedOffset: 0, alignContent: "space-between" },
|
|
{ computedOffset: 0.5, alignContent: "center" },
|
|
{ computedOffset: 1, alignContent: "space-between" }
|
|
],
|
|
explanation: "Test for no 0%/100% keyframes " +
|
|
"and specified style on target element using type selector"
|
|
},
|
|
{
|
|
stylesheet: {
|
|
"@keyframes keyframes": "50% { align-content: center; }",
|
|
"div": "align-content: space-between;",
|
|
".target": "align-content: flex-start;",
|
|
"#target": "align-content: flex-end;"
|
|
},
|
|
attributes: {
|
|
class: "target"
|
|
},
|
|
expectedKeyframes: [
|
|
{ computedOffset: 0, alignContent: "flex-end" },
|
|
{ computedOffset: 0.5, alignContent: "center" },
|
|
{ computedOffset: 1, alignContent: "flex-end" }
|
|
],
|
|
explanation: "Test for no 0%/100% keyframes " +
|
|
"and specified style on target element " +
|
|
"using ID selector that overrides class selector"
|
|
},
|
|
{
|
|
stylesheet: {
|
|
"@keyframes keyframes": "50% { align-content: center; }",
|
|
"div": "align-content: space-between !important;",
|
|
".target": "align-content: flex-start;",
|
|
"#target": "align-content: flex-end;"
|
|
},
|
|
attributes: {
|
|
class: "target"
|
|
},
|
|
expectedKeyframes: [
|
|
{ computedOffset: 0, alignContent: "space-between" },
|
|
{ computedOffset: 0.5, alignContent: "center" },
|
|
{ computedOffset: 1, alignContent: "space-between" }
|
|
],
|
|
explanation: "Test for no 0%/100% keyframes " +
|
|
"and specified style on target element " +
|
|
"using important type selector that overrides other rules"
|
|
},
|
|
];
|
|
|
|
discreteTests.forEach(testcase => {
|
|
test(t => {
|
|
addStyle(t, testcase.stylesheet);
|
|
|
|
const div = addDiv(t, { "id": "target" });
|
|
if (testcase.attributes) {
|
|
for (let attributeName in testcase.attributes) {
|
|
div.setAttribute(attributeName, testcase.attributes[attributeName]);
|
|
}
|
|
}
|
|
div.style.animation = "keyframes 100s";
|
|
|
|
const keyframes = div.getAnimations()[0].effect.getKeyframes();
|
|
const expectedKeyframes = testcase.expectedKeyframes;
|
|
assert_equals(keyframes.length, expectedKeyframes.length,
|
|
`keyframes.length should be ${ expectedKeyframes.length }`);
|
|
|
|
keyframes.forEach((keyframe, index) => {
|
|
const expectedKeyframe = expectedKeyframes[index];
|
|
assert_equals(keyframe.computedOffset, expectedKeyframe.computedOffset,
|
|
`computedOffset of keyframes[${ index }] should be ` +
|
|
`${ expectedKeyframe.computedOffset }`);
|
|
assert_equals(keyframe.alignContent, expectedKeyframe.alignContent,
|
|
`alignContent of keyframes[${ index }] should be ` +
|
|
`${ expectedKeyframe.alignContent }`);
|
|
});
|
|
}, testcase.explanation);
|
|
});
|
|
|
|
done();
|
|
</script>
|
|
</body>
|