new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/calculating-computed-keyframes.html
@@ -0,0 +1,566 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Tests that valid 'inherit' value during animation</title>
+<link rel="help" href="https://w3c.github.io/web-animations/#calculating-computed-keyframes">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../testcommon.js"></script>
+<body>
+<div id="log"></div>
+<script>
+
+var testcases = [
+ {
+ property: "align-content",
+ values: ["normal", "start", "end", "flex-start", "flex-end", "center",
+ "left", "right", "space-between", "space-around", "space-evenly",
+ "first baseline", "last baseline", "baseline", "stretch",
+ "start safe", "unsafe end", "unsafe end stretch",
+ "space-evenly end safe" ],
+ expectedValueMap: {
+ "first baseline": "baseline",
+ "unsafe end": "end",
+ "unsafe end stretch": "stretch end",
+ }
+ },
+ {
+ property: "align-items",
+ values: ["end", "flex-start", "flex-end", "self-start", "self-end",
+ "center", "stretch", "first baseline", "last baseline",
+ "baseline", "unsafe left", "start", "center unsafe", "right safe",
+ "center safe"],
+ expectedValueMap: {
+ "first baseline": "baseline",
+ "unsafe left": "left",
+ "center unsafe": "center",
+ }
+ },
+ {
+ property: "align-self",
+ values: ["normal", "start", "flex-start", "flex-end", "center", "stretch",
+ "first baseline", "last baseline", "baseline", "right safe",
+ "unsafe center", "self-start", "self-end safe"],
+ expectedValueMap: {
+ "first baseline": "baseline",
+ "unsafe center": "center",
+ }
+ },
+ {
+ property: "backface-visibility",
+ values: ["visible", "hidden"]
+ },
+ {
+ property: "background-attachment",
+ values: ["scroll", "fixed", "local", "scroll, scroll",
+ "fixed, scroll", "scroll, fixed, local, scroll", "fixed, fixed"]
+ },
+ {
+ property: "background-blend-mode",
+ values: ["normal", "multiply", "screen", "overlay", "darken", "lighten",
+ "color-dodge", "color-burn", "hard-light", "soft-light",
+ "difference", "exclusion", "hue", "saturation", "color",
+ "luminosity"]
+ },
+ {
+ property: "background-clip",
+ values: ["border-box", "content-box", "padding-box",
+ "border-box, padding-box", "padding-box, padding-box, padding-box",
+ "border-box, border-box", "text", "content-box, text",
+ "text, border-box", "text, text"]
+ },
+ {
+ property: "background-origin",
+ values: ["padding-box", "border-box", "content-box",
+ "border-box, padding-box", "padding-box, padding-box, padding-box",
+ "border-box, border-box"]
+ },
+ {
+ property: "border-collapse",
+ values: ["separate", "collapse"]
+ },
+ {
+ property: "border-image-repeat",
+ values: ["stretch", "repeat", "round", "stretch stretch", "stretch round",
+ "repeat round", "stretch repeat", "round round", "repeat repeat",
+ "stretch space", "repeat space", "round space", "space space"],
+ expectedValueMap: {
+ "stretch": "stretch stretch",
+ "repeat": "repeat repeat",
+ "round": "round round",
+ }
+ },
+ {
+ property: "box-decoration-break",
+ values: ["slice", "clone"]
+ },
+ {
+ property: "box-sizing",
+ values: ["content-box", "border-box"]
+ },
+ {
+ property: "caption-side",
+ values: ["top", "bottom", "left", "right", "top-outside", "bottom-outside"]
+ },
+ {
+ property: "clear",
+ values: ["none", "left", "right", "both"]
+ },
+ {
+ property: "clip-rule",
+ values: ["nonzero", "evenodd"]
+ },
+ {
+ property: "color-adjust",
+ values: ["economy", "exact"]
+ },
+ {
+ property: "color-interpolation",
+ values: ["srgb", "auto", "linearrgb"]
+ },
+ {
+ property: "color-interpolation-filters",
+ values: ["srgb", "auto", "linearrgb"]
+ },
+ {
+ property: "column-fill",
+ values: ["balance", "auto"]
+ },
+ {
+ property: "column-rule-style",
+ values: ["none", "solid", "hidden", "ridge", "groove", "inset", "outset",
+ "double", "dotted", "dashed"]
+ },
+ {
+ property: "column-span",
+ values: ["none", "all"]
+ },
+ {
+ property: "contain",
+ values: ["none", "strict", "layout", "style", "layout style",
+ "paint", "layout paint", "style paint", "layout style paint"]
+ },
+ {
+ property: "direction",
+ values: ["ltr", "rtl"]
+ },
+ {
+ property: "dominant-baseline",
+ values: ["auto", "use-script", "no-change", "reset-size", "ideographic",
+ "alphabetic", "hanging", "mathematical", "central", "middle",
+ "text-after-edge", "text-before-edge"]
+ },
+ {
+ property: "empty-cells",
+ values: ["show", "hide"]
+ },
+ {
+ property: "fill-rule",
+ values: ["nonzero", "evenodd"]
+ },
+ {
+ property: "flex-direction",
+ values: ["row", "row-reverse", "column", "column-reverse"]
+ },
+ {
+ property: "flex-wrap",
+ values: ["nowrap", "wrap", "wrap-reverse"]
+ },
+ {
+ property: "float",
+ values: ["none", "left", "right"]
+ },
+ {
+ property: "font-kerning",
+ values: ["auto", "none", "normal"]
+ },
+ {
+ property: "font-language-override",
+ values: ["normal", "\"ENG\"", "\"TRK\""]
+ },
+ {
+ property: "font-style",
+ values: ["normal", "italic", "oblique"]
+ },
+ {
+ property: "font-synthesis",
+ values: ["weight style", "none", "weight", "style"]
+ },
+ {
+ property: "font-variant-caps",
+ values: ["normal", "small-caps", "all-small-caps", "petite-caps",
+ "all-petite-caps", "titling-caps", "unicase"]
+ },
+ {
+ property: "font-variant-east-asian",
+ values: ["normal", "jis78", "jis83", "jis90", "jis04", "simplified",
+ "traditional", "full-width", "proportional-width", "ruby",
+ "jis78 full-width", "jis78 full-width ruby",
+ "simplified proportional-width", "simplified ruby"]
+ },
+ {
+ property: "font-variant-ligatures",
+ values: ["normal", "none", "common-ligatures", "no-common-ligatures",
+ "discretionary-ligatures", "no-discretionary-ligatures",
+ "historical-ligatures", "no-historical-ligatures", "contextual",
+ "no-contextual", "common-ligatures no-discretionary-ligatures",
+ "no-discretionary-ligatures contextual",
+ "no-common-ligatures historical-ligatures",
+ "discretionary-ligatures no-historical-ligatures",
+ "common-ligatures no-discretionary-ligatures "
+ + "historical-ligatures no-contextual"]
+ },
+ {
+ property: "font-variant-numeric",
+ values: ["normal", "lining-nums", "oldstyle-nums", "proportional-nums",
+ "tabular-nums", "diagonal-fractions", "stacked-fractions",
+ "slashed-zero", "ordinal", "lining-nums diagonal-fractions",
+ "tabular-nums stacked-fractions",
+ "tabular-nums stacked-fractions slashed-zero",
+ "oldstyle-nums proportional-nums diagonal-fractions "
+ + "slashed-zero ordinal"]
+ },
+ {
+ property: "font-variant-position",
+ values: ["normal", "super", "sub"]
+ },
+ {
+ property: "grid-auto-flow",
+ values: ["row", "column", "column dense", "row dense", "dense"],
+ expectedValueMap: {
+ "dense": "row dense",
+ }
+ },
+ {
+ property: "hyphens",
+ values: ["manual", "none", "auto"]
+ },
+ {
+ property: "initial-letter",
+ values: ["normal", "2", "2.5", "3.7 2", "4 3"],
+ expectedValueMap: {
+ "2": "2 2",
+ "2.5": "2.5 2",
+ }
+ },
+ {
+ property: "image-orientation",
+ values: ["0deg", "0grad", "0rad", "0turn", "15deg", "360deg",
+ "0deg flip", "90deg", "90deg flip", "180deg", "180deg flip",
+ "270deg", "270deg flip", "flip", "from-image"],
+ expectedValueMap: {
+ "0grad": "0deg",
+ "0rad": "0deg",
+ "0turn": "0deg",
+ "15deg": "0deg",
+ "360deg": "0deg",
+ "flip": "0deg flip"
+ }
+ },
+ {
+ property: "image-rendering",
+ values: ["auto", "optimizespeed", "optimizequality"]
+ },
+ {
+ property: "ime-mode",
+ values: ["normal", "disabled", "active", "inactive"]
+ },
+ {
+ property: "isolation",
+ values: ["auto", "isolate"]
+ },
+ {
+ property: "justify-content",
+ values: ["normal", "start", "end", "flex-start", "flex-end", "center",
+ "left", "right", "space-between", "space-around", "space-evenly",
+ "first baseline", "last baseline", "baseline", "stretch",
+ "start safe", "unsafe end", "unsafe end stretch",
+ "space-evenly end safe" ],
+ expectedValueMap: {
+ "first baseline": "baseline",
+ "unsafe end": "end",
+ "unsafe end stretch": "stretch end",
+ }
+ },
+ {
+ property: "justify-items",
+ values: ["end", "flex-start", "flex-end", "self-start", "self-end",
+ "center", "stretch", "first baseline", "last baseline",
+ "baseline", "unsafe left", "start", "center unsafe", "right safe",
+ "center safe"],
+ expectedValueMap: {
+ "first baseline": "baseline",
+ "unsafe left": "left",
+ "center unsafe": "center",
+ }
+ },
+ {
+ property: "justify-self",
+ values: ["normal", "start", "flex-start", "flex-end", "center", "stretch",
+ "first baseline", "last baseline", "baseline", "right safe",
+ "unsafe center", "self-start", "self-end safe"],
+ expectedValueMap: {
+ "first baseline": "baseline",
+ "unsafe center": "center",
+ }
+ },
+ {
+ property: "list-style-position",
+ values: ["outside", "inside"]
+ },
+ {
+ property: "mask-clip",
+ values: ["border-box", "content-box", "fill-box", "stroke-box", "view-box",
+ "no-clip", "padding-box", "border-box, padding-box",
+ "padding-box, padding-box, padding-box", "border-box, border-box"]
+ },
+ {
+ property: "mask-composite",
+ values: ["add", "subtract", "intersect", "exclude", "add, add",
+ "subtract, intersect", "subtract, subtract, add"]
+ },
+ {
+ property: "mask-mode",
+ values: ["match-source", "alpha", "luminance", "match-source, match-source",
+ "match-source, alpha", "alpha, luminance, match-source"]
+ },
+ {
+ property: "mask-origin",
+ values: ["border-box", "padding-box", "content-box", "fill-box",
+ "stroke-box", "view-box", "border-box, padding-box",
+ "padding-box, padding-box, padding-box", "border-box, border-box"]
+ },
+ {
+ property: "mask-type",
+ values: ["luminance", "alpha"]
+ },
+ {
+ property: "mix-blend-mode",
+ values: ["normal", "multiply", "screen", "overlay", "darken", "lighten",
+ "color-dodge", "color-burn", "hard-light", "soft-light",
+ "difference", "exclusion", "hue", "saturation", "color",
+ "luminosity"]
+ },
+ {
+ property: "object-fit",
+ values: ["fill", "contain", "cover", "none", "scale-down"]
+ },
+ {
+ property: "outline-style",
+ values: ["none", "solid", "dashed", "dotted", "double", "outset", "inset",
+ "groove", "ridge", "auto"]
+ },
+ {
+ property: "overflow-clip-box",
+ values: ["padding-box", "content-box"]
+ },
+ {
+ property: "overflow-x",
+ values: ["visible", "auto", "scroll", "hidden"]
+ },
+ {
+ property: "overflow-y",
+ values: ["visible", "auto", "scroll", "hidden"]
+ },
+ {
+ property: "page-break-after",
+ values: ["auto", "always", "avoid", "left", "right"]
+ },
+ {
+ property: "page-break-before",
+ values: ["auto", "always", "avoid", "left", "right"]
+ },
+ {
+ property: "page-break-inside",
+ values: ["auto", "avoid"]
+ },
+ {
+ property: "paint-order",
+ values: ["normal", "fill", "fill stroke", "fill stroke markers",
+ "stroke markers fill"],
+ expectedValueMap: {
+ "fill stroke": "fill",
+ "fill stroke markers": "fill",
+ "stroke markers fill": "stroke markers",
+ }
+ },
+ {
+ property: "pointer-events",
+ values: ["auto", "visiblepainted", "visiblefill", "visiblestroke",
+ "visible", "painted", "fill", "stroke", "all", "none"]
+ },
+ {
+ property: "position",
+ values: ["static", "relative", "absolute", "fixed", "sticky"]
+ },
+ {
+ property: "resize",
+ values: ["none", "both", "horizontal", "vertical"]
+ },
+ {
+ property: "ruby-align",
+ values: ["space-around", "start", "center", "space-between"]
+ },
+ {
+ property: "ruby-position",
+ values: ["over", "under"]
+ },
+ {
+ property: "scroll-behavior",
+ values: ["auto", "smooth"]
+ },
+ {
+ property: "scroll-snap-type-x",
+ values: ["none", "mandatory", "proximity"]
+ },
+ {
+ property: "scroll-snap-type-y",
+ values: ["none", "mandatory", "proximity"]
+ },
+ {
+ property: "shape-rendering",
+ values: ["auto", "optimizespeed", "crispedges", "geometricprecision"]
+ },
+ {
+ property: "stroke-linecap",
+ values: ["butt", "round", "square"]
+ },
+ {
+ property: "stroke-linejoin",
+ values: ["miter", "round", "bevel"]
+ },
+ {
+ property: "table-layout",
+ values: ["auto", "fixed"]
+ },
+ {
+ property: "text-align",
+ values: ["start", "center", "justify", "end", "match-parent"],
+ expectedValueMap: {
+ "match-parent": "left",
+ }
+ },
+ {
+ property: "text-align-last",
+ values: ["auto", "center", "justify", "start", "end", "left", "right"],
+ },
+ {
+ property: "text-anchor",
+ values: ["start", "middle", "end"],
+ },
+ {
+ property: "text-combine-upright",
+ values: ["none", "all"],
+ },
+ {
+ property: "text-decoration-line",
+ values: ["none", "underline", "overline", "line-through", "blink",
+ "underline line-through blink",
+ "underline overline line-through blink"],
+ },
+ {
+ property: "text-decoration-style",
+ values: ["solid", "double", "dotted", "dashed", "wavy"],
+ },
+ {
+ property: "text-emphasis-position",
+ values: ["over right", "over left", "under left", "under right"],
+ },
+ {
+ property: "text-justify",
+ values: ["auto", "none", "inter-word", "inter-character"],
+ },
+ {
+ property: "text-orientation",
+ values: ["mixed", "upright", "sideways", "sideways-right"],
+ expectedValueMap: {
+ "sideways-right": "sideways",
+ }
+ },
+ {
+ property: "text-rendering",
+ values: ["auto", "optimizespeed", "optimizelegibility",
+ "geometricprecision"],
+ },
+ {
+ property: "-webkit-text-stroke-width",
+ values: ["0", "0px", "0em", "thin", "medium", "thick", "17px"],
+ expectedValueMap: {
+ "0": "0px",
+ "0em": "0px",
+ "thin": "1px",
+ "medium": "3px",
+ "thick": "5px",
+ }
+ },
+ {
+ property: "text-transform",
+ values: ["none", "capitalize", "uppercase", "lowercase", "full-width"],
+ },
+ {
+ property: "touch-action",
+ values: ["auto", "none", "pan-x", "pan-y", "pan-x pan-y", "manipulation"],
+ },
+ {
+ property: "transform-box",
+ values: ["border-box", "fill-box", "view-box"],
+ },
+ {
+ property: "transform-style",
+ values: ["flat", "preserve-3d"],
+ },
+ {
+ property: "unicode-bidi",
+ values: ["normal", "embed", "bidi-override", "isolate", "plaintext",
+ "isolate-override"],
+ },
+ {
+ property: "vector-effect",
+ values: ["none", "non-scaling-stroke"],
+ },
+ {
+ property: "white-space",
+ values: ["normal", "pre", "nowrap", "pre-wrap", "pre-line"],
+ },
+ {
+ property: "word-break",
+ values: ["normal", "break-all", "keep-all"],
+ },
+ {
+ property: "overflow-wrap",
+ values: ["normal", "break-word"],
+ },
+ {
+ property: "writing-mode",
+ values: ["horizontal-tb", "vertical-lr", "vertical-rl", "sideways-rl",
+ "sideways-lr"],
+ },
+];
+
+for (var testcase of testcases) {
+ var property = testcase.property;
+ var values = testcase.values;
+ var idl = propertyToIDL(property);
+ for (var value of values) {
+ test(function(t) {
+ var container = createDiv(t);
+ var target = document.createElement("div");
+ container.appendChild(target);
+
+ container.style[idl] = value;
+
+ const animation =
+ target.animate({ [idl]: [value, "inherit"] },
+ { duration: 1000, delay: -500 } );
+
+ const expectedValue =
+ testcase.expectedValueMap && testcase.expectedValueMap[value]
+ ? testcase.expectedValueMap[value] : value;
+
+ assert_equals(getComputedStyle(target)[idl], expectedValue,
+ "Computed style shoud be '" + expectedValue +"'");
+ }, "Test valid inherit value for '" + property + "'"
+ + " (Parent style is '" + value + "')");
+ };
+};
+</script>
+</body>