From b223e64754b9eb9c6eb3ede4a535265ef3fa38b0 Mon Sep 17 00:00:00 2001
From: ktmblueskyarb <kritollm@me.com>
Date: Tue, 28 Mar 2017 12:48:58 +0200
Subject: [PATCH] KeyFrame type for onsample, added remove(). Added test for
 onsample and addEventListener. Corrected type for AnimationKeyFrame, array
 [0, "1"] is allowed.

---
 types/web-animations-js/index.d.ts            | 10 +++++---
 .../web-animations-js-tests.ts                | 25 +++++++++++++++++++
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/types/web-animations-js/index.d.ts b/types/web-animations-js/index.d.ts
index 3bb3d56067..e0124cefd3 100644
--- a/types/web-animations-js/index.d.ts
+++ b/types/web-animations-js/index.d.ts
@@ -24,7 +24,7 @@ declare class AnimationPlaybackEvent {
 interface AnimationKeyFrame {
     easing?: string;
     offset?: number;
-    [key: string]: string | string[] | number | number[] | undefined;
+    [key: string]: string | number | [string | number, string | number] | undefined;
 }
 
 interface AnimationTimeline {
@@ -46,15 +46,17 @@ interface AnimationEffectTiming {
 declare class KeyframeEffect {
     constructor(target: HTMLElement, effect: AnimationKeyFrame | AnimationKeyFrame[], timing: number | AnimationEffectTiming, id?: string);
     activeDuration: number;
-    onsample: any;
-    parent: any;
-    target: any;
+    onsample: (timeFraction: number | null, effect: KeyframeEffect, animation: Animation) => void | undefined;
+    parent: KeyframeEffect | null;
+    target: HTMLElement;
     timing: AnimationEffectTiming;
     getFrames(): AnimationKeyFrame[];
+    remove(): void;
 }
 interface AnimationEventListener {
     (evt: AnimationPlaybackEvent): void;
 }
+
 declare class Animation {
     constructor(effect: KeyframeEffect, timeline?: AnimationTimeline);
     currentTime: number;
diff --git a/types/web-animations-js/web-animations-js-tests.ts b/types/web-animations-js/web-animations-js-tests.ts
index ece6c3cc01..d27a922a98 100644
--- a/types/web-animations-js/web-animations-js-tests.ts
+++ b/types/web-animations-js/web-animations-js-tests.ts
@@ -94,3 +94,28 @@ function test_whiteRabbit() {
 
 
 }
+// Testing onsample
+// https://github.com/web-animations/web-animations-js/releases
+function test_onsample_And_addEventListener() {
+    var elem = document.createElement("div");
+    if (elem) {
+        elem.style.width = '150px';
+        elem.style.color = 'black';
+        elem.textContent = "HELLO";
+        document.body.appendChild(elem);
+        let myEffect = new KeyframeEffect(elem, [], 1000);
+        myEffect.onsample = (timeFraction, effect, animation) => {
+            console.log("fraction", timeFraction);
+            // After finish event, timeFraction is null
+            if (timeFraction) {
+                effect.target.style.opacity = timeFraction.toFixed(2);
+            }
+        };
+        // onsample is write only
+        console.log(myEffect.onsample); // => undefined
+        var myAnimation = document.timeline.play(myEffect);
+        myAnimation.addEventListener("finish", (e) => {
+            console.log("finished", e);
+        })
+    }
+}