diff options
Diffstat (limited to 'testing/web-platform/tests/web-animations/animation-model')
40 files changed, 7990 insertions, 0 deletions
diff --git a/testing/web-platform/tests/web-animations/animation-model/animation-types/accumulation-per-property-001.html b/testing/web-platform/tests/web-animations/animation-model/animation-types/accumulation-per-property-001.html new file mode 100644 index 0000000000..a3fd115563 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/accumulation-per-property-001.html @@ -0,0 +1,24 @@ +<!doctype html> +<meta charset=utf-8> +<title>Accumulation for each property</title> +<link rel="help" href="https://drafts.csswg.org/web-animations/#animation-types"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +<script src="property-list.js"></script> +<script src="property-types.js"></script> +<script src="property-utils.js"></script> +<style> +html { + font-size: 10px; +} +</style> +<body> +<div id="log"></div> +<script> +'use strict'; + +test(function() { + runAnimationTypeTest(gCSSProperties1, 'testAccumulation'); +}, 'Setup'); +</script> diff --git a/testing/web-platform/tests/web-animations/animation-model/animation-types/accumulation-per-property-002.html b/testing/web-platform/tests/web-animations/animation-model/animation-types/accumulation-per-property-002.html new file mode 100644 index 0000000000..5cf411edf6 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/accumulation-per-property-002.html @@ -0,0 +1,24 @@ +<!doctype html> +<meta charset=utf-8> +<title>Accumulation for each property</title> +<link rel="help" href="https://drafts.csswg.org/web-animations/#animation-types"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +<script src="property-list.js"></script> +<script src="property-types.js"></script> +<script src="property-utils.js"></script> +<style> +html { + font-size: 10px; +} +</style> +<body> +<div id="log"></div> +<script> +'use strict'; + +test(function() { + runAnimationTypeTest(gCSSProperties2, 'testAccumulation'); +}, 'Setup'); +</script> diff --git a/testing/web-platform/tests/web-animations/animation-model/animation-types/addition-per-property-001.html b/testing/web-platform/tests/web-animations/animation-model/animation-types/addition-per-property-001.html new file mode 100644 index 0000000000..2fbec2c4cd --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/addition-per-property-001.html @@ -0,0 +1,24 @@ +<!doctype html> +<meta charset=utf-8> +<title>Addition for each property</title> +<link rel="help" href="https://drafts.csswg.org/web-animations/#animation-types"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +<script src="property-list.js"></script> +<script src="property-types.js"></script> +<script src="property-utils.js"></script> +<style> +html { + font-size: 10px; +} +</style> +<body> +<div id="log"></div> +<script> +'use strict'; + +test(function() { + runAnimationTypeTest(gCSSProperties1, 'testAddition'); +}, "Setup"); +</script> diff --git a/testing/web-platform/tests/web-animations/animation-model/animation-types/addition-per-property-002.html b/testing/web-platform/tests/web-animations/animation-model/animation-types/addition-per-property-002.html new file mode 100644 index 0000000000..3b1c40e3c7 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/addition-per-property-002.html @@ -0,0 +1,24 @@ +<!doctype html> +<meta charset=utf-8> +<title>Addition for each property</title> +<link rel="help" href="https://drafts.csswg.org/web-animations/#animation-types"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +<script src="property-list.js"></script> +<script src="property-types.js"></script> +<script src="property-utils.js"></script> +<style> +html { + font-size: 10px; +} +</style> +<body> +<div id="log"></div> +<script> +'use strict'; + +test(function() { + runAnimationTypeTest(gCSSProperties2, 'testAddition'); +}, "Setup"); +</script> diff --git a/testing/web-platform/tests/web-animations/animation-model/animation-types/discrete.html b/testing/web-platform/tests/web-animations/animation-model/animation-types/discrete.html new file mode 100644 index 0000000000..76f42bc7a4 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/discrete.html @@ -0,0 +1,135 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Discrete animation type</title> +<link rel="help" href="https://drafts.csswg.org/web-animations/#discrete-animation-type"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +<body> +<div id="log"></div> +<script> +'use strict'; + +test(t => { + const div = createDiv(t); + + const anim = div.animate({ fontStyle: [ 'normal', 'italic' ] }, + { duration: 1000, fill: 'forwards' }); + + assert_equals(getComputedStyle(div).fontStyle, 'normal', + 'Animation produces \'from\' value at start of interval'); + anim.currentTime = anim.effect.getComputedTiming().duration / 2 - 1; + assert_equals(getComputedStyle(div).fontStyle, 'normal', + 'Animation produces \'from\' value just before the middle of' + + ' the interval'); + anim.currentTime++; + assert_equals(getComputedStyle(div).fontStyle, 'italic', + 'Animation produces \'to\' value at exact middle of' + + ' the interval'); + anim.finish(); + assert_equals(getComputedStyle(div).fontStyle, 'italic', + 'Animation produces \'to\' value during forwards fill'); +}, 'Test animating discrete values'); + +test(t => { + const div = createDiv(t); + const originalHeight = getComputedStyle(div).height; + + const anim = div.animate({ height: [ 'auto', '200px' ] }, + { duration: 1000, fill: 'forwards' }); + + assert_equals(getComputedStyle(div).height, originalHeight, + 'Animation produces \'from\' value at start of interval'); + anim.currentTime = anim.effect.getComputedTiming().duration / 2 - 1; + assert_equals(getComputedStyle(div).height, originalHeight, + 'Animation produces \'from\' value just before the middle of' + + ' the interval'); + anim.currentTime++; + assert_equals(getComputedStyle(div).height, '200px', + 'Animation produces \'to\' value at exact middle of' + + ' the interval'); + anim.finish(); + assert_equals(getComputedStyle(div).height, '200px', + 'Animation produces \'to\' value during forwards fill'); +}, 'Test discrete animation is used when interpolation fails'); + +test(t => { + const div = createDiv(t); + const originalHeight = getComputedStyle(div).height; + + const anim = div.animate({ height: [ 'auto', + '200px', + '300px', + 'auto', + '400px' ] }, + { duration: 1000, fill: 'forwards' }); + + // There are five values, so there are four pairs to try to interpolate. + // We test at the middle of each pair. + assert_equals(getComputedStyle(div).height, originalHeight, + 'Animation produces \'from\' value at start of interval'); + anim.currentTime = 125; + assert_equals(getComputedStyle(div).height, '200px', + 'First non-interpolable pair uses discrete interpolation'); + anim.currentTime += 250; + assert_equals(getComputedStyle(div).height, '250px', + 'Second interpolable pair uses linear interpolation'); + anim.currentTime += 250; + assert_equals(getComputedStyle(div).height, originalHeight, + 'Third non-interpolable pair uses discrete interpolation'); + anim.currentTime += 250; + assert_equals(getComputedStyle(div).height, '400px', + 'Fourth non-interpolable pair uses discrete interpolation'); +}, 'Test discrete animation is used only for pairs of values that cannot' + + ' be interpolated'); + +test(t => { + const div = createDiv(t); + const originalHeight = getComputedStyle(div).height; + + // Easing: http://cubic-bezier.com/#.68,0,1,.01 + // With this curve, we don't reach the 50% point until about 95% of + // the time has expired. + const anim = div.animate({ fontStyle: [ 'normal', 'italic' ] }, + { duration: 1000, fill: 'forwards', + easing: 'cubic-bezier(0.68,0,1,0.01)' }); + + assert_equals(getComputedStyle(div).fontStyle, 'normal', + 'Animation produces \'from\' value at start of interval'); + anim.currentTime = 940; + assert_equals(getComputedStyle(div).fontStyle, 'normal', + 'Animation produces \'from\' value at 94% of the iteration' + + ' time'); + anim.currentTime = 960; + assert_equals(getComputedStyle(div).fontStyle, 'italic', + 'Animation produces \'to\' value at 96% of the iteration' + + ' time'); +}, 'Test the 50% switch point for discrete animation is based on the' + + ' effect easing'); + +test(t => { + const div = createDiv(t); + const originalHeight = getComputedStyle(div).height; + + // Easing: http://cubic-bezier.com/#.68,0,1,.01 + // With this curve, we don't reach the 50% point until about 95% of + // the time has expired. + const anim = div.animate([ { fontStyle: 'normal', + easing: 'cubic-bezier(0.68,0,1,0.01)' }, + { fontStyle: 'italic' } ], + { duration: 1000, fill: 'forwards' }); + + assert_equals(getComputedStyle(div).fontStyle, 'normal', + 'Animation produces \'from\' value at start of interval'); + anim.currentTime = 940; + assert_equals(getComputedStyle(div).fontStyle, 'normal', + 'Animation produces \'from\' value at 94% of the iteration' + + ' time'); + anim.currentTime = 960; + assert_equals(getComputedStyle(div).fontStyle, 'italic', + 'Animation produces \'to\' value at 96% of the iteration' + + ' time'); +}, 'Test the 50% switch point for discrete animation is based on the' + + ' keyframe easing'); + +</script> diff --git a/testing/web-platform/tests/web-animations/animation-model/animation-types/display.tentative.html b/testing/web-platform/tests/web-animations/animation-model/animation-types/display.tentative.html new file mode 100644 index 0000000000..6b28dcd964 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/display.tentative.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Animation type for the 'display' property</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> + +<body> + <div id="log"></div> + <div id="target"></div> + <script> + 'use strict'; + + test(t => { + const div = createDiv(t); + div.style.display = 'none'; + const anim = div.animate({ display: ['block', 'block'] }, + { duration: 100 * MS_PER_SEC }); + + anim.currentTime = 0; + assert_equals(getComputedStyle(div).display, 'block', + 'Display when progress = 0'); + + anim.currentTime = 10 * MS_PER_SEC + 1; + assert_equals(getComputedStyle(div).display, 'block', + 'Display when progress > 0'); + + anim.finish(); + assert_equals(getComputedStyle(div).display, 'none', + 'Display when progress = 1'); + + }, 'Display can be held by animation'); + </script> +</body> diff --git a/testing/web-platform/tests/web-animations/animation-model/animation-types/interpolation-per-property-001.html b/testing/web-platform/tests/web-animations/animation-model/animation-types/interpolation-per-property-001.html new file mode 100644 index 0000000000..97f2822473 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/interpolation-per-property-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Interpolation for each property</title> +<link rel="help" href="https://drafts.csswg.org/web-animations/#animation-types"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +<script src="property-list.js"></script> +<script src="property-types.js"></script> +<script src="property-utils.js"></script> +<style> +html { + font-size: 10px; +} +</style> +<body> +<div id="log"></div> +<script> +'use strict'; + +test(function() { + runAnimationTypeTest(gCSSProperties1, 'testInterpolation'); +}, 'Setup'); +</script> diff --git a/testing/web-platform/tests/web-animations/animation-model/animation-types/interpolation-per-property-002.html b/testing/web-platform/tests/web-animations/animation-model/animation-types/interpolation-per-property-002.html new file mode 100644 index 0000000000..9ccc613cfc --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/interpolation-per-property-002.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Interpolation for each property</title> +<link rel="help" href="https://drafts.csswg.org/web-animations/#animation-types"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +<script src="property-list.js"></script> +<script src="property-types.js"></script> +<script src="property-utils.js"></script> +<style> +html { + font-size: 10px; +} +</style> +<body> +<div id="log"></div> +<script> +'use strict'; + +test(function() { + runAnimationTypeTest(gCSSProperties2, 'testInterpolation'); +}, 'Setup'); +</script> diff --git a/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js new file mode 100644 index 0000000000..98ab02a122 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js @@ -0,0 +1,1618 @@ +'use strict'; + +const gCSSProperties1 = { + 'align-content': { + // https://drafts.csswg.org/css-align/#propdef-align-content + types: [ + { type: 'discrete' , options: [ [ 'flex-start', 'flex-end' ] ] } + ] + }, + 'align-items': { + // https://drafts.csswg.org/css-align/#propdef-align-items + types: [ + { type: 'discrete', options: [ [ 'flex-start', 'flex-end' ] ] } + ] + }, + 'align-self': { + // https://drafts.csswg.org/css-align/#propdef-align-self + types: [ + { type: 'discrete', options: [ [ 'flex-start', 'flex-end' ] ] } + ] + }, + 'backface-visibility': { + // https://drafts.csswg.org/css-transforms/#propdef-backface-visibility + types: [ + { type: 'discrete', options: [ [ 'visible', 'hidden' ] ] } + ] + }, + 'background-attachment': { + // https://drafts.csswg.org/css-backgrounds-3/#background-attachment + types: [ + { type: 'discrete', options: [ [ 'fixed', 'local' ] ] } + ] + }, + 'background-color': { + // https://drafts.csswg.org/css-backgrounds-3/#background-color + types: [ 'color' ] + }, + 'background-blend-mode': { + // https://drafts.fxtf.org/compositing-1/#propdef-background-blend-mode + types: [ + { type: 'discrete', options: [ [ 'multiply', 'screen' ] ] } + ] + }, + 'background-clip': { + // https://drafts.csswg.org/css-backgrounds-3/#background-clip + types: [ + { type: 'discrete', options: [ [ 'padding-box', 'content-box' ] ] } + ] + }, + 'background-image': { + // https://drafts.csswg.org/css-backgrounds-3/#background-image + types: [ + { type: 'discrete', + options: [ [ 'url("http://localhost/test-1")', + 'url("http://localhost/test-2")' ] ] } + ] + }, + 'background-origin': { + // https://drafts.csswg.org/css-backgrounds-3/#background-origin + types: [ + { type: 'discrete', options: [ [ 'padding-box', 'content-box' ] ] } + ] + }, + 'background-position': { + // https://drafts.csswg.org/css-backgrounds-3/#background-position + types: [ + ] + }, + 'background-position-x': { + // https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-x + types: [ + ] + }, + 'background-position-y': { + // https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-y + types: [ + ] + }, + 'background-repeat': { + // https://drafts.csswg.org/css-backgrounds-3/#background-repeat + types: [ + { type: 'discrete', options: [ [ 'space', 'round' ] ] } + ] + }, + 'background-size': { + // https://drafts.csswg.org/css-backgrounds-3/#background-size + types: [ + ] + }, + 'block-size': { + // https://drafts.csswg.org/css-logical-props/#propdef-block-size + types: [ + ] + }, + 'border-block-end-color': { + // https://drafts.csswg.org/css-logical-props/#propdef-border-block-end-color + types: [ + ] + }, + 'border-block-end-style': { + // https://drafts.csswg.org/css-logical-props/#propdef-border-block-end-style + types: [ + ] + }, + 'border-block-end-width': { + // https://drafts.csswg.org/css-logical-props/#propdef-border-block-end-width + types: [ + ] + }, + 'border-block-start-color': { + // https://drafts.csswg.org/css-logical-props/#propdef-border-block-start-color + types: [ + ] + }, + 'border-block-start-style': { + // https://drafts.csswg.org/css-logical-props/#propdef-border-block-start-style + types: [ + ] + }, + 'border-block-start-width': { + // https://drafts.csswg.org/css-logical-props/#propdef-border-block-start-width + types: [ + ] + }, + 'border-bottom-color': { + // https://drafts.csswg.org/css-backgrounds-3/#border-bottom-color + types: [ 'color' ] + }, + 'border-bottom-left-radius': { + // https://drafts.csswg.org/css-backgrounds-3/#border-bottom-left-radius + types: [ + ] + }, + 'border-bottom-right-radius': { + // https://drafts.csswg.org/css-backgrounds-3/#border-bottom-right-radius + types: [ + ] + }, + 'border-bottom-style': { + // https://drafts.csswg.org/css-backgrounds-3/#border-bottom-style + types: [ + { type: 'discrete', options: [ [ 'dotted', 'solid' ] ] } + ] + }, + 'border-bottom-width': { + // https://drafts.csswg.org/css-backgrounds-3/#border-bottom-width + types: [ 'length' ], + setup: t => { + const element = createElement(t); + element.style.borderBottomStyle = 'solid'; + return element; + } + }, + 'border-collapse': { + // https://drafts.csswg.org/css-tables/#propdef-border-collapse + types: [ + { type: 'discrete', options: [ [ 'collapse', 'separate' ] ] } + ] + }, + 'border-inline-end-color': { + // https://drafts.csswg.org/css-logical-props/#propdef-border-inline-end-color + types: [ + ] + }, + 'border-inline-end-style': { + // https://drafts.csswg.org/css-logical-props/#propdef-border-inline-end-style + types: [ + ] + }, + 'border-inline-end-width': { + // https://drafts.csswg.org/css-logical-props/#propdef-border-inline-end-width + types: [ + ] + }, + 'border-inline-start-color': { + // https://drafts.csswg.org/css-logical-props/#propdef-border-inline-start-color + types: [ + ] + }, + 'border-inline-start-style': { + // https://drafts.csswg.org/css-logical-props/#propdef-border-block-start-style + types: [ + ] + }, + 'border-inline-start-width': { + // https://drafts.csswg.org/css-logical-props/#propdef-border-inline-start-width + types: [ + ] + }, + 'border-image-outset': { + // https://drafts.csswg.org/css-backgrounds-3/#border-image-outset + types: [ + ] + }, + 'border-image-repeat': { + // https://drafts.csswg.org/css-backgrounds-3/#border-image-repeat + types: [ + { type: 'discrete', options: [ [ 'stretch repeat', 'round space' ] ] } + ] + }, + 'border-image-slice': { + // https://drafts.csswg.org/css-backgrounds-3/#border-image-slice + types: [ + ] + }, + 'border-image-source': { + // https://drafts.csswg.org/css-backgrounds-3/#border-image-source + types: [ + { type: 'discrete', + options: [ [ 'url("http://localhost/test-1")', + 'url("http://localhost/test-2")' ] ] } + ] + }, + 'border-image-width': { + // https://drafts.csswg.org/css-backgrounds-3/#border-image-width + types: [ + ] + }, + 'border-left-color': { + // https://drafts.csswg.org/css-backgrounds-3/#border-left-color + types: [ 'color' ] + }, + 'border-left-style': { + // https://drafts.csswg.org/css-backgrounds-3/#border-left-style + types: [ + { type: 'discrete', options: [ [ 'dotted', 'solid' ] ] } + ] + }, + 'border-left-width': { + // https://drafts.csswg.org/css-backgrounds-3/#border-left-width + types: [ 'length' ], + setup: t => { + const element = createElement(t); + element.style.borderLeftStyle = 'solid'; + return element; + } + }, + 'border-right-color': { + // https://drafts.csswg.org/css-backgrounds-3/#border-right-color + types: [ 'color' ] + }, + 'border-right-style': { + // https://drafts.csswg.org/css-backgrounds-3/#border-right-style + types: [ + { type: 'discrete', options: [ [ 'dotted', 'solid' ] ] } + ] + }, + 'border-right-width': { + // https://drafts.csswg.org/css-backgrounds-3/#border-right-width + types: [ 'length' ], + setup: t => { + const element = createElement(t); + element.style.borderRightStyle = 'solid'; + return element; + } + }, + 'border-spacing': { + // https://drafts.csswg.org/css-tables/#propdef-border-spacing + types: [ 'lengthPair' ] + }, + 'border-top-color': { + // https://drafts.csswg.org/css-backgrounds-3/#border-top-color + types: [ 'color' ] + }, + 'border-top-left-radius': { + // https://drafts.csswg.org/css-backgrounds-3/#border-top-left-radius + types: [ + ] + }, + 'border-top-right-radius': { + // https://drafts.csswg.org/css-backgrounds-3/#border-top-right-radius + types: [ + ] + }, + 'border-top-style': { + // https://drafts.csswg.org/css-backgrounds-3/#border-top-style + types: [ + { type: 'discrete', options: [ [ 'dotted', 'solid' ] ] } + ] + }, + 'border-top-width': { + // https://drafts.csswg.org/css-backgrounds-3/#border-top-width + types: [ 'length' ], + setup: t => { + const element = createElement(t); + element.style.borderTopStyle = 'solid'; + return element; + } + }, + 'bottom': { + // https://drafts.csswg.org/css-position/#propdef-bottom + types: [ + ] + }, + 'box-decoration-break': { + // https://drafts.csswg.org/css-break/#propdef-box-decoration-break + types: [ + { type: 'discrete', options: [ [ 'slice', 'clone' ] ] } + ] + }, + 'box-shadow': { + // https://drafts.csswg.org/css-backgrounds/#box-shadow + types: [ 'boxShadowList' ], + }, + 'box-sizing': { + // https://drafts.csswg.org/css-ui-4/#box-sizing + types: [ + { type: 'discrete', options: [ [ 'content-box', 'border-box' ] ] } + ] + }, + 'caption-side': { + // https://drafts.csswg.org/css-tables/#propdef-caption-side + types: [ + { type: 'discrete', options: [ [ 'top', 'bottom' ] ] } + ] + }, + 'caret-color': { + // https://drafts.csswg.org/css-ui/#propdef-caret-color + types: [ 'color' ] + }, + 'clear': { + // https://drafts.csswg.org/css-page-floats/#propdef-clear + types: [ + { type: 'discrete', options: [ [ 'left', 'right' ] ] } + ] + }, + 'clip': { + // https://drafts.fxtf.org/css-masking-1/#propdef-clip + types: [ + 'rect', + { type: 'discrete', options: [ [ 'rect(10px, 10px, 10px, 10px)', + 'auto' ], + [ 'rect(10px, 10px, 10px, 10px)', + 'rect(10px, 10px, 10px, auto)'] ] } + ] + }, + 'clip-path': { + // https://drafts.fxtf.org/css-masking-1/#propdef-clip-path + types: [ + ] + }, + 'clip-rule': { + // https://drafts.fxtf.org/css-masking-1/#propdef-clip-rule + types: [ + { type: 'discrete', options: [ [ 'evenodd', 'nonzero' ] ] } + ] + }, + 'color': { + // https://drafts.csswg.org/css-color/#propdef-color + types: [ 'color' ] + }, + 'color-adjust': { + // https://drafts.csswg.org/css-color-4/#color-adjust + types: [ + { type: 'discrete', options: [ [ 'economy', 'exact' ] ] } + ] + }, + 'color-interpolation': { + // https://svgwg.org/svg2-draft/painting.html#ColorInterpolationProperty + types: [ + { type: 'discrete', options: [ [ 'linearrgb', 'auto' ] ] } + ] + }, + 'color-interpolation-filters': { + // https://drafts.fxtf.org/filters-1/#propdef-color-interpolation-filters + types: [ + { type: 'discrete', options: [ [ 'srgb', 'linearrgb' ] ] } + ] + }, + 'column-count': { + // https://drafts.csswg.org/css-multicol/#propdef-column-count + types: [ 'positiveInteger', + { type: 'discrete', options: [ [ 'auto', '10' ] ] } + ] + }, + 'column-gap': { + // https://drafts.csswg.org/css-multicol/#propdef-column-gap + types: [ 'length', + { type: 'discrete', options: [ [ 'normal', '200px' ] ] } + ] + }, + 'column-rule-color': { + // https://drafts.csswg.org/css-multicol/#propdef-column-rule-color + types: [ 'color' ] + }, + 'column-fill': { + // https://drafts.csswg.org/css-multicol/#propdef-column-fill + types: [ + { type: 'discrete', options: [ [ 'auto', 'balance' ] ] } + ] + }, + 'column-rule-style': { + // https://drafts.csswg.org/css-multicol/#propdef-column-rule-style + types: [ + { type: 'discrete', options: [ [ 'none', 'dotted' ] ] } + ] + }, + 'column-rule-width': { + // https://drafts.csswg.org/css-multicol/#propdef-column-rule-width + types: [ 'length' ], + setup: t => { + const element = createElement(t); + element.style.columnRuleStyle = 'solid'; + return element; + } + }, + 'column-width': { + // https://drafts.csswg.org/css-multicol/#propdef-column-width + types: [ 'length', + { type: 'discrete', options: [ [ 'auto', '1px' ] ] } + ] + }, + 'counter-increment': { + // https://drafts.csswg.org/css-lists-3/#propdef-counter-increment + types: [ + { type: 'discrete', options: [ [ 'ident-1 1', 'ident-2 2' ] ] } + ] + }, + 'counter-reset': { + // https://drafts.csswg.org/css-lists-3/#propdef-counter-reset + types: [ + { type: 'discrete', options: [ [ 'ident-1 1', 'ident-2 2' ] ] } + ] + }, + 'cursor': { + // https://drafts.csswg.org/css2/ui.html#propdef-cursor + types: [ + { type: 'discrete', options: [ [ 'pointer', 'wait' ] ] } + ] + }, + 'dominant-baseline': { + // https://drafts.csswg.org/css-inline/#propdef-dominant-baseline + types: [ + { type: 'discrete', options: [ [ 'ideographic', 'alphabetic' ] ] } + ] + }, + 'empty-cells': { + // https://drafts.csswg.org/css-tables/#propdef-empty-cells + types: [ + { type: 'discrete', options: [ [ 'show', 'hide' ] ] } + ] + }, + 'field-sizing': { + // https://drafts.csswg.org/css-ui/#field-sizing + types: [ + { type: 'discrete', options: [ [ 'fixed', 'content' ] ] } + ] + }, + 'fill': { + // https://svgwg.org/svg2-draft/painting.html#FillProperty + types: [ + ] + }, + 'fill-opacity': { + // https://svgwg.org/svg2-draft/painting.html#FillOpacityProperty + types: [ 'opacity' ] + }, + 'fill-rule': { + // https://svgwg.org/svg2-draft/painting.html#FillRuleProperty + types: [ + { type: 'discrete', options: [ [ 'evenodd', 'nonzero' ] ] } + ] + }, + 'filter': { + // https://drafts.fxtf.org/filters/#propdef-filter + types: [ 'filterList' ] + }, + 'flex-basis': { + // https://drafts.csswg.org/css-flexbox/#propdef-flex-basis + types: [ + 'lengthPercentageOrCalc', + { type: 'discrete', options: [ [ 'auto', '10px' ] ] } + ] + }, + 'flex-direction': { + // https://drafts.csswg.org/css-flexbox/#propdef-flex-direction + types: [ + { type: 'discrete', options: [ [ 'row', 'row-reverse' ] ] } + ] + }, + 'flex-grow': { + // https://drafts.csswg.org/css-flexbox/#flex-grow-property + types: [ 'positiveNumber' ] + }, + 'flex-shrink': { + // https://drafts.csswg.org/css-flexbox/#propdef-flex-shrink + types: [ 'positiveNumber' ] + }, + 'flex-wrap': { + // https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap + types: [ + { type: 'discrete', options: [ [ 'nowrap', 'wrap' ] ] } + ] + }, + 'flood-color': { + // https://drafts.fxtf.org/filters/#FloodColorProperty + types: [ 'color' ] + }, + 'flood-opacity': { + // https://drafts.fxtf.org/filters/#propdef-flood-opacity + types: [ 'opacity' ] + }, + 'font-size': { + // https://drafts.csswg.org/css-fonts-3/#propdef-font-size + types: [ + ] + }, + 'font-size-adjust': { + // https://drafts.csswg.org/css-fonts-3/#propdef-font-size-adjust + types: [ + ] + }, + 'font-stretch': { + // https://drafts.csswg.org/css-fonts-4/#propdef-font-stretch + types: [ 'percentage' ] + }, + 'font-style': { + // https://drafts.csswg.org/css-fonts/#propdef-font-style + types: [ + { type: 'discrete', options: [ [ 'italic', 'oblique' ] ] } + ] + }, + 'float': { + // https://drafts.csswg.org/css-page-floats/#propdef-float + types: [ + { type: 'discrete', options: [ [ 'left', 'right' ] ] } + ] + }, + 'font-family': { + // https://drafts.csswg.org/css-fonts-3/#propdef-font-family + types: [ + { type: 'discrete', options: [ [ 'helvetica', 'verdana' ] ] } + ] + }, + 'font-feature-settings': { + // https://drafts.csswg.org/css-fonts/#descdef-font-feature-settings + types: [ + { type: 'discrete', options: [ [ '"liga" 5', 'normal' ] ] } + ] + }, + 'font-kerning': { + // https://drafts.csswg.org/css-fonts-3/#propdef-font-kerning + types: [ + { type: 'discrete', options: [ [ 'auto', 'normal' ] ] } + ] + }, + 'font-language-override': { + // https://drafts.csswg.org/css-fonts-3/#propdef-font-language-override + types: [ + { type: 'discrete', options: [ [ '"eng"', 'normal' ] ] } + ] + }, + 'font-style': { + // https://drafts.csswg.org/css-fonts-3/#propdef-font-style + types: [ + { type: 'discrete', options: [ [ 'italic', 'oblique' ] ] } + ] + }, + 'font-synthesis': { + // https://drafts.csswg.org/css-fonts-3/#propdef-font-synthesis + types: [ + { type: 'discrete', options: [ [ 'none', 'weight style' ] ] } + ] + }, + 'font-variant-alternates': { + // https://drafts.csswg.org/css-fonts-3/#propdef-font-variant-alternates + types: [ + { type: 'discrete', + options: [ [ 'swash(unknown)', 'stylistic(unknown)' ] ] } + ] + }, + 'font-variant-caps': { + // https://drafts.csswg.org/css-fonts-3/#propdef-font-variant-caps + types: [ + { type: 'discrete', options: [ [ 'small-caps', 'unicase' ] ] } + ] + }, + 'font-variant-east-asian': { + // https://drafts.csswg.org/css-fonts-3/#propdef-font-variant-east-asian + types: [ + { type: 'discrete', options: [ [ 'full-width', 'proportional-width' ] ] } + ] + }, + 'font-variant-emoji': { + // https://drafts.csswg.org/css-fonts/#propdef-font-variant-emoji + types: [ + { type: 'discrete', options: [ [ 'text', 'emoji' ] ] } + ] + }, + 'font-variant-ligatures': { + // https://drafts.csswg.org/css-fonts-3/#propdef-font-variant-ligatures + types: [ + { type: 'discrete', + options: [ [ 'common-ligatures', 'no-common-ligatures' ] ] } + ] + }, + 'font-variant-numeric': { + // https://drafts.csswg.org/css-fonts-3/#propdef-font-variant-numeric + types: [ + { type: 'discrete', options: [ [ 'lining-nums', 'oldstyle-nums' ] ] } + ] + }, + 'font-variant-position': { + // https://drafts.csswg.org/css-fonts-3/#propdef-font-variant-position + types: [ + { type: 'discrete', options: [ [ 'sub', 'super' ] ] } + ] + }, + 'font-variation-settings': { + // https://drafts.csswg.org/css-fonts-4/#descdef-font-face-font-variation-settings + types: [ + 'fontVariationSettings', + { type: 'discrete', + options: [ ['"wdth" 1, "wght" 1.1', '"wdth" 5'], + ['"wdth" 5', 'normal'] + ] }, + ] + }, + 'font-weight': { + // https://drafts.csswg.org/css-fonts-3/#propdef-font-weight + types: [ + ] + }, + 'grid-auto-columns': { + // https://drafts.csswg.org/css-grid/#propdef-grid-auto-columns + types: [ + { type: 'discrete', options: [ [ '1px', '5px' ] ] } + ] + }, + 'grid-auto-flow': { + // https://drafts.csswg.org/css-grid/#propdef-grid-auto-flow + types: [ + { type: 'discrete', options: [ [ 'row', 'column' ] ] } + ] + }, + 'grid-auto-rows': { + // https://drafts.csswg.org/css-grid/#propdef-grid-auto-rows + types: [ + { type: 'discrete', options: [ [ '1px', '5px' ] ] } + ] + }, + 'grid-column-end': { + // https://drafts.csswg.org/css-grid/#propdef-grid-column-end + types: [ + { type: 'discrete', options: [ [ '1', '5' ] ] } + ] + }, + 'grid-column-gap': { + // https://drafts.csswg.org/css-grid/#propdef-grid-column-gap + types: [ + ] + }, + 'grid-column-start': { + // https://drafts.csswg.org/css-grid/#propdef-grid-column-start + types: [ + { type: 'discrete', options: [ [ '1', '5' ] ] } + ] + }, + 'grid-row-end': { + // https://drafts.csswg.org/css-grid/#propdef-grid-row-end + types: [ + { type: 'discrete', options: [ [ '1', '5' ] ] } + ] + }, + 'grid-row-gap': { + // https://drafts.csswg.org/css-grid/#propdef-grid-row-gap + types: [ + ] + }, + 'grid-row-start': { + // https://drafts.csswg.org/css-grid/#propdef-grid-row-start + types: [ + { type: 'discrete', options: [ [ '1', '5' ] ] } + ] + }, + 'grid-template-areas': { + // https://drafts.csswg.org/css-template/#grid-template-areas + types: [ + { type: 'discrete', options: [ [ '". . a b" ". . a b"', 'none' ] ] } + ] + }, + 'height': { + // https://drafts.csswg.org/css21/visudet.html#propdef-height + types: [ + ] + }, + 'hyphens': { + // https://drafts.csswg.org/css-text-3/#propdef-hyphens + types: [ + { type: 'discrete', options: [ [ 'manual', 'none' ] ] } + ] + }, + 'image-orientation': { + // https://drafts.csswg.org/css-images-3/#propdef-image-orientation + types: [ + { type: 'discrete', options: [ [ 'none', 'from-image' ] ] } + ] + }, + 'image-rendering': { + // https://drafts.csswg.org/css-images-3/#propdef-image-rendering + types: [ + ] + }, + 'ime-mode': { + // https://drafts.csswg.org/css-ui/#input-method-editor + types: [ + { type: 'discrete', options: [ [ 'disabled', 'auto' ] ] } + ] + }, + 'initial-letter': { + // https://drafts.csswg.org/css-inline/#propdef-initial-letter + types: [ + { type: 'discrete', options: [ [ '1 2', '3 4' ] ] } + ] + }, +}; + +const gCSSProperties2 = { + 'inline-size': { + // https://drafts.csswg.org/css-logical-props/#propdef-inline-size + types: [ + ] + }, + 'isolation': { + // https://drafts.fxtf.org/compositing-1/#propdef-isolation + types: [ + { type: 'discrete', options: [ [ 'auto', 'isolate' ] ] } + ] + }, + 'justify-content': { + // https://drafts.csswg.org/css-align/#propdef-justify-content + types: [ + { type: 'discrete', options: [ [ 'start', 'end' ] ] } + ] + }, + 'justify-items': { + // https://drafts.csswg.org/css-align/#propdef-justify-items + types: [ + { type: 'discrete', options: [ [ 'start', 'end' ] ] } + ] + }, + 'justify-self': { + // https://drafts.csswg.org/css-align/#propdef-justify-self + types: [ + { type: 'discrete', options: [ [ 'start', 'end' ] ] } + ] + }, + 'left': { + // https://drafts.csswg.org/css-position/#propdef-left + types: [ + ] + }, + 'letter-spacing': { + // https://drafts.csswg.org/css-text-3/#propdef-letter-spacing + types: [ 'length' ] + }, + 'lighting-color': { + // https://drafts.fxtf.org/filters/#LightingColorProperty + types: [ 'color' ] + }, + 'line-height': { + // https://drafts.csswg.org/css-inline/#line-height-property + types: [ + { type: 'discrete', options: [ [ 'normal', '10px' ], + [ 'normal', '10', 'normal', '100px' ] ] } + ] + }, + 'list-style-image': { + // https://drafts.csswg.org/css-lists-3/#propdef-list-style-image + types: [ + { type: 'discrete', + options: [ [ 'url("http://localhost/test-1")', + 'url("http://localhost/test-2")' ] ] } + ] + }, + 'list-style-position': { + // https://drafts.csswg.org/css-lists-3/#propdef-list-style-position + types: [ + { type: 'discrete', options: [ [ 'inside', 'outside' ] ] } + ] + }, + 'list-style-type': { + // https://drafts.csswg.org/css-lists-3/#propdef-list-style-type + types: [ + { type: 'discrete', options: [ [ 'circle', 'square' ] ] } + ] + }, + 'margin-block-end': { + // https://drafts.csswg.org/css-logical-props/#propdef-margin-block-end + types: [ + ] + }, + 'margin-block-start': { + // https://drafts.csswg.org/css-logical-props/#propdef-margin-block-start + types: [ + ] + }, + 'margin-bottom': { + // https://drafts.csswg.org/css-box/#propdef-margin-bottom + types: [ + ] + }, + 'margin-inline-end': { + // https://drafts.csswg.org/css-logical-props/#propdef-margin-inline-end + types: [ + ] + }, + 'margin-inline-start': { + // https://drafts.csswg.org/css-logical-props/#propdef-margin-inline-start + types: [ + ] + }, + 'margin-left': { + // https://drafts.csswg.org/css-box/#propdef-margin-left + types: [ + ] + }, + 'margin-right': { + // https://drafts.csswg.org/css-box/#propdef-margin-right + types: [ + ] + }, + 'margin-top': { + // https://drafts.csswg.org/css-box/#propdef-margin-top + types: [ + ] + }, + 'marker-end': { + // https://svgwg.org/specs/markers/#MarkerEndProperty + types: [ + { type: 'discrete', + options: [ [ 'url("http://localhost/test-1")', + 'url("http://localhost/test-2")' ] ] } + ] + }, + 'marker-mid': { + // https://svgwg.org/specs/markers/#MarkerMidProperty + types: [ + { type: 'discrete', + options: [ [ 'url("http://localhost/test-1")', + 'url("http://localhost/test-2")' ] ] } + ] + }, + 'marker-start': { + // https://svgwg.org/specs/markers/#MarkerStartProperty + types: [ + { type: 'discrete', + options: [ [ 'url("http://localhost/test-1")', + 'url("http://localhost/test-2")' ] ] } + ] + }, + 'mask': { + // https://drafts.fxtf.org/css-masking-1/#the-mask + types: [ + { type: 'discrete', + options: [ [ 'url("http://localhost/test-1")', + 'url("http://localhost/test-2")' ] ] } + ] + }, + 'mask-clip': { + // https://drafts.fxtf.org/css-masking-1/#propdef-mask-clip + types: [ + { type: 'discrete', options: [ [ 'content-box', 'border-box' ] ] } + ] + }, + 'mask-composite': { + // https://drafts.fxtf.org/css-masking-1/#propdef-mask-composite + types: [ + { type: 'discrete', options: [ [ 'add', 'subtract' ] ] } + ] + }, + 'mask-image': { + // https://drafts.fxtf.org/css-masking-1/#propdef-mask-image + types: [ + { type: 'discrete', + options: [ [ 'url("http://localhost/test-1")', + 'url("http://localhost/test-2")' ] ] } + ] + }, + 'mask-mode': { + // https://drafts.fxtf.org/css-masking-1/#propdef-mask-mode + types: [ + { type: 'discrete', options: [ [ 'alpha', 'luminance' ] ] } + ] + }, + 'mask-origin': { + // https://drafts.fxtf.org/css-masking-1/#propdef-mask-origin + types: [ + { type: 'discrete', options: [ [ 'content-box', 'border-box' ] ] } + ] + }, + 'mask-position': { + // https://drafts.fxtf.org/css-masking-1/#propdef-mask-position + types: [ + ] + }, + 'mask-position-x': { + // https://lists.w3.org/Archives/Public/www-style/2014Jun/0166.html + types: [ + ] + }, + 'mask-position-y': { + // https://lists.w3.org/Archives/Public/www-style/2014Jun/0166.html + types: [ + ] + }, + 'mask-repeat': { + // https://drafts.fxtf.org/css-masking-1/#propdef-mask-repeat + types: [ + { type: 'discrete', options: [ [ 'space', 'round' ] ] } + ] + }, + 'mask-size': { + // https://drafts.fxtf.org/css-masking-1/#propdef-mask-size + types: [ + ] + }, + 'mask-type': { + // https://drafts.fxtf.org/css-masking-1/#propdef-mask-type + types: [ + { type: 'discrete', options: [ [ 'alpha', 'luminance' ] ] } + ] + }, + 'max-block-size': { + // https://drafts.csswg.org/css-logical-props/#propdef-max-block-size + types: [ + ] + }, + 'max-height': { + // https://drafts.csswg.org/css21/visudet.html#propdef-max-height + types: [ + ] + }, + 'max-inline-size': { + // https://drafts.csswg.org/css-logical-props/#propdef-max-inline-size + types: [ + ] + }, + 'max-width': { + // https://drafts.csswg.org/css21/visudet.html#propdef-max-width + types: [ + ] + }, + 'min-block-size': { + // https://drafts.csswg.org/css-logical-props/#propdef-min-block-size + types: [ + ] + }, + 'min-height': { + // https://drafts.csswg.org/css21/visudet.html#propdef-min-height + types: [ + ] + }, + 'min-inline-size': { + // https://drafts.csswg.org/css-logical-props/#propdef-min-inline-size + types: [ + ] + }, + 'min-width': { + // https://drafts.csswg.org/css21/visudet.html#propdef-min-width + types: [ + ] + }, + 'mix-blend-mode': { + // https://drafts.fxtf.org/compositing-1/#propdef-mix-blend-mode + types: [ + { type: 'discrete', options: [ [ 'multiply', 'screen' ] ] } + ] + }, + 'object-fit': { + // https://drafts.csswg.org/css-images-3/#propdef-object-fit + types: [ + { type: 'discrete', options: [ [ 'fill', 'contain' ] ] } + ] + }, + 'object-position': { + // https://drafts.csswg.org/css-images-3/#propdef-object-position + types: [ + ] + }, + 'inset-block-end': { + // https://drafts.csswg.org/css-logical-props/#propdef-inset-block-end + types: [ + ] + }, + 'inset-block-start': { + // https://drafts.csswg.org/css-logical-props/#propdef-inset-block-start + types: [ + ] + }, + 'inset-inline-end': { + // https://drafts.csswg.org/css-logical-props/#propdef-inset-inline-end + types: [ + ] + }, + 'inset-inline-start': { + // https://drafts.csswg.org/css-logical-props/#propdef-inset-inline-start + types: [ + ] + }, + 'offset-distance': { + // https://drafts.fxtf.org/motion-1/#offset-distance-property + types: [ 'lengthPercentageOrCalc' ] + }, + 'offset-path': { + // https://drafts.fxtf.org/motion-1/#offset-path-property + types: [ + ] + }, + 'opacity': { + // https://drafts.csswg.org/css-color/#propdef-opacity + types: [ + ] + }, + 'order': { + // https://drafts.csswg.org/css-flexbox/#propdef-order + types: [ 'integer' ] + }, + 'outline-color': { + // https://drafts.csswg.org/css-ui-3/#propdef-outline-color + types: [ 'color' ] + }, + 'outline-offset': { + // https://drafts.csswg.org/css-ui-3/#propdef-outline-offset + types: [ 'length' ] + }, + 'outline-style': { + // https://drafts.csswg.org/css-ui/#propdef-outline-style + types: [ + { type: 'discrete', options: [ [ 'none', 'dotted' ] ] } + ] + }, + 'outline-width': { + // https://drafts.csswg.org/css-ui-3/#propdef-outline-width + types: [ 'length' ], + setup: t => { + const element = createElement(t); + element.style.outlineStyle = 'solid'; + return element; + } + }, + 'overflow': { + // https://drafts.csswg.org/css-overflow/#propdef-overflow + types: [ + ] + }, + 'overflow-wrap': { + // https://drafts.csswg.org/css-text-3/#propdef-overflow-wrap + types: [ + { type: 'discrete', options: [ [ 'normal', 'break-word' ] ] } + ] + }, + 'overflow-x': { + // https://drafts.csswg.org/css-overflow-3/#propdef-overflow-x + types: [ + { type: 'discrete', options: [ [ 'visible', 'hidden' ] ] } + ] + }, + 'overflow-y': { + // https://drafts.csswg.org/css-overflow-3/#propdef-overflow-y + types: [ + { type: 'discrete', options: [ [ 'visible', 'hidden' ] ] } + ] + }, + 'padding-block-end': { + // https://drafts.csswg.org/css-logical-props/#propdef-padding-block-end + types: [ + ] + }, + 'padding-block-start': { + // https://drafts.csswg.org/css-logical-props/#propdef-padding-block-start + types: [ + ] + }, + 'padding-bottom': { + // https://drafts.csswg.org/css-box/#propdef-padding-bottom + types: [ + ] + }, + 'padding-inline-end': { + // https://drafts.csswg.org/css-logical-props/#propdef-padding-inline-end + types: [ + ] + }, + 'padding-inline-start': { + // https://drafts.csswg.org/css-logical-props/#propdef-padding-inline-start + types: [ + ] + }, + 'padding-left': { + // https://drafts.csswg.org/css-box/#propdef-padding-left + types: [ + ] + }, + 'padding-right': { + // https://drafts.csswg.org/css-box/#propdef-padding-right + types: [ + ] + }, + 'padding-top': { + // https://drafts.csswg.org/css-box/#propdef-padding-top + types: [ + ] + }, + 'page-break-after': { + // https://drafts.csswg.org/css-break-3/#propdef-break-after + types: [ + { type: 'discrete', options: [ [ 'always', 'auto' ] ] } + ] + }, + 'page-break-before': { + // https://drafts.csswg.org/css-break-3/#propdef-break-before + types: [ + { type: 'discrete', options: [ [ 'always', 'auto' ] ] } + ] + }, + 'page-break-inside': { + // https://drafts.csswg.org/css-break-3/#propdef-break-inside + types: [ + { type: 'discrete', options: [ [ 'auto', 'avoid' ] ] } + ] + }, + 'paint-order': { + // https://svgwg.org/svg2-draft/painting.html#PaintOrderProperty + types: [ + { type: 'discrete', options: [ [ 'fill', 'stroke' ] ] } + ] + }, + 'perspective': { + // https://drafts.csswg.org/css-transforms-1/#propdef-perspective + types: [ 'length' ] + }, + 'perspective-origin': { + // https://drafts.csswg.org/css-transforms-1/#propdef-perspective-origin + types: [ 'position' ] + }, + 'pointer-events': { + // https://svgwg.org/svg2-draft/interact.html#PointerEventsProperty + types: [ + { type: 'discrete', options: [ [ 'fill', 'none' ] ] } + ] + }, + 'position': { + // https://drafts.csswg.org/css-position/#propdef-position + types: [ + { type: 'discrete', options: [ [ 'absolute', 'fixed' ] ] } + ] + }, + 'quotes': { + // https://drafts.csswg.org/css-content-3/#propdef-quotes + types: [ + { type: 'discrete', options: [ [ '"“" "”" "‘" "’"', '"‘" "’" "“" "”"' ] ] } + ] + }, + 'resize': { + // https://drafts.csswg.org/css-ui/#propdef-resize + types: [ + { type: 'discrete', options: [ [ 'both', 'horizontal' ] ] } + ] + }, + 'right': { + // https://drafts.csswg.org/css-position/#propdef-right + types: [ + ] + }, + 'ruby-align': { + // https://drafts.csswg.org/css-ruby-1/#propdef-ruby-align + types: [ + { type: 'discrete', options: [ [ 'start', 'center' ] ] } + ] + }, + 'ruby-position': { + // https://drafts.csswg.org/css-ruby-1/#propdef-ruby-position + types: [ + { type: 'discrete', options: [ [ 'under', 'over' ] ] } + ], + setup: t => { + return createElement(t, 'ruby'); + } + }, + 'scroll-behavior': { + // https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior + types: [ + { type: 'discrete', options: [ [ 'auto', 'smooth' ] ] } + ] + }, + 'scrollbar-color': { + // https://drafts.csswg.org/css-scrollbars/#propdef-scrollbar-color + types: [ 'colorPair' ] + }, + 'scrollbar-gutter': { + // https://drafts.csswg.org/css-overflow/#propdef-scrollbar-gutter + types: [ + { type: 'discrete', options: [ [ 'auto', 'stable' ], [ 'auto', 'stable both-edges' ], [ 'stable', 'stable both-edges' ] ] } + ] + }, + 'scrollbar-width': { + // https://drafts.csswg.org/css-scrollbars/#propdef-scrollbar-width + types: [ + { type: 'discrete', options: [ [ 'auto', 'thin' ], [ 'auto', 'none' ], [ 'thin', 'none' ] ] } + ] + }, + 'shape-outside': { + // http://dev.w3.org/csswg/css-shapes/#propdef-shape-outside + types: [ + { type: 'discrete', + options: [ [ 'url("http://localhost/test-1")', + 'url("http://localhost/test-2")' ] ] } + ] + }, + 'shape-rendering': { + // https://svgwg.org/svg2-draft/painting.html#ShapeRenderingProperty + types: [ + { type: 'discrete', options: [ [ 'optimizeSpeed', 'crispEdges' ] ] } + ] + }, + 'stop-color': { + // https://svgwg.org/svg2-draft/pservers.html#StopColorProperty + types: [ 'color' ] + }, + 'stop-opacity': { + // https://svgwg.org/svg2-draft/pservers.html#StopOpacityProperty + types: [ 'opacity' ] + }, + 'stroke': { + // https://svgwg.org/svg2-draft/painting.html#StrokeProperty + types: [ + ] + }, + 'stroke-dasharray': { + // https://svgwg.org/svg2-draft/painting.html#StrokeDasharrayProperty + types: [ + 'dasharray', + { type: 'discrete', options: [ [ 'none', '10px, 20px' ] ] } + ] + }, + 'stroke-dashoffset': { + // https://svgwg.org/svg2-draft/painting.html#StrokeDashoffsetProperty + types: [ + ] + }, + 'stroke-linecap': { + // https://svgwg.org/svg2-draft/painting.html#StrokeLinecapProperty + types: [ + { type: 'discrete', options: [ [ 'round', 'square' ] ] } + ] + }, + 'stroke-linejoin': { + // https://svgwg.org/svg2-draft/painting.html#StrokeLinejoinProperty + types: [ + { type: 'discrete', options: [ [ 'round', 'miter' ] ] } + ], + setup: t => { + return createElement(t, 'rect'); + } + }, + 'stroke-miterlimit': { + // https://svgwg.org/svg2-draft/painting.html#StrokeMiterlimitProperty + types: [ 'positiveNumber' ] + }, + 'stroke-opacity': { + // https://svgwg.org/svg2-draft/painting.html#StrokeOpacityProperty + types: [ 'opacity' ] + }, + 'stroke-width': { + // https://svgwg.org/svg2-draft/painting.html#StrokeWidthProperty + types: [ + ] + }, + 'table-layout': { + // https://drafts.csswg.org/css-tables/#propdef-table-layout + types: [ + { type: 'discrete', options: [ [ 'auto', 'fixed' ] ] } + ] + }, + 'text-align': { + // https://drafts.csswg.org/css-text-3/#propdef-text-align + types: [ + { type: 'discrete', options: [ [ 'start', 'end' ] ] } + ] + }, + 'text-align-last': { + // https://drafts.csswg.org/css-text-3/#propdef-text-align-last + types: [ + { type: 'discrete', options: [ [ 'start', 'end' ] ] } + ] + }, + 'text-anchor': { + // https://svgwg.org/svg2-draft/text.html#TextAnchorProperty + types: [ + { type: 'discrete', options: [ [ 'middle', 'end' ] ] } + ] + }, + 'text-autospace': { + // https://drafts.csswg.org/css-text-4/#text-autospace-property + types: [ + { type: 'discrete', options: [ [ 'normal', 'no-autospace' ] ] } + ] + }, + 'text-decoration-color': { + // https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration-color + types: [ 'color' ] + }, + 'text-decoration-line': { + // https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration-line + types: [ + { type: 'discrete', options: [ [ 'underline', 'overline' ] ] } + ] + }, + 'text-decoration-style': { + // http://dev.w3.org/csswg/css-text-decor-3/#propdef-text-decoration-style + types: [ + { type: 'discrete', options: [ [ 'solid', 'dotted' ] ] } + ] + }, + 'text-emphasis-color': { + // https://drafts.csswg.org/css-text-decor-3/#propdef-text-emphasis-color + types: [ 'color' ] + }, + 'text-emphasis-position': { + // http://dev.w3.org/csswg/css-text-decor-3/#propdef-text-emphasis-position + types: [ + { type: 'discrete', options: [ [ 'over', 'under left' ] ] } + ] + }, + 'text-emphasis-style': { + // http://dev.w3.org/csswg/css-text-decor-3/#propdef-text-emphasis-style + types: [ + { type: 'discrete', options: [ [ 'circle', 'open dot' ] ] } + ] + }, + 'text-group-align': { + // https://drafts.csswg.org/css-text-4/#propdef-text-group-align + types: [ + { type: 'discrete', options: [ [ 'none', 'center' ] ] } + ] + }, + 'text-indent': { + // https://drafts.csswg.org/css-text-3/#propdef-text-indent + types: [ + ] + }, + 'text-overflow': { + // https://drafts.csswg.org/css-ui/#propdef-text-overflow + types: [ + { type: 'discrete', options: [ [ 'clip', 'ellipsis' ] ] } + ] + }, + 'text-rendering': { + // https://svgwg.org/svg2-draft/painting.html#TextRenderingProperty + types: [ + { type: 'discrete', options: [ [ 'optimizeSpeed', 'optimizeLegibility' ] ] } + ] + }, + 'text-shadow': { + // https://drafts.csswg.org/css-text-decor-3/#propdef-text-shadow + types: [ 'textShadowList' ], + setup: t => { + const element = createElement(t); + element.style.color = 'green'; + return element; + } + }, + 'text-spacing-trim': { + // https://drafts.csswg.org/css-text-4/#text-spacing-trim-property + types: [ + { type: 'discrete', options: [ [ 'normal', 'space-all' ] ] } + ] + }, + 'text-transform': { + // https://drafts.csswg.org/css-text-3/#propdef-text-transform + types: [ + { type: 'discrete', options: [ [ 'capitalize', 'uppercase' ] ] } + ] + }, + 'text-wrap': { + // https://drafts.csswg.org/css-text-4/#propdef-text-wrap + types: [ + { type: 'discrete', options: [ [ 'wrap', 'nowrap' ] ] } + ] + }, + 'touch-action': { + // https://w3c.github.io/pointerevents/#the-touch-action-css-property + types: [ + { type: 'discrete', options: [ [ 'auto', 'none' ] ] } + ] + }, + 'top': { + // https://drafts.csswg.org/css-position/#propdef-top + types: [ + ] + }, + 'transform': { + // https://drafts.csswg.org/css-transforms/#propdef-transform + types: [ 'transformList' ] + }, + 'transform-box': { + // https://drafts.csswg.org/css-transforms/#propdef-transform-box + types: [ + { type: 'discrete', options: [ [ 'fill-box', 'border-box' ] ] } + ] + }, + 'transform-origin': { + // https://drafts.csswg.org/css-transforms/#propdef-transform-origin + types: [ + ] + }, + 'transform-style': { + // https://drafts.csswg.org/css-transforms/#propdef-transform-style + types: [ + { type: 'discrete', options: [ [ 'flat', 'preserve-3d' ] ] } + ] + }, + 'rotate': { + // https://drafts.csswg.org/css-transforms-2/#individual-transforms + types: [ 'rotateList' ] + }, + 'translate': { + // https://drafts.csswg.org/css-transforms-2/#individual-transforms + types: [ 'translateList' ], + setup: t => { + // We need to set a width/height for resolving percentages against. + const element = createElement(t); + element.style.width = '100px'; + element.style.height = '100px'; + return element; + } + }, + 'scale': { + // https://drafts.csswg.org/css-transforms-2/#individual-transforms + types: [ 'scaleList' ] + }, + 'vector-effect': { + // https://svgwg.org/svg2-draft/coords.html#VectorEffectProperty + types: [ + { type: 'discrete', options: [ [ 'none', 'non-scaling-stroke' ] ] }, + ] + }, + 'vertical-align': { + // https://drafts.csswg.org/css21/visudet.html#propdef-vertical-align + types: [ + ] + }, + 'view-transition-name': { + // https://drafts.csswg.org/css-view-transitions/#propdef-view-transition-name + types: [ + { type: 'discrete', options: [ [ 'none', 'header' ] ] }, + ] + }, + 'visibility': { + // https://drafts.csswg.org/css2/visufx.html#propdef-visibility + types: [ 'visibility' ] + }, + 'white-space': { + // https://drafts.csswg.org/css-text-4/#propdef-white-space + types: [ + { type: 'discrete', options: [ [ 'pre', 'nowrap' ] ] } + ] + }, + 'white-space-collapse': { + // https://drafts.csswg.org/css-text-4/#propdef-white-space-collapse + types: [ + { type: 'discrete', options: [ [ 'collapse', 'preserve' ] ] } + ] + }, + 'width': { + // https://drafts.csswg.org/css21/visudet.html#propdef-width + types: [ + ] + }, + 'word-break': { + // https://drafts.csswg.org/css-text-3/#propdef-word-break + types: [ + { type: 'discrete', options: [ [ 'keep-all', 'break-all' ] ] } + ] + }, + 'word-spacing': { + // https://drafts.csswg.org/css-text-3/#propdef-word-spacing + types: [ 'lengthPercentageOrCalc' ] + }, + 'z-index': { + // https://drafts.csswg.org/css-position/#propdef-z-index + types: [ + ] + }, +}; + +function testAnimationSamples(animation, idlName, testSamples) { + const pseudoType = animation.effect.pseudoElement; + const target = animation.effect.target; + for (const testSample of testSamples) { + animation.currentTime = testSample.time; + assert_equals(getComputedStyle(target, pseudoType)[idlName].toLowerCase(), + testSample.expected, + `The value should be ${testSample.expected}` + + ` at ${testSample.time}ms`); + } +} + +function toOrderedArray(string) { + return string.split(/\s*,\s/).sort(); +} + +// This test is for some list-based CSS properties such as font-variant-settings +// don't specify an order for serializing computed values. +// This test is for such the property. +function testAnimationSamplesWithAnyOrder(animation, idlName, testSamples) { + const type = animation.effect.pseudoElement; + const target = animation.effect.target; + for (const testSample of testSamples) { + animation.currentTime = testSample.time; + + // Convert to array and sort the expected and actual value lists first + // before comparing them. + const computedValues = + toOrderedArray(getComputedStyle(target, type)[idlName]); + const expectedValues = toOrderedArray(testSample.expected); + + assert_array_equals(computedValues, expectedValues, + `The computed values should be ${expectedValues}` + + ` at ${testSample.time}ms`); + } +} + +function RoundMatrix(style) { + var matrixMatch = style.match(/^(matrix(3d)?)\(.+\)$/); + if (!!matrixMatch) { + var matrixType = matrixMatch[1]; + var matrixArgs = style.substr(matrixType.length); + var extractmatrix = function(matrixStr) { + var list = []; + var regex = /[+\-]?[0-9]+[.]?[0-9]*(e[+/-][0-9]+)?/g; + var match = undefined; + do { + match = regex.exec(matrixStr); + if (match) { + list.push(parseFloat(parseFloat(match[0]).toFixed(6))); + } + } while (match); + return list; + } + return matrixType + '(' + extractmatrix(matrixArgs).join(', ') + ')'; + } + return style; +} + +function testAnimationSampleMatrices(animation, idlName, testSamples) { + const target = animation.effect.target; + for (const testSample of testSamples) { + animation.currentTime = testSample.time; + const actual = RoundMatrix(getComputedStyle(target)[idlName]); + const expected = RoundMatrix(createMatrixFromArray(testSample.expected)); + assert_matrix_equals(actual, expected, + `The value should be ${expected} at` + + ` ${testSample.time}ms but got ${actual}`); + } +} + +function testAnimationSampleRotate3d(animation, idlName, testSamples) { + const target = animation.effect.target; + for (const testSample of testSamples) { + animation.currentTime = testSample.time; + const actual = getComputedStyle(target)[idlName]; + const expected = testSample.expected; + assert_rotate3d_equals(actual, expected, + `The value should be ${expected} at` + + ` ${testSample.time}ms but got ${actual}`); + } +} + +function createTestElement(t, setup) { + return setup ? setup(t) : createElement(t); +} + +function isSupported(property) { + const testKeyframe = new TestKeyframe(propertyToIDL(property)); + assert_not_equals(window.KeyframeEffect, undefined, 'window.KeyframeEffect'); + try { + // Since TestKeyframe returns 'undefined' for |property|, + // the KeyframeEffect constructor will throw + // if the string 'undefined' is not a valid value for the property. + new KeyframeEffect(null, testKeyframe); + } catch(e) {} + return testKeyframe.propAccessCount !== 0; +} + +function TestKeyframe(testProp) { + let _propAccessCount = 0; + + Object.defineProperty(this, testProp, { + get: function() { _propAccessCount++; }, + enumerable: true + }); + + Object.defineProperty(this, 'propAccessCount', { + get: function() { return _propAccessCount; } + }); +} + +function propertyToIDL(property) { + // https://drafts.csswg.org/web-animations/#animation-property-name-to-idl-attribute-name + if (property === 'float') { + return 'cssFloat'; + } + return property.replace(/-[a-z]/gi, + function (str) { + return str.substr(1).toUpperCase(); }); +} +function calcFromPercentage(idlName, percentageValue) { + const examElem = document.createElement('div'); + document.body.appendChild(examElem); + examElem.style[idlName] = percentageValue; + + const calcValue = getComputedStyle(examElem)[idlName]; + document.body.removeChild(examElem); + + return calcValue; +} diff --git a/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js new file mode 100644 index 0000000000..4d693561ce --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js @@ -0,0 +1,2936 @@ +'use strict'; + +const expected = values => { + // Some properties, such as line-height, report computed values which differ + // from the keyframe values. To support this, we allow optional values to specify + // explicit "from" and "to" values as additional keyframe values. + const [ from, to ] = values; + return [ values[2] ?? from, values[3] ?? to ]; +}; + +const discreteType = { + testInterpolation: (property, setup, options) => { + for (const keyframes of options) { + const [ from, to ] = keyframes; + const [ expectedFrom, expectedTo ] = expected(keyframes); + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: [from, to] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: expectedFrom.toLowerCase() }, + { time: 499, expected: expectedFrom.toLowerCase() }, + { time: 500, expected: expectedTo.toLowerCase() }, + { time: 1000, expected: expectedTo.toLowerCase() }]); + }, `${property} uses discrete animation when animating between` + + ` "${from}" and "${to}" with linear easing`); + + test(t => { + // Easing: http://cubic-bezier.com/#.68,0,1,.01 + // With this curve, we don't reach the 50% point until about 95% of + // the time has expired. + const idlName = propertyToIDL(property); + const keyframes = {}; + const target = createTestElement(t, setup); + const animation = target.animate( + { [idlName]: [from, to] }, + { + duration: 1000, + fill: 'both', + easing: 'cubic-bezier(0.68,0,1,0.01)', + } + ); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: expectedFrom.toLowerCase() }, + { time: 940, expected: expectedFrom.toLowerCase() }, + { time: 960, expected: expectedTo.toLowerCase() }]); + }, `${property} uses discrete animation when animating between` + + ` "${from}" and "${to}" with effect easing`); + + test(t => { + // Easing: http://cubic-bezier.com/#.68,0,1,.01 + // With this curve, we don't reach the 50% point until about 95% of + // the time has expired. + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { + [idlName]: [from, to], + easing: 'cubic-bezier(0.68,0,1,0.01)', + }, + { duration: 1000, fill: 'both' } + ); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: expectedFrom.toLowerCase() }, + { time: 940, expected: expectedFrom.toLowerCase() }, + { time: 960, expected: expectedTo.toLowerCase() }]); + }, `${property} uses discrete animation when animating between` + + ` "${from}" and "${to}" with keyframe easing`); + } + }, + + testAdditionOrAccumulation: (property, setup, options, composite) => { + for (const keyframes of options) { + const [ from, to ] = keyframes; + const [ expectedFrom, expectedTo ] = expected(keyframes); + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.animate({ [idlName]: [from, from] }, 1000); + const animation = target.animate( + { [idlName]: [to, to] }, + { duration: 1000, composite } + ); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: expectedTo.toLowerCase() }]); + }, `${property}: "${to}" onto "${from}"`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.animate({ [idlName]: [to, to] }, 1000); + const animation = target.animate( + { [idlName]: [from, from] }, + { duration: 1000, composite } + ); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: expectedFrom.toLowerCase() }]); + }, `${property}: "${from}" onto "${to}"`); + } + }, + + testAddition: function(property, setup, options) { + this.testAdditionOrAccumulation(property, setup, options, 'add'); + }, + + testAccumulation: function(property, setup, options) { + this.testAdditionOrAccumulation(property, setup, options, 'accumulate'); + }, +}; + +const lengthType = { + testInterpolation: (property, setup) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['10px', '50px'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: '30px' }]); + }, `${property} supports animating as a length`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['1rem', '5rem'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: '30px' }]); + }, `${property} supports animating as a length of rem`); + }, + + testAdditionOrAccumulation: (property, setup, composite) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '10px'; + const animation = target.animate( + { [idlName]: ['10px', '50px'] }, + { duration: 1000, composite } + ); + testAnimationSamples(animation, idlName, [{ time: 0, expected: '20px' }]); + }, `${property}: length`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '1rem'; + const animation = target.animate( + { [idlName]: ['1rem', '5rem'] }, + { duration: 1000, composite } + ); + testAnimationSamples(animation, idlName, [{ time: 0, expected: '20px' }]); + }, `${property}: length of rem`); + }, + + testAddition: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'add'); + }, + + testAccumulation: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'accumulate'); + }, +}; + +const lengthPairType = { + testInterpolation: (property, setup) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { [idlName]: ['10px 10px', '50px 50px'] }, + { duration: 1000, fill: 'both' } + ); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: '30px 30px' }]); + }, `${property} supports animating as a length pair`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { [idlName]: ['1rem 1rem', '5rem 5rem'] }, + { duration: 1000, fill: 'both' } + ); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: '30px 30px' }]); + }, `${property} supports animating as a length pair of rem`); + }, + + testAdditionOrAccumulation: (property, setup, composite) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '10px 10px'; + const animation = target.animate( + { [idlName]: ['10px 10px', '50px 50px'] }, + { duration: 1000, composite } + ); + testAnimationSamples( + animation, + idlName, + [{ time: 0, expected: '20px 20px' }] + ); + }, `${property}: length pair`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '1rem 1rem'; + const animation = target.animate( + { [idlName]: ['1rem 1rem', '5rem 5rem'] }, + { duration: 1000, composite } + ); + testAnimationSamples( + animation, + idlName, + [{ time: 0, expected: '20px 20px' }] + ); + }, `${property}: length pair of rem`); + }, + + testAddition: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'add'); + }, + + testAccumulation: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'accumulate'); + }, +}; + +const percentageType = { + testInterpolation: (property, setup) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['10%', '50%'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: '30%' }]); + }, `${property} supports animating as a percentage`); + }, + + testAdditionOrAccumulation: (property, setup, composite) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '60%'; + const animation = target.animate( + { [idlName]: ['70%', '100%'] }, + { duration: 1000, composite } + ); + testAnimationSamples(animation, idlName, [{ time: 0, expected: '130%' }]); + }, `${property}: percentage`); + }, + + testAddition: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'add'); + }, + + testAccumulation: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'accumulate'); + }, +}; + +const integerType = { + testInterpolation: (property, setup) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: [-2, 2] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: '0' }]); + }, `${property} supports animating as an integer`); + }, + + testAdditionOrAccumulation: (property, setup, composite) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = -1; + const animation = target.animate( + { [idlName]: [-2, 2] }, + { duration: 1000, composite } + ); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: '-3' }]); + }, `${property}: integer`); + }, + + testAddition: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'add'); + }, + + testAccumulation: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'accumulate'); + }, +}; + +const positiveIntegerType = { + testInterpolation: (property, setup) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: [1, 3] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [ { time: 500, expected: '2' } ]); + }, `${property} supports animating as a positive integer`); + }, + + testAdditionOrAccumulation: (property, setup, composite) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 1; + const animation = target.animate( + { [idlName]: [2, 5] }, + { duration: 1000, composite } + ); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: '3' }]); + }, `${property}: positive integer`); + }, + + testAddition: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'add'); + }, + + testAccumulation: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'accumulate'); + }, +}; + +const lengthPercentageOrCalcType = { + testInterpolation: (property, setup) => { + lengthType.testInterpolation(property, setup); + percentageType.testInterpolation(property, setup); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['10px', '20%'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'calc(10% + 5px)' }]); + }, `${property} supports animating as combination units "px" and "%"`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['10%', '2em'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'calc(5% + 10px)' }]); + }, `${property} supports animating as combination units "%" and "em"`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['1em', '2rem'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: '15px' }]); + }, `${property} supports animating as combination units "em" and "rem"`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { [idlName]: ['10px', 'calc(1em + 20%)'] }, + { duration: 1000, fill: 'both' } + ); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'calc(10% + 10px)' }]); + }, `${property} supports animating as combination units "px" and "calc"`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { [idlName]: ['calc(10px + 10%)', 'calc(1em + 1rem + 20%)'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 500, + expected: 'calc(15% + 15px)' }]); + }, `${property} supports animating as a calc`); + }, + + testAdditionOrAccumulation: (property, setup, composite) => { + lengthType.testAddition(property, setup); + percentageType.testAddition(property, setup); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '10px'; + const animation = target.animate({ [idlName]: ['10%', '50%'] }, + { duration: 1000, composite }); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: 'calc(10% + 10px)' }]); + }, `${property}: units "%" onto "px"`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '10%'; + const animation = target.animate({ [idlName]: ['10px', '50px'] }, + { duration: 1000, composite }); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: 'calc(10% + 10px)' }]); + }, `${property}: units "px" onto "%"`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '10%'; + const animation = target.animate({ [idlName]: ['2rem', '5rem'] }, + { duration: 1000, composite }); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: 'calc(10% + 20px)' }]); + }, `${property}: units "rem" onto "%"`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '2rem'; + const animation = target.animate({ [idlName]: ['10%', '50%'] }, + { duration: 1000, composite }); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: 'calc(10% + 20px)' }]); + }, `${property}: units "%" onto "rem"`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '2em'; + const animation = target.animate({ [idlName]: ['2rem', '5rem'] }, + { duration: 1000, composite }); + testAnimationSamples(animation, idlName, [{ time: 0, expected: '40px' }]); + }, `${property}: units "rem" onto "em"`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '2rem'; + const animation = target.animate({ [idlName]: ['2em', '5em'] }, + { duration: 1000, composite }); + testAnimationSamples(animation, idlName, [{ time: 0, expected: '40px' }]); + }, `${property}: units "em" onto "rem"`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '10px'; + const animation = target.animate({ [idlName]: ['calc(2em + 20%)', + 'calc(5rem + 50%)'] }, + { duration: 1000, composite }); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: 'calc(20% + 30px)' }]); + }, `${property}: units "calc" onto "px"`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'calc(10px + 10%)'; + const animation = target.animate({ [idlName]: ['calc(20px + 20%)', + 'calc(2em + 3rem + 40%)'] }, + { duration: 1000, composite }); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: 'calc(30% + 30px)' }]); + }, `${property}: calc`); + }, + + testAddition: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'add'); + }, + + testAccumulation: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'accumulate'); + }, +}; + +const positiveNumberType = { + testInterpolation: (property, setup, expectedUnit='') => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: [1.1, 1.5] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: '1.3' + expectedUnit }]); + }, `${property} supports animating as a positive number`); + }, + + testAdditionOrAccumulation: (property, setup, composite) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 1.1; + const animation = target.animate({ [idlName]: [1.1, 1.5] }, + { duration: 1000, composite }); + testAnimationSamples(animation, idlName, [{ time: 0, expected: '2.2' }]); + }, `${property}: positive number`); + }, + + testAddition: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'add'); + }, + + testAccumulation: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'accumulate'); + }, +}; + +// Test using float values in the range [0, 1] +const opacityType = { + testInterpolation: (property, setup) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: [0.3, 0.8] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: '0.55' }]); + }, `${property} supports animating as a [0, 1] number`); + }, + + testAdditionOrAccumulation: (property, setup, composite) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 0.3; + const animation = target.animate({ [idlName]: [0.3, 0.8] }, + { duration: 1000, composite }); + testAnimationSamples(animation, idlName, [{ time: 0, expected: '0.6' }]); + }, `${property}: [0, 1] number`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 0.8; + const animation = target.animate({ [idlName]: [0.3, 0.8] }, + { duration: 1000, composite }); + testAnimationSamples(animation, idlName, [{ time: 0, expected: '1' }]); + }, `${property}: [0, 1] number (clamped)`); + }, + + testAddition: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'add'); + }, + + testAccumulation: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'accumulate'); + }, +}; + +const visibilityType = { + testInterpolation: (property, setup) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['visible', 'hidden'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: 'visible' }, + { time: 999, expected: 'visible' }, + { time: 1000, expected: 'hidden' }]); + }, `${property} uses visibility animation when animating` + + ' from "visible" to "hidden"'); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['hidden', 'visible'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: 'hidden' }, + { time: 1, expected: 'visible' }, + { time: 1000, expected: 'visible' }]); + }, `${property} uses visibility animation when animating` + + ' from "hidden" to "visible"'); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['hidden', 'collapse'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: 'hidden' }, + { time: 499, expected: 'hidden' }, + { time: 500, expected: 'collapse' }, + { time: 1000, expected: 'collapse' }]); + }, `${property} uses visibility animation when animating` + + ' from "hidden" to "collapse"'); + + test(t => { + // Easing: http://cubic-bezier.com/#.68,-.55,.26,1.55 + // With this curve, the value is less than 0 till about 34% + // also more than 1 since about 63% + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: ['visible', 'hidden'] }, + { duration: 1000, fill: 'both', + easing: 'cubic-bezier(0.68, -0.55, 0.26, 1.55)' }); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: 'visible' }, + { time: 1, expected: 'visible' }, + { time: 330, expected: 'visible' }, + { time: 340, expected: 'visible' }, + { time: 620, expected: 'visible' }, + { time: 630, expected: 'hidden' }, + { time: 1000, expected: 'hidden' }]); + }, `${property} uses visibility animation when animating` + + ' from "visible" to "hidden" with easeInOutBack easing'); + }, + + testAdditionOrAccumulation: (property, setup, composite) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'visible'; + const animation = target.animate({ [idlName]: ['visible', 'hidden'] }, + { duration: 1000, fill: 'both', + composite }); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: 'visible' }, + { time: 1000, expected: 'hidden' }]); + }, `${property}: onto "visible"`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'hidden'; + const animation = target.animate({ [idlName]: ['hidden', 'visible'] }, + { duration: 1000, fill: 'both', + composite }); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: 'hidden' }, + { time: 1000, expected: 'visible' }]); + }, `${property}: onto "hidden"`); + }, + + testAddition: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'add'); + }, + + testAccumulation: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'accumulate'); + }, +}; + +const colorType = { + testInterpolation: (property, setup) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['rgb(255, 0, 0)', + 'rgb(0, 0, 255)'] }, + 1000); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'rgb(128, 0, 128)' }]); + }, `${property} supports animating as color of rgb()`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['#ff0000', '#0000ff'] }, + 1000); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'rgb(128, 0, 128)' }]); + }, `${property} supports animating as color of #RGB`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['hsl(0, 100%, 50%)', + 'hsl(240, 100%, 50%)'] }, + 1000); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'rgb(128, 0, 128)' }]); + }, `${property} supports animating as color of hsl()`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { [idlName]: ['#ff000066', '#0000ffcc'] }, + 1000 + ); + // R: 255 * (0.4 * 0.5) / 0.6 = 85 + // B: 255 * (0.8 * 0.5) / 0.6 = 170 + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'rgba(85, 0, 170, 0.6)' }]); + }, `${property} supports animating as color of #RGBa`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { + [idlName]: ['rgba(255, 0, 0, 0.4)', 'rgba(0, 0, 255, 0.8)'], + }, + 1000 + ); + testAnimationSamples(animation, idlName, // Same as above. + [{ time: 500, expected: 'rgba(85, 0, 170, 0.6)' }]); + }, `${property} supports animating as color of rgba()`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { + [idlName]: ['hsla(0, 100%, 50%, 0.4)', 'hsla(240, 100%, 50%, 0.8)'], + }, + 1000 + ); + testAnimationSamples(animation, idlName, // Same as above. + [{ time: 500, expected: 'rgba(85, 0, 170, 0.6)' }]); + }, `${property} supports animating as color of hsla()`); + }, + + testAdditionOrAccumulation: (property, setup, composite) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rgb(128, 128, 128)'; + const animation = target.animate( + { + [idlName]: ['rgb(255, 0, 0)', 'rgb(0, 0, 255)'], + }, + { duration: 1000, composite } + ); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: 'rgb(255, 128, 128)' }, + // The value at 50% is interpolated + // from 'rgb(128+255, 128, 128)' + // to 'rgb(128, 128, 128+255)'. + { time: 500, expected: 'rgb(255, 128, 255)' }]); + }, `${property} supports animating as color of rgb() with overflowed ` + + ' from and to values'); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rgb(128, 128, 128)'; + const animation = target.animate({ [idlName]: ['#ff0000', '#0000ff'] }, + { duration: 1000, composite }); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: 'rgb(255, 128, 128)' }]); + }, `${property} supports animating as color of #RGB`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rgb(128, 128, 128)'; + const animation = target.animate({ [idlName]: ['hsl(0, 100%, 50%)', + 'hsl(240, 100%, 50%)'] }, + { duration: 1000, composite }); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: 'rgb(255, 128, 128)' }]); + }, `${property} supports animating as color of hsl()`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rgb(128, 128, 128)'; + const animation = target.animate( + { [idlName]: ['#ff000066', '#0000ffcc'] }, + { duration: 1000, composite } + ); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: 'rgb(230, 128, 128)' }]); + }, `${property} supports animating as color of #RGBa`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rgb(128, 128, 128)'; + const animation = target.animate({ [idlName]: ['rgba(255, 0, 0, 0.4)', + 'rgba(0, 0, 255, 0.8)'] }, + { duration: 1000, composite }); + testAnimationSamples(animation, idlName, // Same as above. + [{ time: 0, expected: 'rgb(230, 128, 128)' }]); + }, `${property} supports animating as color of rgba()`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rgb(128, 128, 128)'; + const animation = target.animate( + { + [idlName]: ['hsla(0, 100%, 50%, 0.4)', 'hsla(240, 100%, 50%, 0.8)'], + }, + { duration: 1000, composite } + ); + testAnimationSamples(animation, idlName, // Same as above. + [{ time: 0, expected: 'rgb(230, 128, 128)' }]); + }, `${property} supports animating as color of hsla()`); + }, + + testAddition: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'add'); + }, + + testAccumulation: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'accumulate'); + }, +}; + +const colorPairType = { + testInterpolation: (property, setup) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['rgb(255, 0, 0) rgb(0, 0, 255)', + 'rgb(0, 0, 255) rgb(0, 255, 0)'] }, + 1000); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'rgb(128, 0, 128) rgb(0, 128, 128)' }]); + }, `${property} supports animating as color pair of rgb()`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['#ff0000 #00ff00', '#0000ff #ff0000'] }, + 1000); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'rgb(128, 0, 128) rgb(128, 128, 0)' }]); + }, `${property} supports animating as color pair of #RGB`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['hsl(0, 100%, 50%) hsl(0, 100%, 50%)', + 'hsl(240, 100%, 50%) hsl(360, 100%, 50%)'] }, + 1000); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'rgb(128, 0, 128) rgb(255, 0, 0)' }]); + }, `${property} supports animating as color pair of hsl()`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { [idlName]: ['#ff000066 #ff000066', '#0000ffcc #00ff00cc'] }, + 1000 + ); + // R: 255 * (0.4 * 0.5) / 0.6 = 85 + // B: 255 * (0.8 * 0.5) / 0.6 = 170 + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'rgba(85, 0, 170, 0.6) rgba(85, 170, 0, 0.6)' }]); + }, `${property} supports animating as color pair of #RGBa`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { + [idlName]: ['rgba(255, 0, 0, 0.4) rgba(255, 0, 0, 0.4)', 'rgba(0, 0, 255, 0.8) rgba(0, 255, 0, 0.8)'], + }, + 1000 + ); + testAnimationSamples(animation, idlName, // Same as above. + [{ time: 500, expected: 'rgba(85, 0, 170, 0.6) rgba(85, 170, 0, 0.6)' }]); + }, `${property} supports animating as color pair of rgba()`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { + [idlName]: ['hsla(0, 100%, 50%, 0.4) hsla(0, 100%, 50%, 0.4)', 'hsla(240, 100%, 50%, 0.8) hsla(360, 100%, 50%, 0.8)'], + }, + 1000 + ); + testAnimationSamples(animation, idlName, // Same as above. + [{ time: 500, expected: 'rgba(85, 0, 170, 0.6) rgba(255, 0, 0, 0.6)' }]); + }, `${property} supports animating as color pair of hsla()`); + }, + + testAdditionOrAccumulation: (property, setup, composite) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rgb(128, 128, 128) rgb(0, 0, 0)'; + const animation = target.animate( + { + [idlName]: ['rgb(255, 0, 0) rgb(0, 0, 255)', 'rgb(0, 0, 255) rgb(255, 0, 0)'] + }, + { duration: 1000, composite } + ); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: 'rgb(255, 128, 128) rgb(0, 0, 255)' }, + { time: 500, expected: 'rgb(255, 128, 255) rgb(128, 0, 128)' }]); + }, `${property} supports animating as color pair of rgb() with overflowed ` + + ' from and to values'); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rgb(128, 128, 128) rgb(0, 0, 0)'; + const animation = target.animate({ [idlName]: ['#ff0000 #0000ff', '#0000ff #ff0000'] }, + { duration: 1000, composite }); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: 'rgb(255, 128, 128) rgb(0, 0, 255)' }]); + }, `${property} supports animating as color pair of #RGB`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rgb(128, 128, 128) rgb(0, 0, 0)'; + const animation = target.animate({ [idlName]: ['hsl(0, 100%, 50%) hsl(0, 100%, 50%)', + 'hsl(240, 100%, 50%) hsl(360, 100%, 50%)'] }, + { duration: 1000, composite }); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: 'rgb(255, 128, 128) rgb(255, 0, 0)' }]); + }, `${property} supports animating as color pair of hsl()`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rgb(128, 128, 128) rgb(0, 0, 0)'; + const animation = target.animate( + { [idlName]: ['#ff000066 #ff000066', '#0000ffcc #00ff00cc'] }, + { duration: 1000, composite } + ); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: 'rgb(230, 128, 128) rgb(102, 0, 0)' }]); + }, `${property} supports animating as color pair of #RGBa`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rgb(128, 128, 128) rgb(0, 0, 0)'; + const animation = target.animate({ [idlName]: ['rgba(255, 0, 0, 0.4) rgba(0, 255, 0, 0.4)', + 'rgba(0, 0, 255, 0.8) rgba(255, 0, 0, 0.8)'] }, + { duration: 1000, composite }); + testAnimationSamples(animation, idlName, // Same as above. + [{ time: 0, expected: 'rgb(230, 128, 128) rgb(0, 102, 0)' }]); + }, `${property} supports animating as color pair of rgba()`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rgb(128, 128, 128) rgb(0, 0, 0)'; + const animation = target.animate( + { + [idlName]: ['hsla(0, 100%, 50%, 0.4) hsla(0, 100%, 50%, 0.4)', 'hsla(240, 100%, 50%, 0.8) hsla(360, 100%, 50%, 0.8)'], + }, + { duration: 1000, composite } + ); + testAnimationSamples(animation, idlName, // Same as above. + [{ time: 0, expected: 'rgb(230, 128, 128) rgb(102, 0, 0)' }]); + }, `${property} supports animating as color pair of hsla()`); + }, + + testAddition: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'add'); + }, + + testAccumulation: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'accumulate'); + }, +}; + +const transformListType = { + testInterpolation: (property, setup) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { + [idlName]: ['translate(200px, -200px)', 'translate(400px, 400px)'], + }, + 1000 + ); + testAnimationSampleMatrices(animation, idlName, + [{ time: 500, expected: [ 1, 0, 0, 1, 300, 100 ] }]); + }, `${property}: translate`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { + [idlName]: ['rotate(45deg)', 'rotate(135deg)'], + }, + 1000 + ); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 500, expected: [ Math.cos(Math.PI / 2), + Math.sin(Math.PI / 2), + -Math.sin(Math.PI / 2), + Math.cos(Math.PI / 2), + 0, 0] }]); + }, `${property}: rotate`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['scale(3)', 'scale(5)'] }, + 1000); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 500, expected: [ 4, 0, 0, 4, 0, 0 ] }]); + }, `${property}: scale`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['skew(30deg, 60deg)', + 'skew(60deg, 30deg)'] }, + 1000); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 500, expected: [ 1, Math.tan(Math.PI / 4), + Math.tan(Math.PI / 4), 1, + 0, 0] }]); + }, `${property}: skew`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: ['translateX(100px) rotate(45deg)', + 'translateX(200px) rotate(135deg)'] }, + 1000); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 500, expected: [ Math.cos(Math.PI / 2), + Math.sin(Math.PI / 2), + -Math.sin(Math.PI / 2), + Math.cos(Math.PI / 2), + 150, 0 ] }]); + }, `${property}: rotate and translate`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: ['rotate(45deg) translateX(100px)', + 'rotate(135deg) translateX(200px)'] }, + 1000); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 500, expected: [ Math.cos(Math.PI / 2), + Math.sin(Math.PI / 2), + -Math.sin(Math.PI / 2), + Math.cos(Math.PI / 2), + 150 * Math.cos(Math.PI / 2), + 150 * Math.sin(Math.PI / 2) ] }]); + }, `${property}: translate and rotate`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: ['rotate(0deg)', + 'rotate(1080deg) translateX(100px)'] }, + 1000); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 500, expected: [ -1, 0, 0, -1, -50, 0 ] }]); + }, `${property}: extend shorter list (from)`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: ['rotate(0deg) translateX(100px)', + 'rotate(1080deg)'] }, + 1000); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 500, expected: [ -1, 0, 0, -1, -50, 0 ] }]); + }, `${property}: extend shorter list (to)`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = // matrix(0, 1, -1, 0, 0, 100) + target.animate({ [idlName]: ['rotate(90deg) translateX(100px)', + // matrix(-1, 0, 0, -1, 200, 0) + 'translateX(200px) rotate(180deg)'] }, + 1000); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 500, expected: [ Math.cos(Math.PI * 3 / 4), + Math.sin(Math.PI * 3 / 4), + -Math.sin(Math.PI * 3 / 4), + Math.cos(Math.PI * 3 / 4), + 100, 50 ] }]); + }, `${property}: mismatch order of translate and rotate`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = // Same matrices as above. + target.animate({ [idlName]: [ 'matrix(0, 1, -1, 0, 0, 100)', + 'matrix(-1, 0, 0, -1, 200, 0)' ] }, + 1000); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 500, expected: [ Math.cos(Math.PI * 3 / 4), + Math.sin(Math.PI * 3 / 4), + -Math.sin(Math.PI * 3 / 4), + Math.cos(Math.PI * 3 / 4), + 100, 50 ] }]); + }, `${property}: matrix`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: [ 'rotate3d(1, 1, 0, 0deg)', + 'rotate3d(1, 1, 0, 90deg)'] }, + 1000); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 500, expected: rotate3dToMatrix(1, 1, 0, Math.PI / 4) }]); + }, `${property}: rotate3d`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + // To calculate expected matrices easily, generate input matrices from + // rotate3d. + const from = rotate3dToMatrix3d(1, 1, 0, Math.PI / 4); + const to = rotate3dToMatrix3d(1, 1, 0, Math.PI * 3 / 4); + const animation = target.animate({ [idlName]: [ from, to ] }, 1000); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 500, expected: rotate3dToMatrix(1, 1, 0, Math.PI * 2 / 4) }]); + }, `${property}: matrix3d`); + + // This test aims for forcing the two mismatched transforms to be + // decomposed into matrix3d before interpolation. Therefore, we not only + // test the interpolation, but also test the 3D matrix decomposition. + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { + [idlName]: [ + 'scale(0.3)', + // scale(0.5) translateZ(1px) + 'matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1)', + ], + }, + 1000 + ); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 500, expected: [ 0.4, 0, 0, 0, + 0, 0.4, 0, 0, + 0, 0, 1, 0, + 0, 0, 0.5, 1] }]); + }, `${property}: mismatched 3D transforms`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: ['rotateY(60deg)', 'none' ] }, 1000); + + testAnimationSampleMatrices(animation, idlName, + // rotateY(30deg) == rotate3D(0, 1, 0, 30deg) + [{ time: 500, expected: rotate3dToMatrix(0, 1, 0, Math.PI / 6) }]); + }, `${property}: rotateY`); + + // Following tests aim for test the fallback discrete interpolation behavior + // for non-invertible matrices. The non-invertible matrix that we use is the + // singular matrix, matrix(1, 1, 0, 0, 0, 100). + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0)', + 'matrix( 1, 1, 0, 0, 0, 100)'] }, + { duration: 1000, fill: 'both' }); + + testAnimationSampleMatrices(animation, idlName, + [ { time: 0, expected: [ -1, 0, 0, -1, 200, 0 ] }, + { time: 499, expected: [ -1, 0, 0, -1, 200, 0 ] }, + { time: 500, expected: [ 1, 1, 0, 0, 0, 100 ] }, + { time: 1000, expected: [ 1, 1, 0, 0, 0, 100 ] }]); + }, `${property}: non-invertible matrices`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { + [idlName]: [ + // matrix(0, -1, 1, 0, 250, 0) + 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)', + // matrix(-1, -1, 0, 0, 100, 100) + 'translate(100px) matrix( 1, 1, 0, 0, 0, 100) rotate(180deg)', + ], + }, + { duration: 1000, fill: 'both' } + ); + + testAnimationSampleMatrices(animation, idlName, + [ { time: 0, expected: [ 0, -1, 1, 0, 250, 0 ] }, + { time: 499, expected: [ 0, -1, 1, 0, 250, 0 ] }, + { time: 500, expected: [ -1, -1, 0, 0, 100, 100 ] }, + { time: 1000, expected: [ -1, -1, 0, 0, 100, 100 ] }]); + }, `${property}: non-invertible matrices in matched transform lists`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { + [idlName]: [ + // matrix(-2, 0, 0, -2, 250, 0) + 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) scale(2)', + // matrix(1, 1, 1, 1, 100, 100) + 'translate(100px) matrix( 1, 1, 0, 0, 0, 100) skew(45deg)', + ], + }, + { duration: 1000, fill: 'both' } + ); + + testAnimationSampleMatrices(animation, idlName, + [ { time: 0, expected: [ -2, 0, 0, -2, 250, 0 ] }, + { time: 499, expected: [ -2, 0, 0, -2, 250, 0 ] }, + { time: 500, expected: [ 1, 1, 1, 1, 100, 100 ] }, + { time: 1000, expected: [ 1, 1, 1, 1, 100, 100 ] }]); + }, `${property}: non-invertible matrices in mismatched transform lists`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { + // perspective(0) is treated as perspective(1px) + [idlName]: ['perspective(0)', 'perspective(10px)'], + }, + 1000 + ); + testAnimationSampleMatrices(animation, idlName, + [{ time: 500, expected: [ 1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, -0.55, + 0, 0, 0, 1 ] }]); + }, `${property}: perspective`); + + }, + + testAddition: function(property, setup) { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'translateX(100px)'; + const animation = target.animate({ [idlName]: ['translateX(-200px)', + 'translateX(500px)'] }, + { duration: 1000, fill: 'both', + composite: 'add' }); + testAnimationSampleMatrices(animation, idlName, + [ { time: 0, expected: [ 1, 0, 0, 1, -100, 0 ] }, + { time: 1000, expected: [ 1, 0, 0, 1, 600, 0 ] }]); + }, `${property}: translate`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rotate(45deg)'; + const animation = target.animate({ [idlName]: ['rotate(-90deg)', + 'rotate(90deg)'] }, + { duration: 1000, fill: 'both', + composite: 'add' }); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 0, expected: [ Math.cos(-Math.PI / 4), + Math.sin(-Math.PI / 4), + -Math.sin(-Math.PI / 4), + Math.cos(-Math.PI / 4), + 0, 0] }, + { time: 1000, expected: [ Math.cos(Math.PI * 3 / 4), + Math.sin(Math.PI * 3 / 4), + -Math.sin(Math.PI * 3 / 4), + Math.cos(Math.PI * 3 / 4), + 0, 0] }]); + }, `${property}: rotate`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'scale(2)'; + const animation = target.animate({ [idlName]: ['scale(-3)', 'scale(5)'] }, + { duration: 1000, fill: 'both', + composite: 'add' }); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 0, expected: [ -6, 0, 0, -6, 0, 0 ] }, // scale(-3) scale(2) + { time: 1000, expected: [ 10, 0, 0, 10, 0, 0 ] }]); // scale(5) scale(2) + }, `${property}: scale`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + // matrix(1, tan(10deg), tan(10deg), 1) + target.style[idlName] = 'skew(10deg, 10deg)'; + const animation = // matrix(1, tan(20deg), tan(-30deg), 1) + target.animate({ [idlName]: ['skew(-30deg, 20deg)', + // matrix(1, tan(-30deg), tan(20deg), 1) + 'skew(20deg, -30deg)'] }, + { duration: 1000, fill: 'both', composite: 'add' }); + + // matrix at 0%. + // [ 1 tan(10deg) ] [ 1 tan(-30deg) ] + // [ tan(10deg) 1 ] [ tan(20deg) 1 ] = + // + // [ 1 + tan(10deg) * tan(20deg) tan(-30deg) + tan(10deg) ] + // [ tan(10deg) + tan(20deg) tan(10deg) * tan(-30deg) + 1 ] + + // matrix at 100%. + // [ 1 tan(10deg) ] [ 1 tan(20deg) ] + // [ tan(10deg) 1 ] [ tan(-30deg) 1 ] = + // + // [ 1 + tan(10deg) * tan(-30deg) tan(20deg) + tan(10deg) ] + // [ tan(10deg) + tan(-30deg) tan(10deg) * tan(20deg) + 1 ] + + testAnimationSampleMatrices(animation, idlName, + [{ time: 0, expected: [ 1 + Math.tan(Math.PI/18) * Math.tan(Math.PI/9), + Math.tan(Math.PI/18) + Math.tan(Math.PI/9), + Math.tan(-Math.PI/6) + Math.tan(Math.PI/18), + 1 + Math.tan(Math.PI/18) * Math.tan(-Math.PI/6), + 0, 0] }, + { time: 1000, expected: [ 1 + Math.tan(Math.PI/18) * Math.tan(-Math.PI/6), + Math.tan(Math.PI/18) + Math.tan(-Math.PI/6), + Math.tan(Math.PI/9) + Math.tan(Math.PI/18), + 1 + Math.tan(Math.PI/18) * Math.tan(Math.PI/9), + 0, 0] }]); + }, `${property}: skew`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + // matrix(1, 0, 0, 1, 100, 0) + target.style[idlName] = 'translateX(100px)'; + const animation = // matrix(0, 1, -1, 0, 0, 0) + target.animate({ [idlName]: ['rotate(90deg)', + // matrix(-1, 0, 0, -1, 0, 0) + 'rotate(180deg)'] }, + { duration: 1000, fill: 'both', composite: 'add' }); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 0, expected: [ 0, 1, -1, 0, 100, 0 ] }, + { time: 1000, expected: [ -1, 0, 0, -1, 100, 0 ] }]); + }, `${property}: rotate on translate`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + // matrix(0, 1, -1, 0, 0, 0) + target.style[idlName] = 'rotate(90deg)'; + const animation = // matrix(1, 0, 0, 1, 100, 0) + target.animate({ [idlName]: ['translateX(100px)', + // matrix(1, 0, 0, 1, 200, 0) + 'translateX(200px)'] }, + { duration: 1000, fill: 'both', composite: 'add' }); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 0, expected: [ 0, 1, -1, 0, 0, 100 ] }, + { time: 1000, expected: [ 0, 1, -1, 0, 0, 200 ] }]); + }, `${property}: translate on rotate`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rotate(45deg) translateX(100px)'; + const animation = target.animate({ [idlName]: ['rotate(-90deg)', + 'rotate(90deg)'] }, + { duration: 1000, fill: 'both', + composite: 'add' }); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 0, expected: [ Math.cos(-Math.PI / 4), + Math.sin(-Math.PI / 4), + -Math.sin(-Math.PI / 4), + Math.cos(-Math.PI / 4), + 100 * Math.cos(Math.PI / 4), + 100 * Math.sin(Math.PI / 4) ] }, + { time: 1000, expected: [ Math.cos(Math.PI * 3 / 4), + Math.sin(Math.PI * 3 / 4), + -Math.sin(Math.PI * 3 / 4), + Math.cos(Math.PI * 3 / 4), + 100 * Math.cos(Math.PI / 4), + 100 * Math.sin(Math.PI / 4) ] }]); + }, `${property}: rotate on rotate and translate`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'matrix(0, 1, -1, 0, 0, 0)'; + const animation = // Same matrices as above. + target.animate({ [idlName]: [ 'matrix(1, 0, 0, 1, 100, 0)', + 'matrix(1, 0, 0, 1, 200, 0)' ] }, + { duration: 1000, fill: 'both', composite: 'add' }); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 0, expected: [ 0, 1, -1, 0, 0, 100 ] }, + { time: 1000, expected: [ 0, 1, -1, 0, 0, 200 ] }]); + }, `${property}: matrix`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rotate3d(1, 1, 0, 45deg)'; + const animation = + target.animate({ [idlName]: [ 'rotate3d(1, 1, 0, -90deg)', + 'rotate3d(1, 1, 0, 90deg)'] }, + { duration: 1000, fill: 'both', composite: 'add' }); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 0, expected: rotate3dToMatrix(1, 1, 0, -Math.PI / 4) }, + { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]); + }, `${property}: rotate3d`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + // To calculate expected matrices easily, generate input matrices from + // rotate3d. + target.style[idlName] = rotate3dToMatrix3d(1, 1, 0, Math.PI / 4); + const from = rotate3dToMatrix3d(1, 1, 0, -Math.PI / 2); + const to = rotate3dToMatrix3d(1, 1, 0, Math.PI / 2); + const animation = + target.animate({ [idlName]: [ from, to ] }, + { duration: 1000, fill: 'both', composite: 'add' }); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 0, expected: rotate3dToMatrix(1, 1, 0, -Math.PI / 4) }, + { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]); + }, `${property}: matrix3d`); + + // Following tests aim for test the addition behavior for non-invertible + // matrices. Note that the addition for non-invertible matrices should be + // the same, just like addition for invertible matrices. With these tests, + // we can assure that addition never behaves as discrete. The non-invertible + // matrix that we use is the singular matrix, matrix(1, 1, 0, 0, 0, 100). + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'translateX(50px)'; + const animation = + target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0)', + 'matrix( 1, 1, 0, 0, 0, 100)'] }, + { duration: 1000, fill: 'both', composite: 'add' }); + + testAnimationSampleMatrices(animation, idlName, + [ { time: 0, expected: [ -1, 0, 0, -1, 250, 0 ] }, + { time: 1000, expected: [ 1, 1, 0, 0, 50, 100 ] }]); + }, `${property}: non-invertible matrices`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'translateX(50px)'; + const animation = // matrix(0, -1, 1, 0, 200, 0) + target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)', + // matrix(-1, -1, 0, 0, 0, 100) + 'matrix( 1, 1, 0, 0, 0, 100) rotate(180deg)'] }, + { duration: 1000, fill: 'both', composite: 'add' }); + + testAnimationSampleMatrices(animation, idlName, + [ { time: 0, expected: [ 0, -1, 1, 0, 250, 0 ] }, + { time: 1000, expected: [ -1, -1, 0, 0, 50, 100 ] }]); + }, `${property}: non-invertible matrices in matched transform lists`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'translateX(50px)'; + const animation = // matrix(-2, 0, 0, -2, 200, 0) + target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0) scale(2)', + // matrix(1, 1, 1, 1, 0, 100) + 'matrix( 1, 1, 0, 0, 0, 100) skew(45deg)'] }, + { duration: 1000, fill: 'both', composite: 'add' }); + + testAnimationSampleMatrices(animation, idlName, + [ { time: 0, expected: [ -2, 0, 0, -2, 250, 0 ] }, + { time: 1000, expected: [ 1, 1, 1, 1, 50, 100 ] }]); + }, `${property}: non-invertible matrices in mismatched transform lists`); + }, + + testAccumulation: function(property, setup) { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'translateX(100px)'; + const animation = target.animate({ [idlName]: ['translateX(-200px)', + 'translateX(500px)'] }, + { duration: 1000, fill: 'both', + composite: 'accumulate' }); + testAnimationSampleMatrices(animation, idlName, + [ { time: 0, expected: [ 1, 0, 0, 1, -100, 0 ] }, + { time: 1000, expected: [ 1, 0, 0, 1, 600, 0 ] }]); + }, `${property}: translate`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rotate(45deg)'; + const animation = target.animate({ [idlName]: ['rotate(-90deg)', + 'rotate(90deg)'] }, + { duration: 1000, fill: 'both', + composite: 'accumulate' }); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 0, expected: [ Math.cos(-Math.PI / 4), + Math.sin(-Math.PI / 4), + -Math.sin(-Math.PI / 4), + Math.cos(-Math.PI / 4), + 0, 0] }, + { time: 1000, expected: [ Math.cos(Math.PI * 3 / 4), + Math.sin(Math.PI * 3 / 4), + -Math.sin(Math.PI * 3 / 4), + Math.cos(Math.PI * 3 / 4), + 0, 0] }]); + }, `${property}: rotate`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'scale(2)'; + const animation = target.animate({ [idlName]: ['scale(-3)', 'scale(5)'] }, + { duration: 1000, fill: 'both', + composite: 'accumulate' }); + + testAnimationSampleMatrices(animation, idlName, + // scale((2 - 1) + (-3 - 1) + 1) + [{ time: 0, expected: [ -2, 0, 0, -2, 0, 0 ] }, + // scale((2 - 1) + (5 - 1) + 1) + { time: 1000, expected: [ 6, 0, 0, 6, 0, 0 ] }]); + }, `${property}: scale`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + // matrix(1, tan(10deg), tan(10deg), 1) + target.style[idlName] = 'skew(10deg, 10deg)'; + const animation = // matrix(1, tan(20deg), tan(-30deg), 1) + target.animate({ [idlName]: ['skew(-30deg, 20deg)', + // matrix(1, tan(-30deg), tan(20deg), 1) + 'skew(20deg, -30deg)'] }, + { duration: 1000, fill: 'both', composite: 'accumulate' }); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 0, expected: [ 1, Math.tan(Math.PI/6), + Math.tan(-Math.PI/9), 1, + 0, 0] }, + { time: 1000, expected: [ 1, Math.tan(-Math.PI/9), + Math.tan(Math.PI/6), 1, + 0, 0] }]); + }, `${property}: skew`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + // matrix(1, 0, 0, 1, 100, 0) + target.style[idlName] = 'translateX(100px)'; + const animation = // matrix(0, 1, -1, 0, 0, 0) + target.animate({ [idlName]: ['rotate(90deg)', + // matrix(-1, 0, 0, -1, 0, 0) + 'rotate(180deg)'] }, + { duration: 1000, fill: 'both', composite: 'accumulate' }); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 0, expected: [ 0, 1, -1, 0, 100, 0 ] }, + { time: 1000, expected: [ -1, 0, 0, -1, 100, 0 ] }]); + }, `${property}: rotate on translate`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + // matrix(0, 1, -1, 0, 0, 0) + target.style[idlName] = 'rotate(90deg)'; + const animation = // matrix(1, 0, 0, 1, 100, 0) + target.animate({ [idlName]: ['translateX(100px)', + // matrix(1, 0, 0, 1, 200, 0) + 'translateX(200px)'] }, + { duration: 1000, fill: 'both', composite: 'accumulate' }); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 0, expected: [ 0, 1, -1, 0, 100, 0 ] }, + { time: 1000, expected: [ 0, 1, -1, 0, 200, 0 ] }]); + }, `${property}: translate on rotate`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rotate(45deg)'; + const animation = + target.animate({ [idlName]: ['rotate(45deg) translateX(0px)', + 'rotate(45deg) translateX(100px)'] }, + { duration: 1000, fill: 'both', composite: 'accumulate' }); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 0, expected: [ Math.cos(Math.PI / 2), + Math.sin(Math.PI / 2), + -Math.sin(Math.PI / 2), + Math.cos(Math.PI / 2), + 0 * Math.cos(Math.PI / 2), + 0 * Math.sin(Math.PI / 2) ] }, + { time: 1000, expected: [ Math.cos(Math.PI / 2), + Math.sin(Math.PI / 2), + -Math.sin(Math.PI / 2), + Math.cos(Math.PI / 2), + 100 * Math.cos(Math.PI / 2), + 100 * Math.sin(Math.PI / 2) ] }]); + }, `${property}: rotate and translate on rotate`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rotate(45deg) translateX(100px)'; + const animation = + target.animate({ [idlName]: ['rotate(45deg)', 'rotate(45deg)'] }, + { duration: 1000, fill: 'both', composite: 'accumulate' }); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 0, expected: [ Math.cos(Math.PI / 2), + Math.sin(Math.PI / 2), + -Math.sin(Math.PI / 2), + Math.cos(Math.PI / 2), + 100 * Math.cos(Math.PI / 2), + 100 * Math.sin(Math.PI / 2) ] }, + { time: 1000, expected: [ Math.cos(Math.PI / 2), + Math.sin(Math.PI / 2), + -Math.sin(Math.PI / 2), + Math.cos(Math.PI / 2), + 100 * Math.cos(Math.PI / 2), + 100 * Math.sin(Math.PI / 2) ] }]); + }, `${property}: rotate on rotate and translate`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'matrix(0, 1, -1, 0, 0, 0)'; + const animation = // Same matrices as above. + target.animate({ [idlName]: [ 'matrix(1, 0, 0, 1, 100, 0)', + 'matrix(1, 0, 0, 1, 200, 0)' ] }, + { duration: 1000, fill: 'both', composite: 'accumulate' }); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 0, expected: [ 0, 1, -1, 0, 100, 0 ] }, + { time: 1000, expected: [ 0, 1, -1, 0, 200, 0 ] }]); + }, `${property}: matrix`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rotate3d(1, 1, 0, 45deg)'; + const animation = + target.animate({ [idlName]: [ 'rotate3d(1, 1, 0, -90deg)', + 'rotate3d(1, 1, 0, 90deg)'] }, + { duration: 1000, fill: 'both', composite: 'accumulate' }); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 0, expected: rotate3dToMatrix(1, 1, 0, -Math.PI / 4) }, + { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]); + }, `${property}: rotate3d`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + // To calculate expected matrices easily, generate input matrices from + // rotate3d. + target.style[idlName] = rotate3dToMatrix3d(1, 1, 0, Math.PI / 4); + const from = rotate3dToMatrix3d(1, 1, 0, -Math.PI / 2); + const to = rotate3dToMatrix3d(1, 1, 0, Math.PI / 2); + const animation = + target.animate({ [idlName]: [ from, to ] }, + { duration: 1000, fill: 'both', composite: 'accumulate' }); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 0, expected: rotate3dToMatrix(1, 1, 0, -Math.PI / 4) }, + { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]); + }, `${property}: matrix3d`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const matrixArray = [ 1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 1, 1 ]; + + target.style[idlName] = createMatrixFromArray(matrixArray); + const animation = + target.animate({ [idlName]: [ 'none', 'none' ] }, + { duration: 1000, fill: 'both', composite: 'accumulate' }); + + testAnimationSampleMatrices(animation, idlName, + [{ time: 0, expected: matrixArray }, + { time: 1000, expected: matrixArray }]); + }, `${property}: none`); + + // Following tests aim for test the fallback discrete accumulation behavior + // for non-invertible matrices. The non-invertible matrix that we use is the + // singular matrix, matrix(1, 1, 0, 0, 0, 100). + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0)', + 'matrix(-1, 0, 0, -1, 200, 0)'] }, 1000); + const animation = target.animate( + { + [idlName]: [ + 'matrix( 1, 1, 0, 0, 0, 100)', + 'matrix( 1, 1, 0, 0, 0, 100)', + ], + }, + { duration: 1000, composite: 'accumulate' } + ); + testAnimationSampleMatrices(animation, idlName, [ + { time: 0, expected: [1, 1, 0, 0, 0, 100] }, + ]); + }, `${property}: non-invertible matrices (non-invertible onto invertible)`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.animate({ [idlName]: ['matrix( 1, 1, 0, 0, 0, 100)', + 'matrix( 1, 1, 0, 0, 0, 100)'] }, 1000); + const animation = target.animate( + { + [idlName]: [ + 'matrix(-1, 0, 0, -1, 200, 0)', + 'matrix(-1, 0, 0, -1, 200, 0)', + ], + }, + { duration: 1000, composite: 'accumulate' } + ); + testAnimationSampleMatrices(animation, idlName, [ + { time: 0, expected: [-1, 0, 0, -1, 200, 0] }, + ]); + }, `${property}: non-invertible matrices (invertible onto non-invertible)`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + // matrix(0, -1, 1, 0, 250, 0) + target.animate( + { + [idlName]: [ + 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)', + 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)', + ], + }, + 1000 + ); + // matrix(-1, -1, 0, 0, 100, 100) + const animation = target.animate( + { + [idlName]: [ + 'translate(100px) matrix( 1, 1, 0, 0, 0, 100) rotate(180deg)', + 'translate(100px) matrix( 1, 1, 0, 0, 0, 100) rotate(180deg)', + ], + }, + { duration: 1000, composite: 'accumulate' } + ); + testAnimationSampleMatrices(animation, idlName, [ + { time: 0, expected: [-1, -1, 0, 0, 100, 100] }, + ]); + }, `${property}: non-invertible matrices in matched transform lists (non-invertible onto invertible)`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + // matrix(-1, -1, 0, 0, 100, 100) + target.animate( + { + [idlName]: [ + 'translate(100px) matrix(1, 1, 0, 0, 0, 100) rotate(180deg)', + 'translate(100px) matrix(1, 1, 0, 0, 0, 100) rotate(180deg)', + ], + }, + 1000 + ); + // matrix(0, -1, 1, 0, 250, 0) + const animation = target.animate( + { + [idlName]: [ + 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)', + 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)', + ], + }, + { duration: 1000, composite: 'accumulate' } + ); + testAnimationSampleMatrices(animation, idlName, [ + { time: 0, expected: [0, -1, 1, 0, 250, 0] }, + ]); + }, `${property}: non-invertible matrices in matched transform lists (invertible onto non-invertible)`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + // matrix(-2, 0, 0, -2, 250, 0) + target.animate( + { + [idlName]: [ + 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) scale(2)', + 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) scale(2)', + ], + }, + 1000 + ); + // matrix(1, 1, 1, 1, 100, 100) + const animation = target.animate( + { + [idlName]: [ + 'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)', + 'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)', + ], + }, + { duration: 1000, composite: 'accumulate' } + ); + testAnimationSampleMatrices(animation, idlName, [ + { time: 0, expected: [1, 1, 1, 1, 100, 100] }, + ]); + }, `${property}: non-invertible matrices in mismatched transform lists` + + ' (non-invertible onto invertible)'); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + // matrix(1, 1, 1, 1, 100, 100) + target.animate( + { + [idlName]: [ + 'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)', + 'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)', + ], + }, + 1000 + ); + // matrix(-2, 0, 0, -2, 250, 0) + const animation = target.animate( + { + [idlName]: [ + 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) scale(2)', + 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) scale(2)', + ], + }, + { duration: 1000, composite: 'accumulate' } + ); + testAnimationSampleMatrices(animation, idlName, [ + { time: 0, expected: [-2, 0, 0, -2, 250, 0] }, + ]); + }, `${property}: non-invertible matrices in mismatched transform lists` + + ' (invertible onto non-invertible)'); + }, +}; + +const rotateListType = { + testInterpolation: (property, setup) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { + [idlName]: ['45deg', '135deg'], + }, + 1000 + ); + + testAnimationSamples(animation, idlName, + [{ time: 500, expected: '90deg' }]); + }, `${property} without rotation axes`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: [ '0 1 0 0deg', + '0 1 0 90deg'] }, + 1000); + + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'y 45deg' }]); + }, `${property} with rotation axes`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + + const animation = + target.animate({ [idlName]: [ '0 1 0 0deg', + '0 1 0 720deg'] }, + 1000); + + testAnimationSamples(animation, idlName, + [{ time: 250, expected: 'y 180deg' }]); + }, `${property} with rotation axes and range over 360 degrees`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: [ '0 1 0 0deg', + '0 1 1 90deg'] }, + 1000); + + testAnimationSampleRotate3d(animation, idlName, + [{ time: 500, expected: '0 0.707107 0.707107 45deg' }]); + }, `${property} with different rotation axes`); + }, + testAddition: function(property, setup) { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '45deg'; + const animation = target.animate({ [idlName]: ['-90deg', '90deg'] }, + { duration: 1000, fill: 'both', + composite: 'add' }); + + testAnimationSamples(animation, idlName, + [{ time: 0, expected: '-45deg' }, + { time: 1000, expected: '135deg' }]); + }, `${property} without rotation axes`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + // Rotation specified in transform property should not affect the computed + // value of |property|. + target.style.transform = 'rotate(20deg)'; + target.style[idlName] = 'y -45deg'; + const animation = + target.animate({ [idlName]: ['0 1 0 90deg', + '0 1 0 180deg'] }, + { duration: 1000, fill: 'both', composite: 'add' }); + + testAnimationSamples(animation, idlName, + [{ time: 0, expected: 'y 45deg' }, + { time: 1000, expected: 'y 135deg' }]); + }, `${property} with underlying transform`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: [ '0 1 0 0deg', + '1 1 1 270deg'] }, + { duration: 1000, fill: 'both', composite: 'add' }); + + testAnimationSampleRotate3d(animation, idlName, + [{ time: 500, expected: '0.57735 0.57735 0.57735 135deg' }]); + }, `${property} with different rotation axes`); + }, + testAccumulation: function(property, setup) { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '45deg'; + const animation = target.animate({ [idlName]: ['-90deg', '90deg'] }, + { duration: 1000, fill: 'both', + composite: 'accumulate' }); + + testAnimationSamples(animation, idlName, + [{ time: 0, expected: '-45deg' }, + { time: 1000, expected: '135deg' }]); + }, `${property} without rotation axes`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style.transform = 'translateX(100px)'; + target.style[idlName] = '1 0 0 -45deg'; + const animation = + target.animate({ [idlName]: ['1 0 0 90deg', + '1 0 0 180deg'] }, + { duration: 1000, fill: 'both', composite: 'accumulate' }); + + testAnimationSamples(animation, idlName, + [{ time: 0, expected: 'x 45deg' }, + { time: 1000, expected: 'x 135deg' }]); + }, `${property} with underlying transform`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: [ '0 1 0 0deg', + '1 0 1 180deg'] }, + { duration: 1000, fill: 'both', composite: 'accumulate' }); + + testAnimationSampleRotate3d(animation, idlName, + [{ time: 500, expected: '0.707107 0 0.707107 90deg' }]); + }, `${property} with different rotation axes`); + }, +}; + +const translateListType = { + testInterpolation: (property, setup) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { + [idlName]: ['200px', '400px'], + }, + 1000 + ); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: '300px' }]); + }, `${property} with two unspecified values`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { + [idlName]: ['200px -200px', '400px 400px'], + }, + 1000 + ); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: '300px 100px' }]); + }, `${property} with one unspecified value`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { + [idlName]: ['200px -200px 600px', '400px 400px -200px'], + }, + 1000 + ); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: '300px 100px 200px' }]); + }, `${property} with all three values specified`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { + [idlName]: ['0% -101px 600px', '400px 50% -200px'], + }, + 1000 + ); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'calc(0% + 200px) calc(25% - 50.5px) 200px' }]); + }, `${property} with combination of percentages and lengths`); + }, + testAddition: function(property, setup) { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '100px'; + const animation = target.animate({ [idlName]: ['-200px', '500px'] }, + { duration: 1000, fill: 'both', + composite: 'add' }); + testAnimationSamples(animation, idlName, + [ { time: 0, expected: '-100px' }, + { time: 1000, expected: '600px' }]); + + }, `${property}`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.transform = 'translateY(100px)'; + target.style[idlName] = '100px'; + const animation = target.animate({ [idlName]: ['-200px', '500px'] }, + { duration: 1000, fill: 'both', + composite: 'add' }); + testAnimationSamples(animation, idlName, + [ { time: 0, expected: '-100px' }, + { time: 1000, expected: '600px' }]); + + }, `${property} with underlying transform`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '50%'; + const animation = target.animate({ [idlName]: ['-200px', '500px'] }, + { duration: 1000, fill: 'both', + composite: 'add' }); + testAnimationSamples(animation, idlName, + [ { time: 0, expected: 'calc(50% - 200px)' }, + { time: 1000, expected: 'calc(50% + 500px)' }]); + + }, `${property} with underlying percentage value`); + }, + testAccumulation: function(property, setup) { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '100px'; + const animation = target.animate({ [idlName]: ['-200px', '500px'] }, + { duration: 1000, fill: 'both', + composite: 'accumulate' }); + testAnimationSamples(animation, idlName, + [ { time: 0, expected: '-100px' }, + { time: 1000, expected: '600px' }]); + }, `${property}`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.transform = 'translateY(100px)'; + target.style[idlName] = '100px'; + const animation = target.animate({ [idlName]: ['-200px', '500px'] }, + { duration: 1000, fill: 'both', + composite: 'accumulate' }); + testAnimationSamples(animation, idlName, + [ { time: 0, expected: '-100px' }, + { time: 1000, expected: '600px' }]); + }, `${property} with transform`); + }, +}; + +const scaleListType = { + testInterpolation: (property, setup) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['3', '5'] }, + 1000); + + testAnimationSamples(animation, idlName, + [{ time: 500, expected: '4' }]); + }, `${property} with two unspecified values`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['3 3', '5 5'] }, + 1000); + + testAnimationSamples(animation, idlName, + [{ time: 500, expected: '4' }]); + }, `${property} with one unspecified value`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['3 3 3', '5 5 5'] }, + 1000); + + testAnimationSamples(animation, idlName, + [{ time: 500, expected: '4 4 4' }]); + }, `${property}`); + }, + testAddition: function(property, setup) { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '2'; + const animation = target.animate({ [idlName]: ['-3', '5'] }, + { duration: 1000, fill: 'both', + composite: 'add' }); + + testAnimationSamples(animation, idlName, + [{ time: 0, expected: '-6' }, + { time: 1000, expected: '10' }]); + }, `${property} with two unspecified values`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '2 2'; + const animation = target.animate({ [idlName]: ['-3 -3', '5 5'] }, + { duration: 1000, fill: 'both', + composite: 'add' }); + + testAnimationSamples(animation, idlName, + [{ time: 0, expected: '-6' }, + { time: 1000, expected: '10' }]); + }, `${property} with one unspecified value`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '2 2 2'; + const animation = target.animate({ [idlName]: ['-1 -2 -3', '4 5 6'] }, + { duration: 1000, fill: 'both', + composite: 'add' }); + + testAnimationSamples(animation, idlName, + [{ time: 0, expected: '-2 -4 -6' }, + { time: 1000, expected: '8 10 12' }]); + }, `${property}`); + }, + testAccumulation: function(property, setup) { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '2'; + const animation = target.animate({ [idlName]: ['-3', '5'] }, + { duration: 1000, fill: 'both', + composite: 'accumulate' }); + + testAnimationSamples(animation, idlName, + [{ time: 0, expected: '-2' }, + { time: 1000, expected: '6' }]); + }, `${property} with two unspecified values`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '2 2'; + const animation = target.animate({ [idlName]: ['-3 -3', '5 5'] }, + { duration: 1000, fill: 'both', + composite: 'accumulate' }); + + testAnimationSamples(animation, idlName, + [{ time: 0, expected: '-2' }, + { time: 1000, expected: '6' }]); + }, `${property} with one unspecified value`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '2 2 2'; + const animation = target.animate({ [idlName]: ['-1 -2 -3', '4 5 6'] }, + { duration: 1000, fill: 'both', + composite: 'accumulate' }); + + testAnimationSamples(animation, idlName, + [{ time: 0, expected: '0 -1 -2' }, + { time: 1000, expected: '5 6 7' }]); + }, `${property}`); + }, +}; + +const filterListType = { + testInterpolation: (property, setup) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: + ['blur(10px)', 'blur(50px)'] }, + 1000); + + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'blur(30px)' }]); + }, `${property}: blur function`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['hue-rotate(0deg)', + 'hue-rotate(100deg)'] }, + 1000); + + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'hue-rotate(50deg)' }]); + }, `${property}: hue-rotate function with same unit(deg)`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['hue-rotate(10deg)', + 'hue-rotate(100rad)'] }, + 1000); + + // 10deg = 0.1745rad. + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'hue-rotate(2869.79deg)' }]); + }, `${property}: hue-rotate function with different unit(deg -> rad)`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { [idlName]: + ['drop-shadow(10px 10px 10px rgba(255, 0, 0, 0.4))', + 'drop-shadow(50px 50px 50px rgba(0, 0, 255, 0.8))'] }, + 1000); + + testAnimationSamples( + animation, idlName, + [{ time: 500, + expected: 'drop-shadow(rgba(85, 0, 170, 0.6) 30px 30px 30px)' }]); + }, `${property}: drop-shadow function`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { [idlName]: + ['brightness(0.1) contrast(0.1) grayscale(0.1) invert(0.1) ' + + 'opacity(0.1) saturate(0.1) sepia(0.1)', + 'brightness(0.5) contrast(0.5) grayscale(0.5) invert(0.5) ' + + 'opacity(0.5) saturate(0.5) sepia(0.5)'] }, + 1000); + + testAnimationSamples(animation, idlName, + [{ time: 500, + expected: 'brightness(0.3) contrast(0.3) grayscale(0.3) ' + + 'invert(0.3) opacity(0.3) saturate(0.3) sepia(0.3)' }]); + }, `${property}: percentage or numeric-specifiable functions` + + ' (number value)'); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { [idlName]: + ['brightness(10%) contrast(10%) grayscale(10%) invert(10%) ' + + 'opacity(10%) saturate(10%) sepia(10%)', + 'brightness(50%) contrast(50%) grayscale(50%) invert(50%) ' + + 'opacity(50%) saturate(50%) sepia(50%)'] }, + 1000); + + testAnimationSamples(animation, idlName, + [{ time: 500, + expected: 'brightness(0.3) contrast(0.3) grayscale(0.3) ' + + 'invert(0.3) opacity(0.3) saturate(0.3) sepia(0.3)' }]); + }, `${property}: percentage or numeric-specifiable functions` + + ' (percentage value)'); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { [idlName]: + // To make missing filter-function-lists, specified the grayscale. + ['grayscale(0)', + 'grayscale(1) brightness(0) contrast(0) opacity(0) saturate(0)' ]}, + 1000); + + testAnimationSamples(animation, idlName, + [{ time: 500, + expected: 'grayscale(0.5) brightness(0.5) contrast(0.5) ' + + 'opacity(0.5) saturate(0.5)' }]); + }, `${property}: interpolate different length of filter-function-list` + + ' with function which lacuna value is 1'); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { [idlName]: + // To make missing filter-function-lists, specified the opacity. + ['opacity(1)', + 'opacity(0) grayscale(1) invert(1) sepia(1) blur(10px)'] }, + 1000); + + testAnimationSamples(animation, idlName, + [{ time: 500, + expected: + 'opacity(0.5) grayscale(0.5) invert(0.5) sepia(0.5) blur(5px)' }]); + }, `${property}: interpolate different length of filter-function-list` + + ' with function which lacuna value is 0'); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { [idlName]: + ['blur(0px)', + 'blur(10px) drop-shadow(10px 10px 10px rgba(0, 0, 255, 0.8))'] }, + 1000); + + testAnimationSamples(animation, idlName, + [{ time: 500, + // Per the spec: The initial value for interpolation is all length values + // set to 0 and the used color set to transparent. + expected: 'blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px)' }]); + }, `${property}: interpolate different length of filter-function-list` + + ' with drop-shadow function'); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['none', 'blur(10px)'] }, + 1000); + + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'blur(5px)' }]); + }, `${property}: interpolate from none`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate( + { [idlName]: + ['blur(0px) url(\"#f1\")', + 'blur(10px) url(\"#f2\")']}, + 1000); + testAnimationSamples(animation, idlName, + [{ time: 499, expected: 'blur(0px) url(\"#f1\")' }, + { time: 500, expected: 'blur(10px) url(\"#f2\")' }]); + }, `${property}: url function (interpoalte as discrete)`); + }, + + testAddition: function(property, setup) { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'blur(10px)'; + const animation = target.animate({ [idlName]: ['blur(20px)', + 'blur(50px)'] }, + { duration: 1000, composite: 'add' }); + testAnimationSamples(animation, idlName, + [ { time: 0, expected: 'blur(10px) blur(20px)' }]); + }, `${property}: blur on blur`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'blur(10px)'; + const animation = target.animate({ [idlName]: ['brightness(80%)', + 'brightness(40%)'] }, + { duration: 1000, composite: 'add' }); + testAnimationSamples(animation, idlName, + [ { time: 0, expected: 'blur(10px) brightness(0.8)' }]); + }, `${property}: different filter functions`); + }, + + testAccumulation: function(property, setup) { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'blur(10px) brightness(0.3)'; + const animation = target.animate( + { + [idlName]: [ + 'blur(20px) brightness(0.1)', + 'blur(20px) brightness(0.1)', + ], + }, + { duration: 1000, composite: 'accumulate' } + ); + // brightness(0.1) onto brightness(0.3) means + // brightness((0.1 - 1.0) + (0.3 - 1.0) + 1.0). The result of this formula + // is brightness(-0.6) that means brightness(0.0). + testAnimationSamples(animation, idlName, + [ { time: 0, expected: 'blur(30px) brightness(0)' }]); + }, `${property}: same ordered filter functions`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'blur(10px) brightness(1.3)'; + const animation = target.animate( + { + [idlName]: [ + 'brightness(1.2) blur(20px)', + 'brightness(1.2) blur(20px)', + ], + }, + { duration: 1000, composite: 'accumulate' } + ); + // Mismatched ordered functions can't be accumulated. + testAnimationSamples(animation, idlName, + [ { time: 0, expected: 'brightness(1.2) blur(20px)' }]); + }, `${property}: mismatched ordered filter functions`); + }, +}; + +const textShadowListType = { + testInterpolation: (property, setup) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: [ 'none', + 'rgb(100, 100, 100) 10px 10px 10px'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + // Premultiplied + [{ time: 500, expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]); + }, `${property}: from none to other`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px', + 'none' ] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + // Premultiplied + [{ time: 500, expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]); + }, `${property}: from other to none`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px', + 'rgb(100, 100, 100) 10px 10px 10px'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'rgb(50, 50, 50) 5px 5px 5px' }]); + }, `${property}: single shadow`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px, ' + + 'rgb(200, 200, 200) 20px 20px 20px', + 'rgb(100, 100, 100) 10px 10px 10px, ' + + 'rgb(100, 100, 100) 10px 10px 10px'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'rgb(50, 50, 50) 5px 5px 5px, ' + + 'rgb(150, 150, 150) 15px 15px 15px' }]); + }, `${property}: shadow list`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: [ 'rgb(200, 200, 200) 20px 20px 20px', + 'rgb(100, 100, 100) 10px 10px 10px, ' + + 'rgb(100, 100, 100) 10px 10px 10px'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'rgb(150, 150, 150) 15px 15px 15px, ' + + 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]); + }, `${property}: mismatched list length (from longer to shorter)`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px, ' + + 'rgb(100, 100, 100) 10px 10px 10px', + 'rgb(200, 200, 200) 20px 20px 20px'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'rgb(150, 150, 150) 15px 15px 15px, ' + + 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]); + }, `${property}: mismatched list length (from shorter to longer)`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style.color = 'rgb(0, 255, 0)'; + const animation = + target.animate({ [idlName]: [ 'currentcolor 0px 0px 0px', + 'currentcolor 10px 10px 10px'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'rgb(0, 255, 0) 5px 5px 5px' }]); + }, `${property}: with currentcolor`); + }, + + testAddition: function(property, setup) { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rgb(0, 0, 0) 0px 0px 0px'; + const animation = + target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px', + 'rgb(120, 120, 120) 10px 10px 10px'] }, + { duration: 1000, composite: 'add' }); + testAnimationSamples(animation, idlName, + [ { time: 0, expected: 'rgb(0, 0, 0) 0px 0px 0px, ' + + 'rgb(120, 120, 120) 10px 10px 10px' }]); + }, `${property}: shadow`); + }, + + testAccumulation: function(property, setup) { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rgb(120, 120, 120) 10px 10px 10px'; + const animation = + target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px', + 'rgb(120, 120, 120) 10px 10px 10px'] }, + { duration: 1000, composite: 'accumulate' }); + testAnimationSamples(animation, idlName, + [ { time: 0, expected: 'rgb(240, 240, 240) 20px 20px 20px' }]); + }, `${property}: shadow`); + }, +}; + + +const boxShadowListType = { + testInterpolation: (property, setup) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: [ 'none', + 'rgb(100, 100, 100) 10px 10px 10px 0px'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + // Premultiplied + [{ time: 500, expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]); + }, `${property}: from none to other`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px 0px', + 'none' ] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + // Premultiplied + [{ time: 500, expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]); + }, `${property}: from other to none`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px 0px', + 'rgb(100, 100, 100) 10px 10px 10px 0px'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'rgb(50, 50, 50) 5px 5px 5px 0px' }]); + }, `${property}: single shadow`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px 0px, ' + + 'rgb(200, 200, 200) 20px 20px 20px 20px', + 'rgb(100, 100, 100) 10px 10px 10px 0px, ' + + 'rgb(100, 100, 100) 10px 10px 10px 0px'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'rgb(50, 50, 50) 5px 5px 5px 0px, ' + + 'rgb(150, 150, 150) 15px 15px 15px 10px' }]); + }, `${property}: shadow list`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: [ 'rgb(200, 200, 200) 20px 20px 20px 20px', + 'rgb(100, 100, 100) 10px 10px 10px 0px, ' + + 'rgb(100, 100, 100) 10px 10px 10px 0px'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'rgb(150, 150, 150) 15px 15px 15px 10px, ' + + 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]); + }, `${property}: mismatched list length (from shorter to longer)`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px 0px, ' + + 'rgb(100, 100, 100) 10px 10px 10px 0px', + 'rgb(200, 200, 200) 20px 20px 20px 20px']}, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'rgb(150, 150, 150) 15px 15px 15px 10px, ' + + 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]); + }, `${property}: mismatched list length (from longer to shorter)`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style.color = 'rgb(0, 255, 0)'; + const animation = + target.animate({ [idlName]: [ 'currentcolor 0px 0px 0px 0px', + 'currentcolor 10px 10px 10px 10px'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 500, expected: 'rgb(0, 255, 0) 5px 5px 5px 5px' }]); + }, `${property}: with currentcolor`); + }, + + testAddition: function(property, setup) { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rgb(0, 0, 0) 0px 0px 0px 0px'; + const animation = + target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px 0px', + 'rgb(120, 120, 120) 10px 10px 10px 0px'] }, + { duration: 1000, composite: 'add' }); + testAnimationSamples(animation, idlName, + [ { time: 0, expected: 'rgb(0, 0, 0) 0px 0px 0px 0px, ' + + 'rgb(120, 120, 120) 10px 10px 10px 0px' }]); + }, `${property}: shadow`); + }, + + testAccumulation: function(property, setup) { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rgb(120, 120, 120) 10px 10px 10px 10px'; + const animation = + target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px 10px', + 'rgb(120, 120, 120) 10px 10px 10px 10px'] }, + { duration: 1000, composite: 'accumulate' }); + testAnimationSamples(animation, idlName, + [ { time: 0, expected: 'rgb(240, 240, 240) 20px 20px 20px 20px' }]); + }, `${property}: shadow`); + }, +}; + +const positionType = { + testInterpolation: (property, setup) => { + lengthPairType.testInterpolation(property, setup); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: ['10% 10%', '50% 50%'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples( + animation, idlName, + [{ time: 500, expected: calcFromPercentage(idlName, '30% 30%') }]); + }, `${property} supports animating as a position of percent`); + }, + + testAdditionOrAccumulation: (property, setup, composite) => { + lengthPairType.testAddition(property, setup); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '60% 60%'; + const animation = target.animate({ [idlName]: ['70% 70%', '100% 100%'] }, + { duration: 1000, composite }); + testAnimationSamples( + animation, idlName, + [{ time: 0, expected: calcFromPercentage(idlName, '130% 130%') }]); + }, `${property}: position of percentage`); + }, + + testAddition: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'add'); + }, + + testAccumulation: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'accumulate'); + }, +}; + +const rectType = { + testInterpolation: (property, setup) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: + ['rect(10px, 10px, 10px, 10px)', + 'rect(50px, 50px, 50px, 50px)'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples( + animation, idlName, + [{ time: 500, expected: 'rect(30px, 30px, 30px, 30px)' }]); + }, `${property} supports animating as a rect`); + }, + + testAdditionOrAccumulation: (property, setup, composite) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = 'rect(100px, 100px, 100px, 100px)'; + const animation = target.animate({ [idlName]: + ['rect(10px, 10px, 10px, 10px)', + 'rect(10px, 10px, 10px, 10px)'] }, + { duration: 1000, composite }); + testAnimationSamples( + animation, idlName, + [{ time: 0, expected: 'rect(110px, 110px, 110px, 110px)' }]); + }, `${property}: rect`); + }, + + testAddition: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'add'); + }, + + testAccumulation: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'accumulate'); + }, +} + +// stroke-dasharray: none | [ <length> | <percentage> | <number> ]* +const dasharrayType = { + testInterpolation: (property, setup) => { + percentageType.testInterpolation(property, setup); + positiveNumberType.testInterpolation(property, setup, 'px'); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: + ['8, 16, 4', + '4, 8, 12, 16'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples( + animation, idlName, + [{ time: 500, expected: '6px, 12px, 8px, 12px, 10px, 6px, 10px, 16px, 4px, 8px, 14px, 10px' }]); + }, `${property} supports animating as a dasharray (mismatched length)`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = target.animate({ [idlName]: + ['2, 50%, 6, 10', + '6, 30%, 2, 2'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples( + animation, idlName, + [{ time: 500, expected: '4px, 40%, 4px, 6px' }]); + }, `${property} supports animating as a dasharray (mixed lengths and percentages)`); + + }, + + // Note that stroke-dasharray is neither additive nor cumulative, so we should + // write this additive test case that animating value replaces underlying + // values. + // See https://www.w3.org/TR/SVG2/painting.html#StrokeDashing. + testAdditionOrAccumulation: (property, setup, composite) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '6, 30%, 2px'; + const animation = target.animate({ [idlName]: + ['1, 2, 3, 4, 5', + '6, 7, 8, 9, 10'] }, + { duration: 1000, composite }); + testAnimationSamples( + animation, idlName, + [{ time: 0, expected: '1px, 2px, 3px, 4px, 5px' }]); + }, `${property}: dasharray`); + }, + + testAddition: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'add'); + }, + + testAccumulation: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'accumulate'); + }, +} + +const fontVariationSettingsType = { + testInterpolation: (property, setup) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: ['"wght" 1.1', '"wght" 1.5'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamples(animation, idlName, + [{ time: 0, expected: '"wght" 1.1' }, + { time: 250, expected: '"wght" 1.2' }, + { time: 750, expected: '"wght" 1.4' } ]); + }, `${property} supports animation as float`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: ['"wdth" 1, "wght" 1.1', + '"wght" 1.5, "wdth" 5'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamplesWithAnyOrder( + animation, idlName, + [{ time: 0, expected: '"wdth" 1, "wght" 1.1' }, + { time: 250, expected: '"wdth" 2, "wght" 1.2' }, + { time: 750, expected: '"wdth" 4, "wght" 1.4' } ]); + }, `${property} supports animation as float with multiple tags`); + + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + const animation = + target.animate({ [idlName]: ['"wdth" 1, "wght" 1.1', + '"wght" 10, "wdth" 5, "wght" 1.5'] }, + { duration: 1000, fill: 'both' }); + testAnimationSamplesWithAnyOrder( + animation, idlName, + [{ time: 250, expected: '"wdth" 2, "wght" 1.2' }, + { time: 750, expected: '"wdth" 4, "wght" 1.4' } ]); + }, `${property} supports animation as float with multiple duplicate tags`); + }, + + testAdditionOrAccumulation: (property, setup, composite) => { + test(t => { + const idlName = propertyToIDL(property); + const target = createTestElement(t, setup); + target.style[idlName] = '"wght" 1'; + const animation = + target.animate({ [idlName]: ['"wght" 1.1', '"wght" 1.5'] }, + { duration: 1000, composite }); + testAnimationSamples(animation, idlName, + [{ time: 250, expected: '"wght" 2.2' }, + { time: 750, expected: '"wght" 2.4' } ]); + }, `${property} with composite type ${composite}`); + }, + + testAddition: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'add'); + }, + + testAccumulation: function(property, setup) { + this.testAdditionOrAccumulation(property, setup, 'accumulate'); + }, +} + +const types = { + color: colorType, + colorPair: colorPairType, + discrete: discreteType, + filterList: filterListType, + integer: integerType, + positiveInteger: positiveIntegerType, + length: lengthType, + percentage: percentageType, + lengthPercentageOrCalc: lengthPercentageOrCalcType, + lengthPair: lengthPairType, + positiveNumber: positiveNumberType, + opacity: opacityType, + transformList: transformListType, + rotateList: rotateListType, + translateList: translateListType, + scaleList: scaleListType, + visibility: visibilityType, + boxShadowList: boxShadowListType, + textShadowList: textShadowListType, + rect: rectType, + position: positionType, + dasharray: dasharrayType, + fontVariationSettings: fontVariationSettingsType, +}; diff --git a/testing/web-platform/tests/web-animations/animation-model/animation-types/property-utils.js b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-utils.js new file mode 100644 index 0000000000..d3a7b12a61 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-utils.js @@ -0,0 +1,38 @@ +'use strict'; + +function runAnimationTypeTest(gCSSProperties, testType) { + for (const property in gCSSProperties) { + if (!isSupported(property)) { + continue; + } + + const setupFunction = gCSSProperties[property].setup; + for (const animationType of gCSSProperties[property].types) { + let typeObject; + let animationTypeString; + if (typeof animationType === 'string') { + typeObject = types[animationType]; + animationTypeString = animationType; + } else if (typeof animationType === 'object' && + animationType.type && typeof animationType.type === 'string') { + typeObject = types[animationType.type]; + animationTypeString = animationType.type; + } + + // First, test that the animation type object has 'testAccumulation', or + // 'testAddition', or 'testInterpolation'. + // We use test() function here so that we can continue the remainder tests + // even if this test fails. + test(t => { + assert_own_property(typeObject, testType, animationTypeString + + ` should have ${testType} property`); + assert_equals(typeof typeObject[testType], 'function', + `${testType} method should be a function`); + }, `${property} (type: ${animationTypeString}) has ${testType} function`); + + if (typeObject[testType] && typeof typeObject[testType] === 'function') { + typeObject[testType](property, setupFunction, animationType.options); + } + } + } +} diff --git a/testing/web-platform/tests/web-animations/animation-model/animation-types/scrollbar-interpolation.html b/testing/web-platform/tests/web-animations/animation-model/animation-types/scrollbar-interpolation.html new file mode 100644 index 0000000000..bc02dd00b9 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/scrollbar-interpolation.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<link rel="help" href="https://drafts.csswg.org/web-animations/#animation-types"> +<title>Scrollbar interpolation</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +</head> +<style type="text/css"> + #container { + height: 100px; + width: 100px; + overflow: scroll; + } + #contents { + height: 200px; + width: 200px; + } +</style> +<body> + <div id="container"> + <div id="contents"></div> + </div> +</body> +<!-- Extend coverage in interpolation-per-property-002 to include testing + if named and system colors +--> +<script type="text/javascript"> + function interpolate(keyframes, property) { + const anim = container.animate(keyframes, { + duration: 1000, + easing: 'linear' + }); + anim.pause(); + anim.currentTime = 500; + const result = getComputedStyle(container)[property]; + anim.cancel(); + return result; + } + + function test_scrollbar_interpolation(from, to) { + let fromKeyframe =`${from.thumb} ${from.track}`; + let toKeyframe = `${to.thumb} ${to.track}`; + let keyframes = { scrollbarColor: [ fromKeyframe, toKeyframe ] }; + const scrollbarColors = interpolate(keyframes, 'scrollbarColor'); + + // As the colors may be system dependent, we use the container as a + // color swatch and resolve the color blend via background-color. + // The scrollbar colors are expected to match the blend on the thumb + // and track colors respectively. + keyframes = { + backgroundColor: [`${from.thumb}`, `${to.thumb}` ] + } + const expectedThumbColor = interpolate(keyframes, 'backgroundColor'); + keyframes = { + backgroundColor: [ `${from.track}`, `${to.track}` ] + } + const expectedTrackColor = interpolate(keyframes, 'backgroundColor'); + assert_equals(scrollbarColors, + `${expectedThumbColor} ${expectedTrackColor}`, + `${fromKeyframe} to ${toKeyframe}`); + } + + test(() => { + const data = [ + { + from: { thumb: 'black', track: 'white' }, + to: { thumb: 'lime', track: 'darkgreen' } + }, + { + from: { thumb: '#000', track: 'pink' }, + to: { thumb: 'canvas', track: 'buttontext' } + }, + { + from: { thumb: 'rgba(255,255,255,0)', track: 'rgba(128,128,128,0)'}, + to: { thumb: 'rgba(255,255,255,1)', track: 'rgba(128,128,128,1)'} + }, + { + from: { thumb: 'transparent', track: 'transparent' }, + to: { thumb: 'rgba(255,255,255,1)', track: 'rgba(128,128,128,1)'} + } + ]; + data.forEach((test) => { + test_scrollbar_interpolation(test.from, test.to); + }); + }, 'Verify scrollbar-color-interpolation'); +</script> +</html> diff --git a/testing/web-platform/tests/web-animations/animation-model/animation-types/visibility.html b/testing/web-platform/tests/web-animations/animation-model/animation-types/visibility.html new file mode 100644 index 0000000000..f5a60b4e2c --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/visibility.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Animation type for the 'visibility' property</title> +<!-- FIXME: The following spec link should be updated once this definition has + been moved to CSS Values & Units. --> +<link rel="help" href="https://drafts.csswg.org/css-transitions/#animtype-visibility"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +<body> +<div id="log"></div> +<div id="target"></div> +<script> +'use strict'; + +test(t => { + const div = createDiv(t); + const anim = div.animate({ visibility: ['hidden','visible'] }, + { duration: 100 * MS_PER_SEC, fill: 'both' }); + + anim.currentTime = 0; + assert_equals(getComputedStyle(div).visibility, 'hidden', + 'Visibility when progress = 0'); + + anim.currentTime = 10 * MS_PER_SEC + 1; + assert_equals(getComputedStyle(div).visibility, 'visible', + 'Visibility when progress > 0 due to linear easing'); + + anim.finish(); + assert_equals(getComputedStyle(div).visibility, 'visible', + 'Visibility when progress = 1'); + +}, 'Visibility clamping behavior'); + +test(t => { + const div = createDiv(t); + const anim = div.animate({ visibility: ['hidden', 'visible'] }, + { duration: 100 * MS_PER_SEC, fill: 'both', + easing: 'cubic-bezier(0.25, -0.6, 0, 0.5)' }); + + anim.currentTime = 0; + assert_equals(getComputedStyle(div).visibility, 'hidden', + 'Visibility when progress = 0'); + + // Timing function is below zero. So we expected visibility is hidden. + anim.currentTime = 10 * MS_PER_SEC + 1; + assert_equals(getComputedStyle(div).visibility, 'hidden', + 'Visibility when progress < 0 due to cubic-bezier easing'); + + anim.currentTime = 60 * MS_PER_SEC; + assert_equals(getComputedStyle(div).visibility, 'visible', + 'Visibility when progress > 0 due to cubic-bezier easing'); + +}, 'Visibility clamping behavior with an easing that has a negative component'); + +</script> +</body> diff --git a/testing/web-platform/tests/web-animations/animation-model/combining-effects/applying-interpolated-transform.html b/testing/web-platform/tests/web-animations/animation-model/combining-effects/applying-interpolated-transform.html new file mode 100644 index 0000000000..c101b5f0cf --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/combining-effects/applying-interpolated-transform.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title> apply interpolated transform on multiple keyframes</title> +<link rel="help" href="https://drafts.csswg.org/web-animations/#keyframes-section"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +<body> +<div id="log"></div> +<div id="target"></div> +<script> +'use strict'; +// This test tests the correctness if animation behavior under +// box-size-denpendent and non-box-size-dependent transformation. +test(t => { + var div_1 = createDiv(t); + div_1.style.width = "100px"; + // Non-pairwise compatible transforms that are effectively no-ops with a + // matrix fallback. Both rotate(360deg) and scale(1) are identity matrix, + // making it easy to compute. + const keyframe1 = [ + {"transform":"translateX( 200px ) rotate( 360deg )"}, + {"transform":"translateX( 100% ) scale( 1 )"}, + ]; + const keyframe2 = [ + {"transform":"translateX( 200px ) rotate( 360deg )"}, + {"transform":"translateX( 100% ) scale( 1 )"}, + {"transform":"none"}, + {} + ]; + + const animation1 = div_1.animate(keyframe1, { + "duration":3000, + "easing":"linear", + }); + const animation2 = div_1.animate(keyframe2, { + "duration":3000, + "easing":"linear", + }); + // new animation on the second div, using px value instead of % as a reference + + var div_2 = createDiv(t); + div_2.style.width = "100px"; + const keyframe3 = [ + {"transform":"translateX( 200px ) rotate( 360deg )"}, + {"transform":"translateX( 100px ) scale( 1 )"}, + ]; + const keyframe4 = [ + {"transform":"translateX( 200px ) rotate( 360deg )"}, + {"transform":"translateX( 100px ) scale( 1 )"}, + {"transform":"none"}, + {} + ]; + + const animation3 = div_2.animate(keyframe1, { + "duration":3000, + "easing":"linear", + }); + const animation4 = div_2.animate(keyframe2, { + "duration":3000, + "easing":"linear", + "composite": 'replace', + }); + animation1.pause(); + animation2.pause(); + animation3.pause(); + animation4.pause(); + var i; + for (i = 0; i <= 30; i++) { + animation2.currentTime = 100 * i; + animation4.currentTime = 100 * i; + var box_size_dependent_transform = getComputedStyle(div_1)['transform']; + var reference_transform = getComputedStyle(div_2)['transform'] + var progress = i / 30; + // The second animation replaces the first animation. As the rotate and + // scale perations are effectively no-ops when the matrix fallback is + // applied. The expected behavior is to go from x-postion 200px to 0 in the + // first 2000ms and go back to x-position 200px in the last 1000ms. + var expected_transform = 'matrix(1, 0, 0, 1, $1, 0)' + .replace('$1', Math.max(200 - 300 * progress, 0) + + Math.max(0, -400 + 600 * progress)); + assert_matrix_equals(box_size_dependent_transform, reference_transform); + assert_matrix_equals(reference_transform, expected_transform); + } +}) +</script> +</body> diff --git a/testing/web-platform/tests/web-animations/animation-model/combining-effects/applying-the-composited-result.html b/testing/web-platform/tests/web-animations/animation-model/combining-effects/applying-the-composited-result.html new file mode 100644 index 0000000000..336115e577 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/combining-effects/applying-the-composited-result.html @@ -0,0 +1,29 @@ +<!doctype html> +<meta charset=utf-8> +<title>Applying the composited result</title> +<link rel="help" + href="https://drafts.csswg.org/web-animations-1/#applying-the-composited-result"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src="../../testcommon.js"></script> +<div id="log"></div> +<script> +'use strict'; + +promise_test(async t => { + const div = createDiv(t); + div.style.marginLeft = '10px'; + const animation = div.animate( + { marginLeft: ['100px', '200px'] }, + 100 * MS_PER_SEC + ); + await animation.ready; + + animation.finish(); + + const marginLeft = parseFloat(getComputedStyle(div).marginLeft); + assert_equals(marginLeft, 10, 'The computed style should be reset'); +}, 'Finishing an animation that does not fill forwards causes its animation' + + ' style to be cleared'); + +</script> diff --git a/testing/web-platform/tests/web-animations/animation-model/combining-effects/effect-composition.html b/testing/web-platform/tests/web-animations/animation-model/combining-effects/effect-composition.html new file mode 100644 index 0000000000..70a8cdd92c --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/combining-effects/effect-composition.html @@ -0,0 +1,154 @@ +<!doctype html> +<meta charset=utf-8> +<title>Effect composition</title> +<link rel="help" href="https://drafts.csswg.org/web-animations/#effect-composition"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src="../../testcommon.js"></script> +<div id="log"></div> +<script> +'use strict'; + +for (const composite of ['accumulate', 'add']) { + test(t => { + const div = createDiv(t); + div.style.marginLeft = '10px'; + const anim = + div.animate({ marginLeft: ['0px', '10px'], composite }, 100); + + anim.currentTime = 50; + assert_equals(getComputedStyle(div).marginLeft, '15px', + 'Animated margin-left style at 50%'); + }, `${composite} onto the base value`); + + test(t => { + const div = createDiv(t); + div.style.marginLeft = '10px'; + const anim = + div.animate([{ marginLeft: '20px', offset: 0.25 }, { marginLeft: '30px', offset: 0.75 }], + { duration: 100, composite }); + + anim.currentTime = 50; + assert_equals(getComputedStyle(div).marginLeft, '35px', + 'Animated margin-left style at 50%'); + }, `${composite} onto the base value when the interval does not include the 0 or 1 keyframe`); + + test(t => { + const div = createDiv(t); + const anims = []; + anims.push(div.animate({ marginLeft: ['10px', '20px'], + composite: 'replace' }, + 100)); + anims.push(div.animate({ marginLeft: ['0px', '10px'], + composite }, + 100)); + + for (const anim of anims) { + anim.currentTime = 50; + } + + assert_equals(getComputedStyle(div).marginLeft, '20px', + 'Animated style at 50%'); + }, `${composite} onto an underlying animation value`); + + test(t => { + const div = createDiv(t); + const anims = []; + anims.push(div.animate({ transform: 'translateX(100px)' }, { duration: 100, composite: 'replace' })); + anims.push(div.animate({ transform: 'translateY(100px)' }, { duration: 100, composite })); + + for (const anim of anims) { + anim.currentTime = 50; + } + + assert_equals(getComputedStyle(div).transform, 'matrix(1, 0, 0, 1, 50, 50)', + 'Animated style at 50%'); + }, `${composite} onto an underlying animation value with implicit from values`); + + test(t => { + const div = createDiv(t); + const anims = []; + anims.push(div.animate([{ offset: 1, transform: 'translateX(100px)' }], { duration: 100, composite: 'replace' })); + anims.push(div.animate([{ offset: 1, transform: 'translateY(100px)' }], { duration: 100, composite })); + + for (const anim of anims) { + anim.currentTime = 50; + } + + assert_equals(getComputedStyle(div).transform, 'matrix(1, 0, 0, 1, 50, 50)', + 'Animated style at 50%'); + }, `${composite} onto an underlying animation value with implicit to values`); + + test(t => { + const div = createDiv(t); + div.style.marginLeft = '10px'; + const anim = + div.animate([{ marginLeft: '10px', composite }, + { marginLeft: '30px', composite: 'replace' }], + 100); + + anim.currentTime = 50; + assert_equals(getComputedStyle(div).marginLeft, '25px', + 'Animated style at 50%'); + }, `Composite when mixing ${composite} and replace`); + + test(t => { + const div = createDiv(t); + div.style.marginLeft = '10px'; + const anim = + div.animate([{ marginLeft: '10px', composite: 'replace' }, + { marginLeft: '20px' }], + { duration: 100 , composite }); + + anim.currentTime = 50; + assert_equals(getComputedStyle(div).marginLeft, '20px', + 'Animated style at 50%'); + }, `${composite} specified on a keyframe overrides the composite mode of` + + ' the effect'); + + test(t => { + const div = createDiv(t); + div.style.marginLeft = '10px'; + const anim = + div.animate([{ marginLeft: '10px', composite: 'replace' }, + { marginLeft: '20px' }], + 100); + + anim.effect.composite = composite; + anim.currentTime = 50; // (10 + (10 + 20)) * 0.5 + assert_equals(getComputedStyle(div).marginLeft, '20px', + 'Animated style at 50%'); + }, 'unspecified composite mode on a keyframe is overriden by setting' + + ` ${composite} of the effect`); +} + +test(t => { + const div = createDiv(t); + const anims = []; + anims.push(div.animate({ marginLeft: ['10px', '20px'], + composite: 'replace' }, + 100)); + anims.push(div.animate({ marginLeft: ['0px', '10px'], + composite: 'add' }, + 100)); + // This should fully replace the previous effects. + anims.push(div.animate({ marginLeft: ['20px', '30px'], + composite: 'replace' }, + 100)); + anims.push(div.animate({ marginLeft: ['30px', '40px'], + composite: 'add' }, + 100)); + + for (const anim of anims) { + anim.currentTime = 50; + } + + // The result of applying the above effect stack is: + // underlying = 0.5 * 20 + 0.5 * 30 = 25 + // result = 0.5 * (underlying + 30px) + 0.5 * (underlying + 40px) + // = 60 + assert_equals(getComputedStyle(div).marginLeft, '60px', + 'Animated style at 50%'); +}, 'Composite replace fully replaces the underlying animation value'); + +</script> diff --git a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/computed-keyframes-shorthands.html b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/computed-keyframes-shorthands.html new file mode 100644 index 0000000000..ff62a23bce --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/computed-keyframes-shorthands.html @@ -0,0 +1,30 @@ +<!doctype html> +<meta charset=utf-8> +<title>Calculating computed keyframes: Shorthand properties</title> +<link rel="help" href="https://drafts.csswg.org/web-animations-1/#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> +<div id="target"></div> +<script> +'use strict'; + +test(t => { + const div = createDiv(t); + div.style.opacity = '0'; + + const animation = div.animate({ all: 'initial' }, 100 * MS_PER_SEC); + animation.currentTime = 50 * MS_PER_SEC; + + assert_approx_equals( + parseFloat(getComputedStyle(div).opacity), + 0.5, + 0.0001, + 'Should be half way through an opacity animation' + ); +}, 'It should be possible to animate the all shorthand'); + +</script> +</body> diff --git a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-in-removed-iframe-crash.html b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-in-removed-iframe-crash.html new file mode 100644 index 0000000000..209ede786f --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-in-removed-iframe-crash.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Querying keyframes for an effect in a removed iframe should not crash + </title> +<link rel="help" href="https://www.w3.org/TR/web-animations-1/#dom-keyframeeffect-getkeyframes"> +</head> +<body> + <div id="target"></div> + <iframe id="iframe"></iframe> +</body> +<script type="text/javascript"> + const target = document.getElementById('target'); + const iframe = document.getElementById('iframe'); + const keyframes = [{ background: 'green' }, { background: 'blue' }, ]; + const effect = new iframe.contentWindow.KeyframeEffect(target, keyframes); + iframe.parentNode.removeChild(iframe); + const result = effect.getKeyframes(); +</script> +</html> diff --git a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-on-marquee-parent-crash.html b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-on-marquee-parent-crash.html new file mode 100644 index 0000000000..2948d6b66e --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-on-marquee-parent-crash.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>Animating marquee's parent inside display:none</title> +<link rel="help" href="https://drafts.csswg.org/web-animations-1/"> +<link rel="help" href="https://crbug.com/1290016"> +<div id=container></div> +<script> + let outer = document.createElement('div'); + outer.style.display = 'none'; + let inner = document.createElement('div'); + let marquee = document.createElement('marquee'); + + let effect = new KeyframeEffect(inner, [{'width': '1px'}], 1); + let anim = new Animation(effect, null); + anim.pause(); + + document.body.append(outer); + outer.append(inner); + inner.append(marquee); + + // Don't crash. +</script> diff --git a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-context-filling.html b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-context-filling.html new file mode 100644 index 0000000000..fcb7f13126 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-context-filling.html @@ -0,0 +1,377 @@ +<!doctype html> +<meta charset=utf-8> +<title>The effect value of a keyframe effect: Forwards-filling animations whose + values depend on their context (target element)</title> +<link rel="help" href="https://drafts.csswg.org/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> +'use strict'; + +test(t => { + const div = createDiv(t); + div.style.fontSize = '10px'; + const animation = div.animate( + [{ marginLeft: '10em' }, { marginLeft: '20em' }], + { duration: 1000, fill: 'forwards' } + ); + animation.finish(); + assert_equals( + getComputedStyle(div).marginLeft, + '200px', + 'Effect value before updating font-size' + ); + + div.style.fontSize = '20px'; + + assert_equals( + getComputedStyle(div).marginLeft, + '400px', + 'Effect value after updating font-size' + ); +}, 'Filling effect values reflect changes to font-size on element'); + +test(t => { + const parentDiv = createDiv(t); + const div = createDiv(t); + parentDiv.appendChild(div); + parentDiv.style.fontSize = '10px'; + + const animation = div.animate( + [{ marginLeft: '10em' }, { marginLeft: '20em' }], + { duration: 1000, fill: 'forwards' } + ); + animation.finish(); + assert_equals( + getComputedStyle(div).marginLeft, + '200px', + 'Effect value before updating font-size on parent element' + ); + + parentDiv.style.fontSize = '20px'; + + assert_equals( + getComputedStyle(div).marginLeft, + '400px', + 'Effect value after updating font-size on parent element' + ); +}, 'Filling effect values reflect changes to font-size on parent element'); + +test(t => { + const div = createDiv(t); + div.style.setProperty('--target', '100px'); + const animation = div.animate( + [{ marginLeft: '0px' }, { marginLeft: 'var(--target)' }], + { duration: 1000, fill: 'forwards' } + ); + animation.finish(); + assert_equals( + getComputedStyle(div).marginLeft, + '100px', + 'Effect value before updating variable' + ); + + div.style.setProperty('--target', '200px'); + + assert_equals( + getComputedStyle(div).marginLeft, + '200px', + 'Effect value after updating variable' + ); +}, 'Filling effect values reflect changes to variables on element'); + +test(t => { + const parentDiv = createDiv(t); + const div = createDiv(t); + parentDiv.appendChild(div); + + parentDiv.style.setProperty('--target', '10em'); + parentDiv.style.fontSize = '10px'; + + const animation = div.animate( + [{ marginLeft: '0px' }, { marginLeft: 'calc(var(--target) * 2)' }], + { duration: 1000, fill: 'forwards' } + ); + animation.finish(); + assert_equals( + getComputedStyle(div).marginLeft, + '200px', + 'Effect value before updating variable' + ); + + parentDiv.style.setProperty('--target', '20em'); + + assert_equals( + getComputedStyle(div).marginLeft, + '400px', + 'Effect value after updating variable' + ); +}, 'Filling effect values reflect changes to variables on parent element'); + +test(t => { + const div = createDiv(t); + const animation = div.animate( + [{ marginLeft: '100px' }, { marginLeft: '200px' }], + { duration: 1000, fill: 'forwards' } + ); + animation.finish(); + assert_equals( + getComputedStyle(div).marginLeft, + '200px', + 'Effect value before updating the animation' + ); + + animation.effect.setKeyframes([ + { marginLeft: '100px' }, + { marginLeft: '300px' }, + ]); + + assert_equals( + getComputedStyle(div).marginLeft, + '300px', + 'Effect value after updating the animation' + ); +}, 'Filling effect values reflect changes to the the animation\'s keyframes'); + +test(t => { + const div = createDiv(t); + div.style.marginLeft = '100px'; + const animation = div.animate( + [{ marginLeft: '100px' }, { marginLeft: '200px' }], + { duration: 1000, fill: 'forwards' } + ); + animation.finish(); + assert_equals( + getComputedStyle(div).marginLeft, + '200px', + 'Effect value before updating the animation' + ); + + animation.effect.composite = 'add'; + + assert_equals( + getComputedStyle(div).marginLeft, + '300px', + 'Effect value after updating the composite mode' + ); +}, 'Filling effect values reflect changes to the the animation\'s composite mode'); + +test(t => { + const div = createDiv(t); + const animation = div.animate( + [{ marginLeft: '0px' }, { marginLeft: '100px' }], + { duration: 1000, iterations: 2, fill: 'forwards' } + ); + animation.finish(); + assert_equals( + getComputedStyle(div).marginLeft, + '100px', + 'Effect value before updating the animation' + ); + + animation.effect.iterationComposite = 'accumulate'; + + assert_equals( + getComputedStyle(div).marginLeft, + '200px', + 'Effect value after updating the iteration composite mode' + ); +}, 'Filling effect values reflect changes to the the animation\'s iteration composite mode'); + +test(t => { + const div = createDiv(t); + div.style.marginLeft = '100px'; + const animation = div.animate( + [{ marginLeft: '100px' }, { marginLeft: '200px' }], + { duration: 1000, fill: 'forwards', composite: 'add' } + ); + animation.finish(); + assert_equals( + getComputedStyle(div).marginLeft, + '300px', + 'Effect value before updating underlying value' + ); + + div.style.marginLeft = '200px'; + + assert_equals( + getComputedStyle(div).marginLeft, + '400px', + 'Effect value after updating underlying value' + ); +}, 'Filling effect values reflect changes to the base value when using' + + ' additive animation'); + +test(t => { + const div = createDiv(t); + div.style.marginLeft = '100px'; + const animation = div.animate( + [{ marginLeft: '100px' }, { marginLeft: '200px', composite: 'add' }], + { duration: 1000, fill: 'forwards' } + ); + animation.finish(); + assert_equals( + getComputedStyle(div).marginLeft, + '300px', + 'Effect value before updating underlying value' + ); + + div.style.marginLeft = '200px'; + + assert_equals( + getComputedStyle(div).marginLeft, + '400px', + 'Effect value after updating underlying value' + ); +}, 'Filling effect values reflect changes to the base value when using' + + ' additive animation on a single keyframe'); + +test(t => { + const div = createDiv(t); + div.style.marginLeft = '0px'; + const animation = div.animate([{ marginLeft: '100px', offset: 0 }], { + duration: 1000, + fill: 'forwards', + }); + animation.finish(); + assert_equals( + getComputedStyle(div).marginLeft, + '0px', + 'Effect value before updating underlying value' + ); + + div.style.marginLeft = '200px'; + + assert_equals( + getComputedStyle(div).marginLeft, + '200px', + 'Effect value after updating underlying value' + ); +}, 'Filling effect values reflect changes to the base value when using' + + ' the fill value is an implicit keyframe'); + +test(t => { + const parentDiv = createDiv(t); + const div = createDiv(t); + parentDiv.appendChild(div); + parentDiv.style.fontSize = '10px'; + div.style.marginLeft = '10em'; + // Computed underlying margin-left is 100px + + const animation = div.animate( + [{ marginLeft: '100px' }, { marginLeft: '200px' }], + { duration: 1000, fill: 'forwards', composite: 'add' } + ); + animation.finish(); + assert_equals( + getComputedStyle(div).marginLeft, + '300px', + 'Effect value before updating font-size on parent' + ); + + parentDiv.style.fontSize = '20px'; + // Computed underlying margin-left is now 200px + + assert_equals( + getComputedStyle(div).marginLeft, + '400px', + 'Effect value after updating font-size on parent' + ); +}, 'Filling effect values reflect changes to the base value via a' + + ' parent element'); + +test(t => { + const div = createDiv(t); + const animationA = div.animate( + [{ marginLeft: '0px' }, { marginLeft: '100px' }], + { duration: 2000, fill: 'forwards', easing: 'step-end' } + ); + const animationB = div.animate( + [{ marginLeft: '100px' }, { marginLeft: '200px' }], + { duration: 1000, fill: 'forwards', composite: 'add' } + ); + animationB.finish(); + assert_equals( + getComputedStyle(div).marginLeft, + '200px', + 'Effect value before updating underyling animation' + ); + + // Go to end of the underlying animation so that it jumps to 100px + animationA.finish(); + + assert_equals( + getComputedStyle(div).marginLeft, + '300px', + 'Effect value after updating underlying animation' + ); +}, 'Filling effect values reflect changes to underlying animations'); + +test(t => { + const parentDiv = createDiv(t); + const div = createDiv(t); + parentDiv.appendChild(div); + + parentDiv.style.fontSize = '10px'; + + const animationA = div.animate( + [{ marginLeft: '0px' }, { marginLeft: '10em' }], + { duration: 2000, fill: 'forwards', easing: 'step-start' } + ); + const animationB = div.animate( + [{ marginLeft: '100px' }, { marginLeft: '200px' }], + { duration: 1000, fill: 'forwards', composite: 'add' } + ); + animationB.finish(); + assert_equals( + getComputedStyle(div).marginLeft, + '300px', + 'Effect value before updating parent font-size' + ); + + parentDiv.style.fontSize = '20px'; + // At this point the underlying animation's output should jump to 200px. + + assert_equals( + getComputedStyle(div).marginLeft, + '400px', + 'Effect value after updating parent font-size' + ); +}, 'Filling effect values reflect changes to underlying animations via a' + + ' a parent element'); + +test(t => { + const div = createDiv(t); + const animationA = div.animate( + [{ marginLeft: '0px' }, { marginLeft: '0px' }], + { duration: 2000, fill: 'forwards' } + ); + const animationB = div.animate( + [{ marginLeft: '100px' }, { marginLeft: '200px' }], + { duration: 1000, fill: 'forwards', composite: 'add' } + ); + animationB.finish(); + assert_equals( + getComputedStyle(div).marginLeft, + '200px', + 'Effect value before updating underyling animation' + ); + + animationA.effect.setKeyframes([ + { marginLeft: '100px' }, + { marginLeft: '100px' }, + ]); + + assert_equals( + getComputedStyle(div).marginLeft, + '300px', + 'Effect value after updating underlying animation' + ); +}, 'Filling effect values reflect changes to underlying animations made by' + + ' directly changing the keyframes'); + +</script> +</body> diff --git a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-context.html b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-context.html new file mode 100644 index 0000000000..3730a02098 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-context.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>The effect value of a keyframe effect: Property values that depend on + their context (target element)</title> +<link rel="help" href="https://drafts.csswg.org/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> +'use strict'; + +test(t => { + const div = createDiv(t); + div.style.fontSize = '10px'; + const animation = div.animate([ { marginLeft: '10em' }, + { marginLeft: '20em' } ], 1000); + animation.currentTime = 500; + assert_equals(getComputedStyle(div).marginLeft, '150px', + 'Effect value before updating font-size'); + div.style.fontSize = '20px'; + assert_equals(getComputedStyle(div).marginLeft, '300px', + 'Effect value after updating font-size'); +}, 'Effect values reflect changes to font-size on element'); + +test(t => { + const parentDiv = createDiv(t); + const div = createDiv(t); + parentDiv.appendChild(div); + parentDiv.style.fontSize = '10px'; + + const animation = div.animate([ { marginLeft: '10em' }, + { marginLeft: '20em' } ], 1000); + animation.currentTime = 500; + assert_equals(getComputedStyle(div).marginLeft, '150px', + 'Effect value before updating font-size on parent element'); + parentDiv.style.fontSize = '20px'; + assert_equals(getComputedStyle(div).marginLeft, '300px', + 'Effect value after updating font-size on parent element'); +}, 'Effect values reflect changes to font-size on parent element'); + +promise_test(t => { + const parentDiv = createDiv(t); + const div = createDiv(t); + parentDiv.appendChild(div); + parentDiv.style.fontSize = '10px'; + const animation = div.animate([ { marginLeft: '10em' }, + { marginLeft: '20em' } ], 1000); + + animation.pause(); + animation.currentTime = 500; + parentDiv.style.fontSize = '20px'; + + return animation.ready.then(() => { + assert_equals(getComputedStyle(div).marginLeft, '300px', + 'Effect value after updating font-size on parent element'); + }); +}, 'Effect values reflect changes to font-size when computed style is not' + + ' immediately flushed'); + +promise_test(t => { + const divWith10pxFontSize = createDiv(t); + divWith10pxFontSize.style.fontSize = '10px'; + const divWith20pxFontSize = createDiv(t); + divWith20pxFontSize.style.fontSize = '20px'; + + const div = createDiv(t); + div.remove(); // Detach + const animation = div.animate([ { marginLeft: '10em' }, + { marginLeft: '20em' } ], 1000); + animation.pause(); + + return animation.ready.then(() => { + animation.currentTime = 500; + + divWith10pxFontSize.appendChild(div); + assert_equals(getComputedStyle(div).marginLeft, '150px', + 'Effect value after attaching to font-size:10px parent'); + divWith20pxFontSize.appendChild(div); + assert_equals(getComputedStyle(div).marginLeft, '300px', + 'Effect value after attaching to font-size:20px parent'); + }); +}, 'Effect values reflect changes to font-size from reparenting'); + +test(t => { + const divA = createDiv(t); + divA.style.fontSize = '10px'; + + const divB = createDiv(t); + divB.style.fontSize = '20px'; + + const animation = divA.animate([ { marginLeft: '10em' }, + { marginLeft: '20em' } ], 1000); + animation.currentTime = 500; + assert_equals(getComputedStyle(divA).marginLeft, '150px', + 'Effect value before updating target element'); + + animation.effect.target = divB; + assert_equals(getComputedStyle(divB).marginLeft, '300px', + 'Effect value after updating target element'); +}, 'Effect values reflect changes to target element'); + +</script> +</body> diff --git a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-interval-distance.html b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-interval-distance.html new file mode 100644 index 0000000000..6bf5d8cd46 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-interval-distance.html @@ -0,0 +1,36 @@ +<!doctype html> +<meta charset=utf-8> +<title>The effect value of a keyframe effect: Calculating the interval + distance between keyframes</title> +<link rel="help" href="https://drafts.csswg.org/web-animations/#the-effect-value-of-a-keyframe-animation-effect"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +<body> +<div id="log"></div> +<script> +'use strict'; + +test(t => { + // In Firefox there was a floating precision bug in the calculation of the + // progress at the end of the 0.2<->1.0 interval. This test exercises that + // calculation in case other UAs suffer from the same problem. + const target = createDiv(t); + const anim = target.animate( + [ + { opacity: 0 }, + { offset: 0.2, opacity: 1, easing: 'step-end' }, + { opacity: 0 }, + ], + { + duration: 1000, + fill: 'forwards', + } + ); + + anim.currentTime = 1000; + assert_equals(getComputedStyle(target).opacity, '0'); +}, 'Interval distance is calculated correctly (precision test)'); + +</script> +</body> diff --git a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-iteration-composite-operation.html b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-iteration-composite-operation.html new file mode 100644 index 0000000000..abfda86f4d --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-iteration-composite-operation.html @@ -0,0 +1,824 @@ +<!doctype html> +<meta charset=utf-8> +<title>The effect value of a keyframe effect: Applying the iteration composite + operation</title> +<link rel="help" href="https://drafts.csswg.org/web-animations/#the-effect-value-of-a-keyframe-animation-effect"> +<link rel="help" href="https://drafts.csswg.org/web-animations/#effect-accumulation-section"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src="../../testcommon.js"></script> +<div id="log"></div> +<script> +'use strict'; + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ alignContent: ['flex-start', 'flex-end'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).alignContent, 'flex-end', + 'Animated align-content style at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_equals(getComputedStyle(div).alignContent, 'flex-start', + 'Animated align-content style at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).alignContent, 'flex-end', + 'Animated align-content style at 50s of the third iteration'); +}, 'iteration composition of discrete type animation (align-content)'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ marginLeft: ['0px', '10px'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).marginLeft, '5px', + 'Animated margin-left style at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_equals(getComputedStyle(div).marginLeft, '20px', + 'Animated margin-left style at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).marginLeft, '25px', + 'Animated margin-left style at 50s of the third iteration'); +}, 'iteration composition of <length> type animation'); + +test(t => { + const parent = createDiv(t); + parent.style.width = '100px'; + const div = createDiv(t); + parent.appendChild(div); + + const anim = + div.animate({ width: ['0%', '50%'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).width, '25px', + 'Animated width style at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_equals(getComputedStyle(div).width, '100px', + 'Animated width style at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).width, '125px', + 'Animated width style at 50s of the third iteration'); +}, 'iteration composition of <percentage> type animation'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ color: ['rgb(0, 0, 0)', 'rgb(120, 120, 120)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).color, 'rgb(60, 60, 60)', + 'Animated color style at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_equals(getComputedStyle(div).color, 'rgb(240, 240, 240)', + 'Animated color style at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).color, 'rgb(255, 255, 255)', + 'Animated color style at 50s of the third iteration'); +}, 'iteration composition of <color> type animation'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ color: ['rgb(0, 120, 0)', 'rgb(60, 60, 60)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).color, 'rgb(30, 90, 30)', + 'Animated color style at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_equals(getComputedStyle(div).color, 'rgb(120, 240, 120)', + 'Animated color style at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + // The green color is (240 + 180) / 2 = 210 + assert_equals(getComputedStyle(div).color, 'rgb(150, 210, 150)', + 'Animated color style at 50s of the third iteration'); +}, 'iteration composition of <color> type animation that green component is ' + + 'decreasing'); + + test(t => { + const div = createDiv(t); + const anim = + div.animate({ flexGrow: [0, 10] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).flexGrow, '5', + 'Animated flex-grow style at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_equals(getComputedStyle(div).flexGrow, '20', + 'Animated flex-grow style at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).flexGrow, '25', + 'Animated flex-grow style at 50s of the third iteration'); +}, 'iteration composition of <number> type animation'); + +test(t => { + const div = createDiv(t); + div.style.position = 'absolute'; + const anim = + div.animate({ clip: ['rect(0px, 0px, 0px, 0px)', + 'rect(10px, 10px, 10px, 10px)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).clip, 'rect(5px, 5px, 5px, 5px)', + 'Animated clip style at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_equals(getComputedStyle(div).clip, 'rect(20px, 20px, 20px, 20px)', + 'Animated clip style at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).clip, 'rect(25px, 25px, 25px, 25px)', + 'Animated clip style at 50s of the third iteration'); +}, 'iteration composition of <shape> type animation'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ width: ['calc(0vw + 0px)', 'calc(0vw + 10px)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).width, '5px', + 'Animated calc width style at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_equals(getComputedStyle(div).width, '20px', + 'Animated calc width style at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).width, '25px', + 'Animated calc width style at 50s of the third iteration'); +}, 'iteration composition of <calc()> value animation'); + +test(t => { + const parent = createDiv(t); + parent.style.width = '100px'; + const div = createDiv(t); + parent.appendChild(div); + + const anim = + div.animate({ width: ['calc(0% + 0px)', 'calc(10% + 10px)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).width, '10px', + // 100px * 5% + 5px + 'Animated calc width style at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_equals(getComputedStyle(div).width, + '40px', // 100px * (10% + 10%) + (10px + 10px) + 'Animated calc width style at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).width, + '50px', // (40px + 60px) / 2 + 'Animated calc width style at 50s of the third iteration'); +}, 'iteration composition of <calc()> value animation that the values can\'t' + + 'be reduced'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ opacity: [0, 0.4] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).opacity, '0.2', + 'Animated opacity style at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_equals(getComputedStyle(div).opacity, '0.8', + 'Animated opacity style at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).opacity, '1', // (0.8 + 1.2) * 0.5 + 'Animated opacity style at 50s of the third iteration'); +}, 'iteration composition of opacity animation'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ boxShadow: ['rgb(0, 0, 0) 0px 0px 0px 0px', + 'rgb(120, 120, 120) 10px 10px 10px 0px'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).boxShadow, + 'rgb(60, 60, 60) 5px 5px 5px 0px', + 'Animated box-shadow style at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_equals(getComputedStyle(div).boxShadow, + 'rgb(240, 240, 240) 20px 20px 20px 0px', + 'Animated box-shadow style at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).boxShadow, + 'rgb(255, 255, 255) 25px 25px 25px 0px', + 'Animated box-shadow style at 50s of the third iteration'); +}, 'iteration composition of box-shadow animation'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ filter: ['blur(0px)', 'blur(10px)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).filter, 'blur(5px)', + 'Animated filter blur style at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_equals(getComputedStyle(div).filter, 'blur(20px)', + 'Animated filter blur style at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).filter, 'blur(25px)', + 'Animated filter blur style at 50s of the third iteration'); +}, 'iteration composition of filter blur animation'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ filter: ['brightness(1)', + 'brightness(180%)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).filter, + 'brightness(1.4)', + 'Animated filter brightness style at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_equals(getComputedStyle(div).filter, + 'brightness(2.6)', // brightness(1) + brightness(0.8) + brightness(0.8) + 'Animated filter brightness style at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).filter, + 'brightness(3)', // (brightness(2.6) + brightness(3.4)) * 0.5 + 'Animated filter brightness style at 50s of the third iteration'); +}, 'iteration composition of filter brightness for different unit animation'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ filter: ['brightness(0)', + 'brightness(1)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).filter, + 'brightness(0.5)', + 'Animated filter brightness style at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_equals(getComputedStyle(div).filter, + 'brightness(0)', // brightness(1) is an identity element, not accumulated. + 'Animated filter brightness style at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).filter, + 'brightness(0.5)', // brightness(1) is an identity element, not accumulated. + 'Animated filter brightness style at 50s of the third iteration'); +}, 'iteration composition of filter brightness animation'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ filter: ['drop-shadow(rgb(0, 0, 0) 0px 0px 0px)', + 'drop-shadow(rgb(120, 120, 120) 10px 10px 10px)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).filter, + 'drop-shadow(rgb(60, 60, 60) 5px 5px 5px)', + 'Animated filter drop-shadow style at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_equals(getComputedStyle(div).filter, + 'drop-shadow(rgb(240, 240, 240) 20px 20px 20px)', + 'Animated filter drop-shadow style at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).filter, + 'drop-shadow(rgb(255, 255, 255) 25px 25px 25px)', + 'Animated filter drop-shadow style at 50s of the third iteration'); +}, 'iteration composition of filter drop-shadow animation'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ filter: ['brightness(1) contrast(1)', + 'brightness(2) contrast(2)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).filter, + 'brightness(1.5) contrast(1.5)', + 'Animated filter list at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_equals(getComputedStyle(div).filter, + 'brightness(3) contrast(3)', + 'Animated filter list at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).filter, + 'brightness(3.5) contrast(3.5)', + 'Animated filter list at 50s of the third iteration'); +}, 'iteration composition of same filter list animation'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ filter: ['brightness(1) contrast(1)', + 'contrast(2) brightness(2)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).filter, + 'contrast(2) brightness(2)', // discrete + 'Animated filter list at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_equals(getComputedStyle(div).filter, + // We can't accumulate 'contrast(2) brightness(2)' onto + // the first list 'brightness(1) contrast(1)' because of + // mismatch of the order. + 'brightness(1) contrast(1)', + 'Animated filter list at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).filter, + // We *can* accumulate 'contrast(2) brightness(2)' onto + // the same list 'contrast(2) brightness(2)' here. + 'contrast(4) brightness(4)', // discrete + 'Animated filter list at 50s of the third iteration'); +}, 'iteration composition of discrete filter list because of mismatch ' + + 'of the order'); + + test(t => { + const div = createDiv(t); + const anim = + div.animate({ filter: ['sepia(0)', + 'sepia(1) contrast(2)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).filter, + 'sepia(0.5) contrast(1.5)', + 'Animated filter list at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_equals(getComputedStyle(div).filter, + 'sepia(1) contrast(3)', + 'Animated filter list at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).filter, + 'sepia(1) contrast(3.5)', + 'Animated filter list at 50s of the third iteration'); +}, 'iteration composition of different length filter list animation'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ transform: ['rotate(0deg)', 'rotate(180deg)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_matrix_equals(getComputedStyle(div).transform, + 'matrix(0, 1, -1, 0, 0, 0)', // rotate(90deg) + 'Animated transform(rotate) style at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_matrix_equals(getComputedStyle(div).transform, + 'matrix(1, 0, 0, 1, 0, 0)', // rotate(360deg) + 'Animated transform(rotate) style at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_matrix_equals(getComputedStyle(div).transform, + 'matrix(0, 1, -1, 0, 0, 0)', // rotate(450deg) + 'Animated transform(rotate) style at 50s of the third iteration'); +}, 'iteration composition of transform(rotate) animation'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ transform: ['scale(0)', 'scale(1)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_matrix_equals(getComputedStyle(div).transform, + 'matrix(0.5, 0, 0, 0.5, 0, 0)', // scale(0.5) + 'Animated transform(scale) style at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_matrix_equals(getComputedStyle(div).transform, + 'matrix(0, 0, 0, 0, 0, 0)', // scale(0); scale(1) is an identity element, + // not accumulated. + 'Animated transform(scale) style at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_matrix_equals(getComputedStyle(div).transform, + 'matrix(0.5, 0, 0, 0.5, 0, 0)', // scale(0.5); scale(1) an identity + // element, not accumulated. + 'Animated transform(scale) style at 50s of the third iteration'); +}, 'iteration composition of transform: [ scale(0), scale(1) ] animation'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ transform: ['scale(1)', 'scale(2)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_matrix_equals(getComputedStyle(div).transform, + 'matrix(1.5, 0, 0, 1.5, 0, 0)', // scale(1.5) + 'Animated transform(scale) style at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_matrix_equals(getComputedStyle(div).transform, + 'matrix(3, 0, 0, 3, 0, 0)', // scale(1 + (2 -1) + (2 -1)) + 'Animated transform(scale) style at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_matrix_equals(getComputedStyle(div).transform, + 'matrix(3.5, 0, 0, 3.5, 0, 0)', // (scale(3) + scale(4)) * 0.5 + 'Animated transform(scale) style at 50s of the third iteration'); +}, 'iteration composition of transform: [ scale(1), scale(2) ] animation'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ transform: ['scale(0)', 'scale(2)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_matrix_equals(getComputedStyle(div).transform, + 'matrix(1, 0, 0, 1, 0, 0)', // scale(1) + 'Animated transform(scale) style at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_matrix_equals(getComputedStyle(div).transform, + 'matrix(2, 0, 0, 2, 0, 0)', // (scale(0) + scale(2-1)*2) + 'Animated transform(scale) style at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_matrix_equals(getComputedStyle(div).transform, + 'matrix(3, 0, 0, 3, 0, 0)', // (scale(2) + scale(4)) * 0.5 + 'Animated transform(scale) style at 50s of the third iteration'); +}, 'iteration composition of transform: scale(2) animation'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ transform: ['rotate(0deg) translateX(0px)', + 'rotate(180deg) translateX(10px)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_matrix_equals(getComputedStyle(div).transform, + 'matrix(0, 1, -1, 0, 0, 5)', // rotate(90deg) translateX(5px) + 'Animated transform list at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_matrix_equals(getComputedStyle(div).transform, + 'matrix(1, 0, 0, 1, 20, 0)', // rotate(360deg) translateX(20px) + 'Animated transform list at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_matrix_equals(getComputedStyle(div).transform, + 'matrix(0, 1, -1, 0, 0, 25)', // rotate(450deg) translateX(25px) + 'Animated transform list at 50s of the third iteration'); +}, 'iteration composition of transform list animation'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ transform: ['matrix(2, 0, 0, 2, 0, 0)', + 'matrix(3, 0, 0, 3, 30, 0)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_matrix_equals(getComputedStyle(div).transform, + 'matrix(2.5, 0, 0, 2.5, 15, 0)', + 'Animated transform of matrix function at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_matrix_equals(getComputedStyle(div).transform, + // scale(2) + (scale(3-1)*2) + translateX(30px)*2 + 'matrix(6, 0, 0, 6, 60, 0)', + 'Animated transform of matrix function at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_matrix_equals(getComputedStyle(div).transform, + // from: matrix(6, 0, 0, 6, 60, 0) + // to: matrix(7, 0, 0, 7, 90, 0) + // = scale(3) + (scale(3-1)*2) + translateX(30px)*3 + 'matrix(6.5, 0, 0, 6.5, 75, 0)', + 'Animated transform of matrix function at 50s of the third iteration'); +}, 'iteration composition of transform of matrix function'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ transform: ['translateX(0px) scale(2)', + 'scale(3) translateX(10px)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_matrix_equals(getComputedStyle(div).transform, + // Interpolate between matrix(2, 0, 0, 2, 0, 0) = translateX(0px) scale(2) + // and matrix(3, 0, 0, 3, 30, 0) = scale(3) translateX(10px) + 'matrix(2.5, 0, 0, 2.5, 15, 0)', + 'Animated transform list at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_matrix_equals(getComputedStyle(div).transform, + // 'from' and 'to' value are mismatched, so accumulate + // matrix(2, 0, 0, 2, 0, 0) onto matrix(3, 0, 0, 3, 30, 0) * 2 + // = scale(2) + (scale(3-1)*2) + translateX(30px)*2 + 'matrix(6, 0, 0, 6, 60, 0)', + 'Animated transform list at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_matrix_equals(getComputedStyle(div).transform, + // Interpolate between matrix(6, 0, 0, 6, 60, 0) + // and matrix(7, 0, 0, 7, 210, 0) = scale(7) translate(30px) + 'matrix(6.5, 0, 0, 6.5, 135, 0)', + 'Animated transform list at 50s of the third iteration'); +}, 'iteration composition of transform list animation whose order is' + + ' mismatched'); + +test(t => { + const div = createDiv(t); + // Even if each transform list does not have functions which exist in + // other pair of the list, we don't fill any missing functions at all. + const anim = + div.animate({ transform: ['translateX(0px)', + 'scale(2) translateX(10px)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_matrix_equals(getComputedStyle(div).transform, + // Interpolate between matrix(1, 0, 0, 1, 0, 0) = translateX(0px) + // and matrix(2, 0, 0, 2, 20, 0) = scale(2) translateX(10px) + 'matrix(1.5, 0, 0, 1.5, 10, 0)', + 'Animated transform list at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_matrix_equals(getComputedStyle(div).transform, + // 'from' and 'to' value are mismatched, so accumulate + // matrix(1, 0, 0, 1, 0, 0) onto matrix(2, 0, 0, 2, 20, 0) * 2 + // = scale(1) + (scale(2-1)*2) + translateX(20px)*2 + 'matrix(3, 0, 0, 3, 40, 0)', + 'Animated transform list at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_matrix_equals(getComputedStyle(div).transform, + // Interpolate between matrix(3, 0, 0, 3, 40, 0) + // and matrix(4, 0, 0, 4, 120, 0) = + // scale(2 + (2-1)*2) translate(10px * 3) + 'matrix(3.5, 0, 0, 3.5, 80, 0)', + 'Animated transform list at 50s of the third iteration'); +}, 'iteration composition of transform list animation whose order is' + + ' mismatched because of missing functions'); + + test(t => { + const div = createDiv(t); + const anim = + div.animate({ transform: ['none', + 'translateX(10px)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_matrix_equals(getComputedStyle(div).transform, + // translateX(none) -> translateX(10px) @ 50% + 'matrix(1, 0, 0, 1, 5, 0)', + 'Animated transform list at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_matrix_equals(getComputedStyle(div).transform, + // translateX(10px * 2 + none) -> translateX(10px * 2 + 10px) @ 0% + 'matrix(1, 0, 0, 1, 20, 0)', + 'Animated transform list at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_matrix_equals(getComputedStyle(div).transform, + // translateX(10px * 2 + none) -> translateX(10px * 2 + 10px) @ 50% + 'matrix(1, 0, 0, 1, 25, 0)', + 'Animated transform list at 50s of the third iteration'); +}, 'iteration composition of transform from none to translate'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ transform: ['matrix3d(1, 0, 0, 0, ' + + '0, 1, 0, 0, ' + + '0, 0, 1, 0, ' + + '0, 0, 30, 1)', + 'matrix3d(1, 0, 0, 0, ' + + '0, 1, 0, 0, ' + + '0, 0, 1, 0, ' + + '0, 0, 50, 1)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_matrix_equals(getComputedStyle(div).transform, + 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 40, 1)', + 'Animated transform of matrix3d function at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_matrix_equals(getComputedStyle(div).transform, + // translateZ(30px) + (translateZ(50px)*2) + 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 130, 1)', + 'Animated transform of matrix3d function at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_matrix_equals(getComputedStyle(div).transform, + // from: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 130, 1) + // to: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 150, 1) + 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 140, 1)', + 'Animated transform of matrix3d function at 50s of the third iteration'); +}, 'iteration composition of transform of matrix3d function'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ transform: ['rotate3d(1, 1, 0, 0deg)', + 'rotate3d(1, 1, 0, 90deg)'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = 0; + assert_matrix_equals(getComputedStyle(div).transform, + 'matrix(1, 0, 0, 1, 0, 0)', // Actually not rotated at all. + 'Animated transform of rotate3d function at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_matrix_equals(getComputedStyle(div).transform, + rotate3dToMatrix3d(1, 1, 0, Math.PI), // 180deg + 'Animated transform of rotate3d function at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_matrix_equals(getComputedStyle(div).transform, + rotate3dToMatrix3d(1, 1, 0, 225 * Math.PI / 180), //((270 + 180) * 0.5)deg + 'Animated transform of rotate3d function at 50s of the third iteration'); +}, 'iteration composition of transform of rotate3d function'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ marginLeft: ['10px', '20px'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).marginLeft, '15px', + 'Animated margin-left style at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_equals(getComputedStyle(div).marginLeft, '50px', // 10px + 20px + 20px + 'Animated margin-left style at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).marginLeft, '55px', // (50px + 60px) * 0.5 + 'Animated margin-left style at 50s of the third iteration'); +}, 'iteration composition starts with non-zero value animation'); + +test(t => { + const div = createDiv(t); + const anim = + div.animate({ marginLeft: ['10px', '-10px'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).marginLeft, + '0px', + 'Animated margin-left style at 50s of the first iteration'); + anim.currentTime = anim.effect.getComputedTiming().duration * 2; + assert_equals(getComputedStyle(div).marginLeft, + '-10px', // 10px + -10px + -10px + 'Animated margin-left style at 0s of the third iteration'); + anim.currentTime += anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).marginLeft, + '-20px', // (-10px + -30px) * 0.5 + 'Animated margin-left style at 50s of the third iteration'); +}, 'iteration composition with negative final value animation'); + +test(t => { + const div = createDiv(t); + const anim = div.animate({ marginLeft: ['0px', '10px'] }, + { duration: 100 * MS_PER_SEC, + easing: 'linear', + iterations: 10, + iterationComposite: 'accumulate' }); + anim.pause(); + + anim.currentTime = + anim.effect.getComputedTiming().duration * 2 + + anim.effect.getComputedTiming().duration / 2; + assert_equals(getComputedStyle(div).marginLeft, '25px', + 'Animated style at 50s of the third iteration'); + + // double its duration. + anim.effect.updateTiming({ + duration: anim.effect.getComputedTiming().duration * 2 + }); + assert_equals(getComputedStyle(div).marginLeft, '12.5px', + 'Animated style at 25s of the first iteration'); + + // half of original. + anim.effect.updateTiming({ + duration: anim.effect.getComputedTiming().duration / 4 + }); + assert_equals(getComputedStyle(div).marginLeft, '50px', + 'Animated style at 50s of the fourth iteration'); +}, 'duration changes with an iteration composition operation of accumulate'); + +</script> diff --git a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-opacity-replaced-effect-in-shadow-root-ref.html b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-opacity-replaced-effect-in-shadow-root-ref.html new file mode 100644 index 0000000000..792ca214cf --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-opacity-replaced-effect-in-shadow-root-ref.html @@ -0,0 +1,9 @@ +<!doctype html> +<style> +div { + width: 100px; + height: 100px; + background: green; +} +</style> +<div></div> diff --git a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-opacity-replaced-effect-in-shadow-root.html b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-opacity-replaced-effect-in-shadow-root.html new file mode 100644 index 0000000000..43e229856b --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-opacity-replaced-effect-in-shadow-root.html @@ -0,0 +1,26 @@ +<!doctype html> +<html class="reftest-wait"> +<head> +<meta charset=utf-8> +<title>The effect value of consecutive animations targeting 'opacity' in a shadow root</title> +<link rel="help" href="https://drafts.csswg.org/web-animations/"> +<link rel="match" href="effect-value-opacity-replaced-effect-in-shadow-root-ref.html"> +</head> +<body> +<custom-element></custom-element> +<script> +'use strict'; + +(async function () { + const customElement = document.querySelector('custom-element'); + const shadowRoot = customElement.attachShadow({ mode: 'open' }); + shadowRoot.innerHTML = `<div style="width: 100px; height: 100px; background-color: green"></div>`; + const target = shadowRoot.firstElementChild; + + await target.animate({ opacity: [1, 0] }, { duration: 10, fill: 'both' }).finished; + await target.animate({ opacity: [0, 1] }, { duration: 10, fill: 'both' }).finished; + document.documentElement.classList.remove("reftest-wait"); +})(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-opacity-replaced-effect-ref.html b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-opacity-replaced-effect-ref.html new file mode 100644 index 0000000000..792ca214cf --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-opacity-replaced-effect-ref.html @@ -0,0 +1,9 @@ +<!doctype html> +<style> +div { + width: 100px; + height: 100px; + background: green; +} +</style> +<div></div> diff --git a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-opacity-replaced-effect.html b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-opacity-replaced-effect.html new file mode 100644 index 0000000000..bef3bd3e8d --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-opacity-replaced-effect.html @@ -0,0 +1,32 @@ +<!doctype html> +<html class="reftest-wait"> +<head> +<meta charset=utf-8> +<title>The effect value of consecutive animations targeting 'opacity'</title> +<link rel="help" href="https://drafts.csswg.org/web-animations/"> +<link rel="match" href="effect-value-opacity-replaced-effect-ref.html"> +<style> +div { + width: 100px; + height: 100px; + background: green; + will-change: opacity; +} +</style> +</head> +<body> +<div></div> +<script> +'use strict'; + +(async function () { + const div = document.querySelector('div'); + + await div.animate({ opacity: [1, 0] }, { duration: 10, fill: 'both' }).finished; + await div.animate({ opacity: [0, 1] }, { duration: 10, fill: 'both' }).finished; + + document.documentElement.classList.remove("reftest-wait"); +})(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-overlapping-keyframes.html b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-overlapping-keyframes.html new file mode 100644 index 0000000000..a2a0683921 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-overlapping-keyframes.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>The effect value of a keyframe effect: Overlapping keyframes</title> +<link rel="help" href="https://drafts.csswg.org/web-animations/#the-effect-value-of-a-keyframe-animation-effect"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +<body> +<div id="log"></div> +<div id="target"></div> +<script> +'use strict'; + +function assert_opacity_value(opacity, expected, description) { + return assert_approx_equals(parseFloat(opacity), expected, 0.0001, description); +} + +test(t => { + const div = createDiv(t); + const anim = div.animate([ { offset: 0, opacity: 0 }, + { offset: 0, opacity: 0.1 }, + { offset: 0, opacity: 0.2 }, + { offset: 1, opacity: 0.8 }, + { offset: 1, opacity: 0.9 }, + { offset: 1, opacity: 1 } ], + { duration: 1000, + easing: 'cubic-bezier(0.5, -0.5, 0.5, 1.5)' }); + assert_opacity_value(getComputedStyle(div).opacity, 0.2, + 'When progress is zero the last keyframe with offset 0 should' + + ' be used'); + // http://cubic-bezier.com/#.5,-0.5,.5,1.5 + // At t=0.15, the progress should be negative + anim.currentTime = 150; + assert_equals(getComputedStyle(div).opacity, '0', + 'When progress is negative, the first keyframe with a 0 offset' + + ' should be used'); + // At t=0.71, the progress should be just less than 1 + anim.currentTime = 710; + assert_approx_equals(parseFloat(getComputedStyle(div).opacity), 0.8, 0.01, + 'When progress is just less than 1, the first keyframe with an' + + ' offset of 1 should be used as the interval endpoint'); + // At t=0.85, the progress should be > 1 + anim.currentTime = 850; + assert_equals(getComputedStyle(div).opacity, '1', + 'When progress is greater than 1.0, the last keyframe with a 1' + + ' offset should be used'); + anim.finish(); + assert_equals(getComputedStyle(div).opacity, '1', + 'When progress is equal to 1.0, the last keyframe with a 1' + + ' offset should be used'); +}, 'Overlapping keyframes at 0 and 1 use the appropriate value when the' + + ' progress is outside the range [0, 1]'); + +test(t => { + const div = createDiv(t); + const anim = div.animate([ { offset: 0, opacity: 0 }, + { offset: 0.5, opacity: 0.3 }, + { offset: 0.5, opacity: 0.5 }, + { offset: 0.5, opacity: 0.7 }, + { offset: 1, opacity: 1 } ], 1000); + anim.currentTime = 250; + assert_opacity_value(getComputedStyle(div).opacity, 0.15, + 'Before the overlap point, the first keyframe from the' + + ' overlap point should be used as interval endpoint'); + anim.currentTime = 500; + assert_opacity_value(getComputedStyle(div).opacity, 0.7, + 'At the overlap point, the last keyframe from the' + + ' overlap point should be used as interval startpoint'); + anim.currentTime = 750; + assert_opacity_value(getComputedStyle(div).opacity, 0.85, + 'After the overlap point, the last keyframe from the' + + ' overlap point should be used as interval startpoint'); +}, 'Overlapping keyframes between 0 and 1 use the appropriate value on each' + + ' side of the overlap point'); + +</script> +</body> diff --git a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-replaced-animations.html b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-replaced-animations.html new file mode 100644 index 0000000000..d40a01fdd2 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-replaced-animations.html @@ -0,0 +1,161 @@ +<!doctype html> +<meta charset=utf-8> +<title>The effect value of a keyframe effect: Overlapping keyframes</title> +<link rel="help" href="https://drafts.csswg.org/web-animations/#the-effect-value-of-a-keyframe-animation-effect"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +<body> +<div id="log"></div> +<script> +'use strict'; + +function assert_opacity_value(opacity, expected, description) { + return assert_approx_equals( + parseFloat(opacity), + expected, + 0.0001, + description + ); +} + +promise_test(async t => { + const div = createDiv(t); + div.style.opacity = '0.1'; + + const animA = div.animate( + { opacity: 0.2 }, + { duration: 1, fill: 'forwards' } + ); + const animB = div.animate( + { opacity: 0.3 }, + { duration: 1, fill: 'forwards' } + ); + await animA.finished; + + // Sanity check + assert_equals(animA.replaceState, 'removed'); + assert_equals(animB.replaceState, 'active'); + + // animA is now removed so if we cancel animB, we should go back to the + // underlying value + animB.cancel(); + assert_opacity_value( + getComputedStyle(div).opacity, + 0.1, + 'Opacity should be the un-animated value' + ); +}, 'Removed animations do not contribute to animated style'); + +promise_test(async t => { + const div = createDiv(t); + div.style.opacity = '0.1'; + + const animA = div.animate( + { opacity: 0.2 }, + { duration: 1, fill: 'forwards' } + ); + const animB = div.animate( + { opacity: 0.3, composite: 'add' }, + { duration: 1, fill: 'forwards' } + ); + await animA.finished; + + // Sanity check + assert_equals(animA.replaceState, 'removed'); + assert_equals(animB.replaceState, 'active'); + + // animA has been removed so the final result should be 0.1 + 0.3 = 0.4. + // (If animA were not removed it would be 0.2 + 0.3 = 0.5.) + assert_opacity_value( + getComputedStyle(div).opacity, + 0.4, + 'Opacity value should not include the removed animation' + ); +}, 'Removed animations do not contribute to the effect stack'); + +promise_test(async t => { + const div = createDiv(t); + div.style.opacity = '0.1'; + + const animA = div.animate( + { opacity: 0.2 }, + { duration: 1, fill: 'forwards' } + ); + const animB = div.animate( + { opacity: 0.3 }, + { duration: 1, fill: 'forwards' } + ); + + await animA.finished; + + animA.persist(); + + animB.cancel(); + assert_opacity_value( + getComputedStyle(div).opacity, + 0.2, + "Opacity should be the persisted animation's value" + ); +}, 'Persisted animations contribute to animated style'); + +promise_test(async t => { + const div = createDiv(t); + div.style.opacity = '0.1'; + + const animA = div.animate( + { opacity: 0.2 }, + { duration: 1, fill: 'forwards' } + ); + const animB = div.animate( + { opacity: 0.3, composite: 'add' }, + { duration: 1, fill: 'forwards' } + ); + + await animA.finished; + + assert_opacity_value( + getComputedStyle(div).opacity, + 0.4, + 'Opacity value should NOT include the contribution of the removed animation' + ); + + animA.persist(); + + assert_opacity_value( + getComputedStyle(div).opacity, + 0.5, + 'Opacity value should include the contribution of the persisted animation' + ); +}, 'Persisted animations contribute to the effect stack'); + +promise_test(async t => { + const div = createDiv(t); + div.style.opacity = '0.1'; + + const animA = div.animate( + { opacity: 0.2 }, + { duration: 1, fill: 'forwards' } + ); + + // Persist the animation before it finishes (and before it would otherwise be + // removed). + animA.persist(); + + const animB = div.animate( + { opacity: 0.3, composite: 'add' }, + { duration: 1, fill: 'forwards' } + ); + + await animA.finished; + + assert_opacity_value( + getComputedStyle(div).opacity, + 0.5, + 'Opacity value should include the contribution of the persisted animation' + ); +}, 'Animations persisted before they would be removed contribute to the' + + ' effect stack'); + +</script> +</body> diff --git a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-transformed-distance.html b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-transformed-distance.html new file mode 100644 index 0000000000..a33d6d4f24 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-transformed-distance.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>The effect value of a keyframe effect: Calculating the transformed + distance between keyframes</title> +<link rel="help" href="https://drafts.csswg.org/web-animations/#the-effect-value-of-a-keyframe-animation-effect"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +<script src="../../resources/easing-tests.js"></script> +<body> +<div id="log"></div> +<script> +'use strict'; + +// Test that applying easing to keyframes is applied as expected + +for (const params of gEasingTests) { + test(t => { + const target = createDiv(t); + const anim = target.animate([ { width: '0px' }, + // We put the easing on the second keyframe + // so we can test that it is only applied + // to the specified keyframe. + { width: '100px', easing: params.easing }, + { width: '200px' } ], + { duration: 2000, + fill: 'forwards' }); + + for (const sampleTime of [0, 999, 1000, 1100, 1500, 2000]) { + anim.currentTime = sampleTime; + + const portion = (sampleTime - 1000) / 1000; + const expectedWidth = sampleTime < 1000 + ? sampleTime / 10 // first segment is linear + : 100 + params.easingFunction(portion) * 100; + assert_approx_equals(parseFloat(getComputedStyle(target).width), + expectedWidth, + 0.02, + 'The width should be approximately ' + + `${expectedWidth} at ${sampleTime}ms`); + } + }, `A ${params.desc} on a keyframe affects the resulting style`); +} + +// Test that a linear-equivalent cubic-bezier easing applied to a keyframe does +// not alter (including clamping) the result. + +for (const params of gEasingTests) { + const linearEquivalentEasings = [ 'cubic-bezier(0, 0, 0, 0)', + 'cubic-bezier(1, 1, 1, 1)' ]; + test(t => { + for (const linearEquivalentEasing of linearEquivalentEasings) { + const timing = { duration: 1000, + fill: 'forwards', + easing: params.easing }; + + const linearTarget = createDiv(t); + const linearAnim = linearTarget.animate([ { width: '0px' }, + { width: '100px' } ], + timing); + + const equivalentTarget = createDiv(t); + const equivalentAnim = + equivalentTarget.animate([ { width: '0px', + easing: linearEquivalentEasing }, + { width: '100px' } ], + timing); + + for (const sampleTime of [0, 250, 500, 750, 1000]) { + linearAnim.currentTime = sampleTime; + equivalentAnim.currentTime = sampleTime; + + assert_equals(getComputedStyle(linearTarget).width, + getComputedStyle(equivalentTarget).width, + `The 'width' of the animated elements should be equal ` + + `at ${sampleTime}ms`); + } + } + }, 'Linear-equivalent cubic-bezier keyframe easing applied to an effect ' + + `with a ${params.desc} does not alter the result`); +} + +</script> +</body> diff --git a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/keyframe-exceptions.html b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/keyframe-exceptions.html new file mode 100644 index 0000000000..4cb4be76a8 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/keyframe-exceptions.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<head> +<meta charset="utf-8"> +<link rel="help" src="https://www.w3.org/TR/web-animations-1/#processing-a-keyframes-argument"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/web-animations/testcommon.js"></script> +<script src="support/testcommon.js"></script> +<title>Keyframes with invalid offsets</title> +</head> +<script> + test(() => { + assert_throws_js(TypeError, + function() { + document.documentElement.animate([ + {offset: 0.6}, + {offset: 0.4} + ]); + }); + }, 'Offsets must be loosely sorted'); + + test(() => { + assert_throws_js(TypeError, + function() { + document.documentElement.animate([ + {offset: 'whatever'} + ]); + }); + }, 'Invalid offset'); + + test(() => { + assert_throws_js(TypeError, + function() { + document.documentElement.animate([ + {offset: -1} + ]); + }); + }, 'Offsets must be null or in the range [0,1]'); +</script> diff --git a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/transform-and-opacity-on-inline-001-ref.html b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/transform-and-opacity-on-inline-001-ref.html new file mode 100644 index 0000000000..1e7f250c48 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/transform-and-opacity-on-inline-001-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<title>CSS Test (Animations): Element.animate() animating both transform and opacity on an inline</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> + +<style> +#target { + opacity: 0.4; + will-change: opacity; +} +</style> + +<body><span id="target">x</span></body> diff --git a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/transform-and-opacity-on-inline-001.html b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/transform-and-opacity-on-inline-001.html new file mode 100644 index 0000000000..f76b53cd4c --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/transform-and-opacity-on-inline-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<title>CSS Test (Animations): Element.animate() animating both transform and opacity on an inline</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1316688"> +<link rel="match" href="transform-and-opacity-on-inline-001-ref.html"> +<meta name="assert" content="This should not crash, and should render as opacity 0.5."> + +<script> +// The transform animation should be ignored; the opacity animation should work. +window.onload = function() { + document.getElementById("target").animate( + [ + { + "transform": "translateX(0px)", + "opacity": "0.8", + }, + { + "transform": "translateX(300px)", + "opacity": "0.0", + } + ], + { duration:1000000, delay: -500000, easing: "steps(3, jump-both)" }); +} +</script> +<body><span id="target">x</span></body> diff --git a/testing/web-platform/tests/web-animations/animation-model/resources/side-effects-common.js b/testing/web-platform/tests/web-animations/animation-model/resources/side-effects-common.js new file mode 100644 index 0000000000..2f6531d4fc --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/resources/side-effects-common.js @@ -0,0 +1,81 @@ +'use strict'; + +const PROPERTY_OPACITY = 0; +const PROPERTY_TRANSFORM = 1; +const PROPERTY_BGCOLOR = 2; + +const PHASE_BEFORE = 10; +const PHASE_ACTIVE = 11; +const PHASE_AFTER = 12; + +const STATE_CURRENT = 100; +const STATE_IN_EFFECT = 101; +const STATE_NONE = 102; + +// Creates an animation in the given state/page used to test side-effects. See: +// https://drafts.csswg.org/web-animations-1/#animation-effect-phases-and-states +// +// testcase - A query string for the test case root. Must have a descendant +// with the 'target' class that will be animated. +// state - One of the STATE_ constants above. Configures the animation to be +// either "current", "in effect" or neither. +// property - One of the PROPERTY_ constants above, the property the animation +// will target. +// phase - One of the PHASE_ constants above. Configures the animation to be in +// the before/active/after phase. +function setupAnimation(testcase, state, property, phase) { + const root = document.querySelector(testcase); + const effect_target = root.querySelector('.target'); + + let keyframe; + if (property == PROPERTY_OPACITY) + keyframe = { opacity: 1}; + else if (property == PROPERTY_TRANSFORM) + keyframe = { transform: 'translateX(0px)' }; + else if (property == PROPERTY_BGCOLOR) + keyframe = { backgroundColor: 'red' }; + else + throw new Error('Unexpected property'); + + const kPhaseDuration = 1000000; + const kBeforePhaseTime = kPhaseDuration / 2; + const kActivePhaseTime = kPhaseDuration + kPhaseDuration / 2; + const kAfterPhaseTime = 2 * kPhaseDuration + kPhaseDuration / 2; + + const options = { + duration: kPhaseDuration, + delay: kPhaseDuration, + endDelay: kPhaseDuration, + + easing: 'steps(1, jump-both)', + + fill: (state == STATE_IN_EFFECT ? 'both' : 'none'), + }; + + const animation = effect_target.animate( + [ keyframe, keyframe ], options); + + switch(phase) { + case PHASE_BEFORE: + animation.currentTime = kBeforePhaseTime; + if (state == STATE_IN_EFFECT || state == STATE_NONE) + animation.playbackRate = -1; + break; + + case PHASE_ACTIVE: + if (state == STATE_NONE) + throw new Error("Cannot have state[NONE] in the active phase"); + + animation.currentTime = kActivePhaseTime; + break; + + case PHASE_AFTER: + animation.currentTime = kAfterPhaseTime; + if (state == STATE_CURRENT) + animation.playbackRate = -1; + break; + + default: + throw new Error('Unexpected phase'); + } +} diff --git a/testing/web-platform/tests/web-animations/animation-model/side-effects-of-animations-current-ref.html b/testing/web-platform/tests/web-animations/animation-model/side-effects-of-animations-current-ref.html new file mode 100644 index 0000000000..acc0465b07 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/side-effects-of-animations-current-ref.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<title> + Current animations should effectively apply will-change (i.e. force a + stacking context) (ref) +</title> +<link rel="help" href="https://drafts.csswg.org/web-animations-1/#side-effects-section"> +<link rel="author" href="mailto:bokan@chromium.org"> +<style> + .testcase { + position: relative; + margin: 2px; + border: 1px solid black; + width: 250px; + height: 25px; + } + .label { + flex-grow: 1; + } + .container { + background-color: lightgrey; + margin: 4px; + display: flex; + width: 600px; + flex-direction: row; + justify-content: flex-end; + align-items: center; + } + .pass { + width: 100%; + height: 100%; + background-color: limegreen; + } +</style> + +<!-- OPACITY --> + +<!-- Is current - before phase playing forwards --> +<div class="container"> + <div class="label">Opacity - before phase</div> + <div class="testcase" id="opacity-before"> + <div class="pass"></div> + </div> +</div> + +<!-- Is current - in play--> +<div class="container"> + <div class="label">Opacity - active phase</div> + <div class="testcase" id="opacity-active"> + <div class="pass"></div> + </div> +</div> + +<!-- Is current - after phase playing backwards--> +<div class="container"> + <div class="label">Opacity - after phase</div> + <div class="testcase" id="opacity-after"> + <div class="pass"></div> + </div> +</div> + +<!-- TRANSFORM --> + +<!-- Is current - before phase playing forwards --> +<div class="container"> + <div class="label">Transform - before phase</div> + <div class="testcase" id="transform-before"> + <div class="pass"></div> + </div> +</div> + +<!-- Is current - in play--> +<div class="container"> + <div class="label">Transform - active phase</div> + <div class="testcase" id="transform-active"> + <div class="pass"></div> + </div> +</div> + +<!-- Is current - after phase playing backwards--> +<div class="container"> + <div class="label">Transform - after phase</div> + <div class="testcase" id="transform-after"> + <div class="pass"></div> + </div> +</div> + +<!-- BACKGROUND COLOR --> +<div class="container"> + <div class="label">Background-color - before phase</div> + <div class="testcase" id="bgcolor-before"> + <div class="pass"></div> + </div> +</div> + +<!-- Is current - in play--> +<div class="container"> + <div class="label">Background-color - active phase</div> + <div class="testcase" id="bgcolor-active"> + <div class="pass"></div> + </div> +</div> + +<!-- Is current - after phase playing backwards--> +<div class="container"> + <div class="label">Background-color - after phase</div> + <div class="testcase" id="bgcolor-after"> + <div class="pass"></div> + </div> +</div> diff --git a/testing/web-platform/tests/web-animations/animation-model/side-effects-of-animations-current.html b/testing/web-platform/tests/web-animations/animation-model/side-effects-of-animations-current.html new file mode 100644 index 0000000000..18b13be9fa --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/side-effects-of-animations-current.html @@ -0,0 +1,174 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title> + Current animations should effectively apply will-change (i.e. force a + stacking context) +</title> +<link rel="help" href="https://drafts.csswg.org/web-animations-1/#side-effects-section"> +<link rel="author" href="mailto:bokan@chromium.org"> +<link rel="match" href="side-effects-of-animations-current-ref.html"> +<script src="/common/reftest-wait.js"></script> +<script src="../testcommon.js"></script> +<script src="resources/side-effects-common.js"></script> +<style> + .testcase { + position: relative; + margin: 2px; + border: 1px solid black; + width: 250px; + height: 25px; + } + .container { + background-color: lightgrey; + margin: 4px; + display: flex; + width: 600px; + flex-direction: row; + justify-content: flex-end; + align-items: center; + } + .label { + flex-grow: 1; + } + .target { + width: 100%; + height: 100%; + } + .absolutebox { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + .pass { + background-color: limegreen; + } + .fail { + background-color: red; + } +</style> + +<script> +onload = takeScreenshotOnAnimationsReady; +</script> + +<!-- OPACITY --> + +<!-- Is current - before phase playing forwards --> +<div class="container"> + <div class="label">Opacity - before phase</div> + <div class="testcase" id="opacity-before"> + <div class="absolutebox fail"></div> + <div class="target pass"></div> + </div> +</div> +<script> + setupAnimation('#opacity-before', STATE_CURRENT, PROPERTY_OPACITY, PHASE_BEFORE); +</script> + +<!-- Is current - in play--> +<div class="container"> + <div class="label">Opacity - active phase</div> + <div class="testcase" id="opacity-active"> + <div class="absolutebox fail"></div> + <div class="target pass"></div> + </div> +</div> +<script> + setupAnimation('#opacity-active', STATE_CURRENT, PROPERTY_OPACITY, PHASE_ACTIVE); +</script> + +<!-- Is current - after phase playing backwards--> +<div class="container"> + <div class="label">Opacity - after phase</div> + <div class="testcase" id="opacity-after"> + <div class="absolutebox fail"></div> + <div class="target pass"></div> + </div> +</div> +<script> + setupAnimation('#opacity-after', STATE_CURRENT, PROPERTY_OPACITY, PHASE_AFTER); +</script> + +<!-- TRANSFORM --> + +<!-- Is current - before phase playing forwards --> +<div class="container"> + <div class="label">Transform - before phase</div> + <div class="testcase" id="transform-before"> + <div class="absolutebox fail"></div> + <div class="target pass"></div> + </div> +</div> +<script> + setupAnimation('#transform-before', STATE_CURRENT, PROPERTY_TRANSFORM, PHASE_BEFORE); +</script> + +<!-- Is current - in play--> +<div class="container"> + <div class="label">Transform - active phase</div> + <div class="testcase" id="transform-active"> + <div class="absolutebox fail"></div> + <div class="target pass"></div> + </div> +</div> +<script> + setupAnimation('#transform-active', STATE_CURRENT, PROPERTY_TRANSFORM, PHASE_ACTIVE); +</script> + +<!-- Is current - after phase playing backwards--> +<div class="container"> + <div class="label">Transform - after phase</div> + <div class="testcase" id="transform-after"> + <div class="absolutebox fail"></div> + <div class="target pass"></div> + </div> +</div> +<script> + setupAnimation('#transform-after', STATE_CURRENT, PROPERTY_TRANSFORM, PHASE_AFTER); +</script> + +<!-- BACKGROUND COLOR --> +<!-- + unlike opacity and transform, background color shouldn't create a stacking + context. +--> + +<!-- Is current - before phase playing forwards --> +<div class="container"> + <div class="label">Background-color - before phase</div> + <div class="testcase" id="bgcolor-before"> + <div class="absolutebox pass"></div> + <div class="target fail"></div> + </div> +</div> +<script> + setupAnimation('#bgcolor-before', STATE_CURRENT, PROPERTY_BGCOLOR, PHASE_BEFORE); +</script> + +<!-- Is current - in play--> +<div class="container"> + <div class="label">Background-color - active phase</div> + <div class="testcase" id="bgcolor-active"> + <div class="absolutebox pass"></div> + <div class="target fail"></div> + </div> +</div> +<script> + setupAnimation('#bgcolor-active', STATE_CURRENT, PROPERTY_BGCOLOR, PHASE_ACTIVE); +</script> + +<!-- Is current - after phase playing backwards--> +<div class="container"> + <div class="label">Background-color - after phase</div> + <div class="testcase" id="bgcolor-after"> + <div class="absolutebox pass"></div> + <div class="target fail"></div> + </div> +</div> +<script> + setupAnimation('#bgcolor-after', STATE_CURRENT, PROPERTY_BGCOLOR, PHASE_AFTER); +</script> + +</html> diff --git a/testing/web-platform/tests/web-animations/animation-model/side-effects-of-animations-in-effect-ref.html b/testing/web-platform/tests/web-animations/animation-model/side-effects-of-animations-in-effect-ref.html new file mode 100644 index 0000000000..24160cb267 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/side-effects-of-animations-in-effect-ref.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<title> + In effect animations should effectively apply will-change (i.e. force a + stacking context) (ref) +</title> +<link rel="help" href="https://drafts.csswg.org/web-animations-1/#side-effects-section"> +<link rel="author" href="mailto:bokan@chromium.org"> +<style> + .testcase { + position: relative; + margin: 2px; + border: 1px solid black; + width: 250px; + height: 25px; + } + .label { + flex-grow: 1; + } + .container { + background-color: lightgrey; + margin: 4px; + display: flex; + width: 600px; + flex-direction: row; + justify-content: flex-end; + align-items: center; + } + .pass { + width: 100%; + height: 100%; + background-color: limegreen; + } +</style> + +<!-- OPACITY --> + +<!-- Is current - before phase playing forwards --> +<div class="container"> + <div class="label">Opacity - before phase</div> + <div class="testcase" id="opacity-before"> + <div class="pass"></div> + </div> +</div> + +<!-- Is current - in play--> +<div class="container"> + <div class="label">Opacity - active phase</div> + <div class="testcase" id="opacity-active"> + <div class="pass"></div> + </div> +</div> + +<!-- Is current - after phase playing backwards--> +<div class="container"> + <div class="label">Opacity - after phase</div> + <div class="testcase" id="opacity-after"> + <div class="pass"></div> + </div> +</div> + +<!-- TRANSFORM --> + +<!-- Is current - before phase playing forwards --> +<div class="container"> + <div class="label">Transform - before phase</div> + <div class="testcase" id="transform-before"> + <div class="pass"></div> + </div> +</div> + +<!-- Is current - in play--> +<div class="container"> + <div class="label">Transform - active phase</div> + <div class="testcase" id="transform-active"> + <div class="pass"></div> + </div> +</div> + +<!-- Is current - after phase playing backwards--> +<div class="container"> + <div class="label">Transform - after phase</div> + <div class="testcase" id="transform-after"> + <div class="pass"></div> + </div> +</div> + +<!-- BACKGROUND COLOR --> +<div class="container"> + <div class="label">Background-color - before phase</div> + <div class="testcase" id="bgcolor-before"> + <div class="pass"></div> + </div> +</div> + +<!-- Is current - in play--> +<div class="container"> + <div class="label">Background-color - active phase</div> + <div class="testcase" id="bgcolor-active"> + <div class="pass"></div> + </div> +</div> + +<!-- Is current - after phase playing backwards--> +<div class="container"> + <div class="label">Background-color - after phase</div> + <div class="testcase" id="bgcolor-after"> + <div class="pass"></div> + </div> +</div> diff --git a/testing/web-platform/tests/web-animations/animation-model/side-effects-of-animations-in-effect.html b/testing/web-platform/tests/web-animations/animation-model/side-effects-of-animations-in-effect.html new file mode 100644 index 0000000000..90ee055082 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/side-effects-of-animations-in-effect.html @@ -0,0 +1,174 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title> + In effect animations should effectively apply will-change (i.e. force a + stacking context) +</title> +<link rel="help" href="https://drafts.csswg.org/web-animations-1/#side-effects-section"> +<link rel="author" href="mailto:bokan@chromium.org"> +<link rel="match" href="side-effects-of-animations-in-effect-ref.html"> +<script src="/common/reftest-wait.js"></script> +<script src="../testcommon.js"></script> +<script src="resources/side-effects-common.js"></script> +<style> + .testcase { + position: relative; + margin: 2px; + border: 1px solid black; + width: 250px; + height: 25px; + } + .container { + background-color: lightgrey; + margin: 4px; + display: flex; + width: 600px; + flex-direction: row; + justify-content: flex-end; + align-items: center; + } + .label { + flex-grow: 1; + } + .target { + width: 100%; + height: 100%; + } + .absolutebox { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + .pass { + background-color: limegreen; + } + .fail { + background-color: red; + } +</style> + +<script> +onload = takeScreenshotOnAnimationsReady; +</script> + +<!-- OPACITY --> + +<!-- Is current - before phase playing forwards --> +<div class="container"> + <div class="label">Opacity - before phase</div> + <div class="testcase" id="opacity-before"> + <div class="absolutebox fail"></div> + <div class="target pass"></div> + </div> +</div> +<script> + setupAnimation('#opacity-before', STATE_IN_EFFECT, PROPERTY_OPACITY, PHASE_BEFORE); +</script> + +<!-- Is current - in play--> +<div class="container"> + <div class="label">Opacity - active phase</div> + <div class="testcase" id="opacity-active"> + <div class="absolutebox fail"></div> + <div class="target pass"></div> + </div> +</div> +<script> + setupAnimation('#opacity-active', STATE_IN_EFFECT, PROPERTY_OPACITY, PHASE_ACTIVE); +</script> + +<!-- Is current - after phase playing backwards--> +<div class="container"> + <div class="label">Opacity - after phase</div> + <div class="testcase" id="opacity-after"> + <div class="absolutebox fail"></div> + <div class="target pass"></div> + </div> +</div> +<script> + setupAnimation('#opacity-after', STATE_IN_EFFECT, PROPERTY_OPACITY, PHASE_AFTER); +</script> + +<!-- TRANSFORM --> + +<!-- Is current - before phase playing forwards --> +<div class="container"> + <div class="label">Transform - before phase</div> + <div class="testcase" id="transform-before"> + <div class="absolutebox fail"></div> + <div class="target pass"></div> + </div> +</div> +<script> + setupAnimation('#transform-before', STATE_IN_EFFECT, PROPERTY_TRANSFORM, PHASE_BEFORE); +</script> + +<!-- Is current - in play--> +<div class="container"> + <div class="label">Transform - active phase</div> + <div class="testcase" id="transform-active"> + <div class="absolutebox fail"></div> + <div class="target pass"></div> + </div> +</div> +<script> + setupAnimation('#transform-active', STATE_IN_EFFECT, PROPERTY_TRANSFORM, PHASE_ACTIVE); +</script> + +<!-- Is current - after phase playing backwards--> +<div class="container"> + <div class="label">Transform - after phase</div> + <div class="testcase" id="transform-after"> + <div class="absolutebox fail"></div> + <div class="target pass"></div> + </div> +</div> +<script> + setupAnimation('#transform-after', STATE_IN_EFFECT, PROPERTY_TRANSFORM, PHASE_AFTER); +</script> + +<!-- BACKGROUND COLOR --> +<!-- + unlike opacity and transform, background color shouldn't create a stacking + context. +--> + +<!-- Is current - before phase playing forwards --> +<div class="container"> + <div class="label">Background-color - before phase</div> + <div class="testcase" id="bgcolor-before"> + <div class="absolutebox pass"></div> + <div class="target fail"></div> + </div> +</div> +<script> + setupAnimation('#bgcolor-before', STATE_IN_EFFECT, PROPERTY_BGCOLOR, PHASE_BEFORE); +</script> + +<!-- Is current - in play--> +<div class="container"> + <div class="label">Background-color - active phase</div> + <div class="testcase" id="bgcolor-active"> + <div class="absolutebox pass"></div> + <div class="target fail"></div> + </div> +</div> +<script> + setupAnimation('#bgcolor-active', STATE_IN_EFFECT, PROPERTY_BGCOLOR, PHASE_ACTIVE); +</script> + +<!-- Is current - after phase playing backwards--> +<div class="container"> + <div class="label">Background-color - after phase</div> + <div class="testcase" id="bgcolor-after"> + <div class="absolutebox pass"></div> + <div class="target fail"></div> + </div> +</div> +<script> + setupAnimation('#bgcolor-after', STATE_IN_EFFECT, PROPERTY_BGCOLOR, PHASE_AFTER); +</script> + +</html> diff --git a/testing/web-platform/tests/web-animations/animation-model/side-effects-of-animations-none-ref.html b/testing/web-platform/tests/web-animations/animation-model/side-effects-of-animations-none-ref.html new file mode 100644 index 0000000000..4d1ea997f4 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/side-effects-of-animations-none-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<title> + Animations not in effect nor current shouldn't have side-effects (ref). +</title> +<link rel="help" href="https://drafts.csswg.org/web-animations-1/#side-effects-section"> +<link rel="author" href="mailto:bokan@chromium.org"> +<style> + .testcase { + position: relative; + margin: 2px; + border: 1px solid black; + width: 250px; + height: 25px; + } + .label { + flex-grow: 1; + } + .container { + background-color: lightgrey; + margin: 4px; + display: flex; + width: 600px; + flex-direction: row; + justify-content: flex-end; + align-items: center; + } + .pass { + width: 100%; + height: 100%; + background-color: limegreen; + } +</style> + +<!-- before phase playing backwards --> +<div class="container"> + <div class="label">Before phase</div> + <div class="testcase" id="before"> + <div class="pass"></div> + </div> +</div> + +<!-- after phase playing forwards --> +<div class="container"> + <div class="label">After phase</div> + <div class="testcase" id="after"> + <div class="pass"></div> + </div> +</div> diff --git a/testing/web-platform/tests/web-animations/animation-model/side-effects-of-animations-none.html b/testing/web-platform/tests/web-animations/animation-model/side-effects-of-animations-none.html new file mode 100644 index 0000000000..d200409e64 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/side-effects-of-animations-none.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title> + Animations not in effect nor current shouldn't have side-effects. +</title> +<link rel="help" href="https://drafts.csswg.org/web-animations-1/#side-effects-section"> +<link rel="author" href="mailto:bokan@chromium.org"> +<link rel="match" href="side-effects-of-animations-none-ref.html"> +<script src="/common/reftest-wait.js"></script> +<script src="../testcommon.js"></script> +<script src="resources/side-effects-common.js"></script> +<style> + .testcase { + position: relative; + margin: 2px; + border: 1px solid black; + width: 250px; + height: 25px; + } + .container { + background-color: lightgrey; + margin: 4px; + display: flex; + width: 600px; + flex-direction: row; + justify-content: flex-end; + align-items: center; + } + .label { + flex-grow: 1; + } + .target { + width: 100%; + height: 100%; + } + .absolutebox { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + .pass { + background-color: limegreen; + } + .fail { + background-color: red; + } +</style> + +<script> +onload = takeScreenshotOnAnimationsReady; +</script> + +<!-- before phase playing backwards --> +<div class="container"> + <div class="label">Before phase</div> + <div class="testcase" id="before"> + <div class="absolutebox pass"></div> + <div class="target fail"></div> + </div> +</div> +<script> + setupAnimation('#before', STATE_NONE, PROPERTY_OPACITY, PHASE_BEFORE); +</script> + +<!-- after phase playing forwards--> +<div class="container"> + <div class="label">After phase</div> + <div class="testcase" id="after"> + <div class="absolutebox pass"></div> + <div class="target fail"></div> + </div> +</div> +<script> + setupAnimation('#after', STATE_NONE, PROPERTY_OPACITY, PHASE_AFTER); +</script> + +</html> |