We use cookies to ensure you get the best experience on our website
Strona główna Odkrywaj Pomoc
Zarejestruj się Zaloguj się
0ct0pu5
/
ladybird
1
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

LibWeb: Add a few Animation property tests

Matthew Olsson 1 rok temu
rodzic
d76c2d45c4
commit
d7ad134ae5
8 zmienionych plików z 110 dodań i 0 usunięć
Zunifikowany widok Pokaż statystyki zmian
  1. 5 0
      Tests/LibWeb/Text/expected/WebAnimations/animation-properties/currentTime.txt
  2. 4 0
      Tests/LibWeb/Text/expected/WebAnimations/animation-properties/effect.txt
  3. 4 0
      Tests/LibWeb/Text/expected/WebAnimations/animation-properties/finished.txt
  4. 2 0
      Tests/LibWeb/Text/expected/WebAnimations/animation-properties/timeline.txt
  5. 29 0
      Tests/LibWeb/Text/input/WebAnimations/animation-properties/currentTime.html
  6. 19 0
      Tests/LibWeb/Text/input/WebAnimations/animation-properties/effect.html
  7. 34 0
      Tests/LibWeb/Text/input/WebAnimations/animation-properties/finished.html
  8. 13 0
      Tests/LibWeb/Text/input/WebAnimations/animation-properties/timeline.html

+ 5 - 0
Tests/LibWeb/Text/expected/WebAnimations/animation-properties/currentTime.txt
Wyświetl plik 

@@ -0,0 +1,5 @@
 
+   Animation with no timeline has null currentTime: true
 
+Animation that hasn't been played has null currentTime: true
 
+Played animation has a currentTime of 0: true
 
+New animation has not started animating: true
 
+Animation with currentTime set to end is finished: true

+ 4 - 0
Tests/LibWeb/Text/expected/WebAnimations/animation-properties/effect.txt
Wyświetl plik 

@@ -0,0 +1,4 @@
 
+   Element.animate creates Animation with effect: true
 
+Setting effect to null clears the effect: true
 
+Accessing effect property on animation with no effect produces null: true
 
+Setting effect on animation with no effect works: true

+ 4 - 0
Tests/LibWeb/Text/expected/WebAnimations/animation-properties/finished.txt
Wyświetl plik 

@@ -0,0 +1,4 @@
 
+   finished promise remains after finishing: true
 
+finished promise updates after playing: true
 
+cancel() updates finished promise: true
 
+Expected finished promise cancellation

+ 2 - 0
Tests/LibWeb/Text/expected/WebAnimations/animation-properties/timeline.txt
Wyświetl plik 

@@ -0,0 +1,2 @@
 
+   Animation's default timeline is the document's timeline: true
 
+Animation created with null timeline has the document's timeline: true

+ 29 - 0
Tests/LibWeb/Text/input/WebAnimations/animation-properties/currentTime.html
Wyświetl plik 

@@ -0,0 +1,29 @@
 
+<!DOCTYPE html>
 
+<div id="foo"></div>
 
+<script src="../../include.js"></script>
 
+<script>
 
+    asyncTest(done => {
 
+        const foo = document.getElementById("foo");
 
+
 
+        let animation = new Animation(null, null);
 
+        println(`Animation with no timeline has null currentTime: ${animation.currentTime === null}`);
 
+
 
+        animation = new Animation(new KeyframeEffect(foo, []));
 
+        println(`Animation that hasn't been played has null currentTime: ${animation.currentTime === null}`);
 
+
 
+        animation = foo.animate({ color: "red" }, { duration: 1000 });
 
+        println(`Played animation has a currentTime of 0: ${animation.currentTime === 0}`);
 
+
 
+        setTimeout(() => {
 
+            // FIXME: Figure out how to consistently test timings
 
+            // if (animation.currentTime > 95 && animation.currentTime < 105)
 
+            //     println("Animation time after 100ms is correct");
 
+
 
+            animation = foo.animate({ opacity: [0, 1] }, { duration: 1000 });
 
+            println(`New animation has not started animating: ${getComputedStyle(foo).opacity === "0"}`);
 
+            animation.currentTime = 1000;
 
+            println(`Animation with currentTime set to end is finished: ${getComputedStyle(foo).opacity === "1"}`);
 
+            done();
 
+        }, 100);
 
+    });
 
+</script>

+ 19 - 0
Tests/LibWeb/Text/input/WebAnimations/animation-properties/effect.html
Wyświetl plik 

@@ -0,0 +1,19 @@
 
+<!DOCTYPE html>
 
+<div id="foo"></div>
 
+<script src="../../include.js"></script>
 
+<script>
 
+    test(() => {
 
+        const foo = document.getElementById("foo");
 
+        let animation = foo.animate({ color: ["red", "blue"] });
 
+        println(`Element.animate creates Animation with effect: ${animation.effect instanceof KeyframeEffect}`);
 
+
 
+        animation.effect = null;
 
+        println(`Setting effect to null clears the effect: ${animation.effect === null}`);
 
+
 
+        animation = new Animation(null, null);
 
+        println(`Accessing effect property on animation with no effect produces null: ${animation.effect === null}`);
 
+
 
+        animation.effect = new KeyframeEffect(foo, {});
 
+        println(`Setting effect on animation with no effect works: ${animation.effect instanceof KeyframeEffect}`);
 
+    });
 
+</script>

+ 34 - 0
Tests/LibWeb/Text/input/WebAnimations/animation-properties/finished.html
Wyświetl plik 

@@ -0,0 +1,34 @@
 
+<!DOCTYPE html>
 
+<div id="foo"></div>
 
+<script src="../../include.js"></script>
 
+<script>
 
+    asyncTest(async done => {
 
+        const foo = document.getElementById("foo");
 
+        let animation = foo.animate({ opacity: [0, 1] }, { duration: 100 });
 
+        let finishedPromise = animation.finished;
 
+
 
+        // FIXME: Figure out how to consistently test timings
 
+        // const currentTime = performance.now();
 
+        await finishedPromise;
 
+        // const elapsedTime = performance.now() - currentTime;
 
+        // if (elapsedTime > 95 && elapsedTime < 105)
 
+        //     println("Animation time after 100ms is correct")
 
+
 
+        println(`finished promise remains after finishing: ${Object.is(finishedPromise, animation.finished)}`);
 
+
 
+        animation.play();
 
+        println(`finished promise updates after playing: ${!Object.is(finishedPromise, animation.finished)}`);
 
+        finishedPromise = animation.finished;
 
+
 
+        // Upon cancellation, the finished promise should be rejected
 
+        finishedPromise.then(() => {
 
+            println("Unexpected finished promise resolution");
 
+        }).catch(() => {
 
+            println("Expected finished promise cancellation");
 
+        });
 
+        animation.cancel();
 
+
 
+        println(`cancel() updates finished promise: ${!Object.is(finishedPromise, animation.finished)}`);
 
+        done();
 
+    });
 
+</script>

+ 13 - 0
Tests/LibWeb/Text/input/WebAnimations/animation-properties/timeline.html
Wyświetl plik 

@@ -0,0 +1,13 @@
 
+<!DOCTYPE html>
 
+<div id="foo"></div>
 
+<script src="../../include.js"></script>
 
+<script>
 
+    test(() => {
 
+        const foo = document.getElementById("foo");
 
+        let animation = foo.animate({ opacity: [0, 1] });
 
+        println(`Animation's default timeline is the document's timeline: ${animation.timeline === document.timeline}`);
 
+
 
+        animation = foo.animate({ opacity: [0, 1] }, { timeline: null });
 
+        println(`Animation created with null timeline has the document's timeline: ${animation.timeline === document.timeline}`);
 
+    });
 
+</script>

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5